如何在游戏中存储和更新分数？

Question

我如何创建一个函数并让它工作，以便它在每次用户或计算机获胜时存储获胜案例？

我如何创建一个函数并让它工作，以便它在每次用户或计算机获胜时存储获胜案例？我如何创建一个函数并让它工作，以便它在每次用户或计算机获胜时存储获胜案例？电脑赢了？

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Rock Paper Scissors Tutorial</title>
</head>
<body>
    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <br>
    <br>
    <input type="button" value="Reload Page" onClick="document.location.reload(true)">
    <br>
    <br>
    <div class="results">
        <div>
          You
          <span class="result-score">0</span>
        </div>
        <div data-final-column>
          Computer
          <span class="result-score">0</span>
   </div>
    <script src="main.js"></script>
</body>
</html>

--------------------
js

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const computerScoreSpan = document.querySelector('[data-computer-score]')
const yourScoreSpan = document.querySelector('[data-your-score]')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))
// ------
// function incrementScore(scoreSpan) {
//     if (yourWinner) incrementScore(yourScoreSpan)
//     if (computerWinner) incrementScore(computerScoreSpan)
//     scoreSpan.innerText = parseInt(scoreSpan.innerText) + 1
//   }

// --------
function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
  resultDisplay.innerHTML = result
}

Answer 1

据我了解，您想将游戏的获胜者保存在某个地方以便稍后查看，对吗？

好吧，也许你可以使用 localStorage;

这样，您要做的就是获取结果并将它们存储在本地存储中，如下所示：

localStorage.setItem('result', result);

要从 localStorage 获取结果，您可以将其保存在变量中：

const checkResult = localStorage.getItem('result') || null

这样，如果在 localStorage 上没有任何结果，checkResult 将 return null;

Answer 2

嗯，对于初学者来说，您的代码确实效率低下且混乱，我绝对不会推荐 re-starting。但是如果你想保留你已经拥有的代码，为了使分数计数器你不需要一个函数，只需根据结果函数中的结果添加到分数。

这是更新后的 HTML 代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Rock Paper Scissors Tutorial</title>
</head>
<body>
    <h2>Computer Choice: <span id="computer-choice"></span></h2>
    <h2>Your Choice: <span id="user-choice"></span></h2>
    <h2>Result: <span id="result"></span></h2>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
    <br>
    <br>
    <input type="button" value="Reload Page" onClick="document.location.reload(true)">
    <br>
    <br>
        <div id="ys">
          You: 0
        </div>
        <div id="cs">
          Computer: 0
                </div>
    <script src="main.js"></script>
</body>
</html>

和您的 javascript 代码

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
const cs_t = document.getElementById("cs");
const ps_t = document.getElementById("ys");
let userChoice
let computerChoice
let result

var cs = 0;
var ps = 0;

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
  userChoice = e.target.id
  userChoiceDisplay.innerHTML = userChoice
  generateComputerChoice()
  getResult()
}))
// ------


// --------
function generateComputerChoice() {
  const randomNumber = Math.floor(Math.random() * 3) + 1 // or you can use possibleChoices.length
  
  if (randomNumber === 1) {
    computerChoice = 'rock'
  }
  if (randomNumber === 2) {
    computerChoice = 'scissors'
  }
  if (randomNumber === 3) {
    computerChoice = 'paper'
  }
  computerChoiceDisplay.innerHTML = computerChoice
}

function getResult() {
  if (computerChoice === userChoice) {
    result = 'its a draw!'
  }
  if (computerChoice === 'rock' && userChoice === "paper") {
    result = 'you win!'
  }
  if (computerChoice === 'rock' && userChoice === "scissors") {
    result = 'you lost!'
  }
  if (computerChoice === 'paper' && userChoice === "scissors") {
    result = 'you win!'
  }
  if (computerChoice === 'paper' && userChoice === "rock") {
    result = 'you lose!'
  }
  if (computerChoice === 'scissors' && userChoice === "rock") {
    result = 'you win!'
  }
  if (computerChoice === 'scissors' && userChoice === "paper") {
    result = 'you lose!'
  }
    if(result == 'you win!'){
        ps += 1
    }
    else if(result == 'you lose!'){
        console.log("ok2")
        cs += 1
    }
    else{
        cs += 1
        ps += 1
    }
    
    cs_t.innerHTML = ("Computer: " + cs);
    ps_t.innerHTML = ("You: " + ps);
  resultDisplay.innerHTML = result
}

此外，您不需要在所有内容中都放置 span 标签，这是一种非常糟糕的做法。

如何在游戏中存储和更新分数？

How to store and update score in the game?

html

javascript

dom-events