如何存储和更新游戏中的分数?
如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?
如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?如何创建一个函数并使其工作,以便在每次用户或计算机获胜时存储获胜案例?
<!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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
对于初学者来说,您的代码确实效率低下且混乱,我绝对不建议重新启动。但是,如果您想保留已有的代码,为了制作分数计数器,您不需要函数,只需根据结果函数中的结果添加到分数即可。
这是更新后的 HTML 代码
和您的 javascript 代码,
您也不需要在所有内容中放置 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
and your javascript code
also you do not need to put span tags in everything, it's a really bad way of doing it.
据我了解,您想将游戏的获胜者保存在某个地方,以便稍后查看,对吧?
好吧,也许你可以使用 localStorage;
这样,您所要做的就是获取结果并将它们存储在 localStorage 中,如下所示:
要从 localStorage 获取结果,您可以将其保存在变量中:
这样,如果 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:
and for get the result from localStorage, you can save it on a variable:
in that way if do not have any results on localStorage, checkResult will return null;