要让石头、布和剪刀的JS游戏工作,你需要进行以下步骤:
以下是一个简单的示例代码,帮助你理解以上步骤:
HTML代码:
<div id="game">
<h1>石头、布、剪刀</h1>
<button id="rock">石头</button>
<button id="paper">布</button>
<button id="scissors">剪刀</button>
<p id="result"></p>
</div>
CSS代码:
#game {
text-align: center;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
}
#result {
font-size: 20px;
font-weight: bold;
}
JavaScript代码:
// 获取按钮元素
var rockBtn = document.getElementById("rock");
var paperBtn = document.getElementById("paper");
var scissorsBtn = document.getElementById("scissors");
// 添加点击事件监听器
rockBtn.addEventListener("click", function() {
playGame("rock");
});
paperBtn.addEventListener("click", function() {
playGame("paper");
});
scissorsBtn.addEventListener("click", function() {
playGame("scissors");
});
// 游戏逻辑处理函数
function playGame(userChoice) {
// 生成电脑的选择
var computerChoice = generateComputerChoice();
// 比较用户和电脑的选择,判断胜负
var result = compareChoices(userChoice, computerChoice);
// 显示结果
displayResult(result);
}
// 生成电脑的选择
function generateComputerChoice() {
var choices = ["rock", "paper", "scissors"];
var randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}
// 比较用户和电脑的选择,判断胜负
function compareChoices(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "平局";
} else if (
(userChoice === "rock" && computerChoice === "scissors") ||
(userChoice === "paper" && computerChoice === "rock") ||
(userChoice === "scissors" && computerChoice === "paper")
) {
return "你赢了";
} else {
return "你输了";
}
}
// 显示结果
function displayResult(result) {
var resultElement = document.getElementById("result");
resultElement.textContent = result;
}
这样,你就可以让石头、布和剪刀的JS游戏工作了。记得在测试和调试过程中,不断优化和完善代码,以提升游戏的稳定性和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云