JavaScript 中的石头、布、剪刀游戏
阅读：41
点赞：0
在本文中，我们将学习如何通过添加得分跟踪、动画效果、重置按钮以及更加精致的用户界面来改进经典的“石头、剪刀、布”游戏。以下是更新后的HTML和JavaScript代码。
一、HTML代码
更新你的index.html文件，内容如下：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>石头剪刀布游戏title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
text-align: center; /* 文本居中 */
margin-top: 50px; /* 上边距 */
}
button {
padding: 10px 20px; /* 按钮内边距 */
font-size: 16px; /* 字体大小 */
margin: 5px; /* 按钮间距 */
cursor: pointer; /* 鼠标悬停时显示为指针 */
}
.result {
margin-top: 20px; /* 结果显示的上边距 -->
font-size: 24px; /* 结果字体大小 */
}
.score {
font-size: 20px; /* 得分显示的字体大小 -->
margin-top: 10px; /* 得分显示的上边距 -->
}
.win {
color: green; /* 胜利颜色 -->
}
.lose {
color: red; /* 失败颜色 -->
}
.tie {
color: orange; /* 平局颜色 -->
}
style>
head>
<body>
<h1>石头剪刀布h1>
<button onclick="play('rock')">石头button>
<button onclick="play('paper')">布button>
<button onclick="play('scissors')">剪刀button>
<button onclick="resetGame()">重置游戏button>
<div class="score" id="score">玩家: 0 | 电脑: 0div>
<div class="result" id="result">div>
<script src="script.js">script>
body>
html>
二、JavaScript代码
更新你的script.js文件，内容如下：
let playerScore = 0; // 玩家得分
let computerScore = 0; // 电脑得分
function play(userChoice) {
const choices = ['rock', 'paper', 'scissors']; // 可选的游戏选项
const computerChoice = choices[Math.floor(Math.random() * choices.length)]; // 随机选择电脑的选项
let result = ''; // 存储游戏结果的变量
// 判断游戏结果
if (userChoice === computerChoice) {
result = `平局！你和电脑都选择了${userChoice}.`;
document.getElementById('result').className = 'result tie'; // 设置结果样式为平局
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'paper' && computerChoice === 'rock') ||
(userChoice === 'scissors' && computerChoice === 'paper')
) {
result = `你赢了！${userChoice}胜过${computerChoice}.`;
playerScore++; // 玩家得分增加
document.getElementById('result').className = 'result win'; // 设置结果样式为胜利
} else {
result = `你输了！${computerChoice}胜过${userChoice}.`;
computerScore++; // 电脑得分增加
document.getElementById('result').className = 'result lose'; // 设置结果样式为失败
}
document.getElementById('result').innerText = result; // 显示游戏结果
updateScore(); // 更新得分显示
}
function updateScore() {
document.getElementById('score').innerText = `玩家: ${playerScore} | 电脑: ${computerScore}`; // 更新得分显示
}
function resetGame() {
playerScore = 0; // 重置玩家得分
computerScore = 0; // 重置电脑得分
updateScore(); // 更新得分显示
document.getElementById('result').innerText = ''; // 清除游戏结果
}
三、代码解释
-
引入了两个变量（ playerScore和computerScore）来跟踪得分。 -
updateScore函数在每轮游戏后更新网页上的得分显示。 -
CSS类（ win、lose、tie）用于根据游戏结果改变文本颜色。 -
添加了一个“重置游戏”按钮，允许用户重置得分。 -
得分显示进行了样式优化，以提高可见性。
四、结论
-
保存更新后的 index.html和script.js文件在同一目录下。 -
在网络浏览器中打开 index.html文件。 -
点击任意按钮即可玩游戏，跟踪你的得分，并根据需要使用重置按钮。
通过这些改进，石头剪刀布游戏不仅提供了娱乐，还通过得分跟踪和视觉反馈增强了用户体验。