如何存储和更新游戏中的分数?

发布于 2025-01-14 11:04:48 字数 3316 浏览 2 评论 0 原文

如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?

如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?

<!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
}

How can I create a function and make it work so that it stores the win case every time user or computer wins?

How can I create a function and make it work so that it stores the win case every time user or computer wins?How can I create a function and make it work so that it stores the win case every time user or computer wins?

<!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
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

空城缀染半城烟沙 2025-01-21 11:04:48

对于初学者来说,您的代码确实效率低下且混乱,我绝对不建议重新启动。但是,如果您想保留已有的代码,为了制作分数计数器,您不需要函数,只需根据结果函数中的结果添加到分数即可。

这是更新后的 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 标记,这是一种非常糟糕的方法。

Well for starters your code is really inefficient and messy, and I wouldn't definitely recommend re-starting. But if you want to keep the code you already have, to make the score counter you don't need a function, just add to the score based of the result in the result function.

Here's the updated HTML code

<!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>

and your javascript code

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
}

also you do not need to put span tags in everything, it's a really bad way of doing it.

花开雨落又逢春i 2025-01-21 11:04:48

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

好吧,也许你可以使用 localStorage

这样,您所要做的就是获取结果并将它们存储在 localStorage 中,如下所示:

localStorage.setItem('result', result);

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

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

这样,如果 localStorage 上没有任何结果, checkResult 将返回空值;

from what I understand you want to save the winner of the game somewhere so you can check it later right?

Well, maybe you can use localStorage;

With that, all you gotta do is take the result and store them on localStorage, like this:

localStorage.setItem('result', result);

and for get the result from localStorage, you can save it on a variable:

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

in that way if do not have any results on localStorage, checkResult will return null;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文