要编
写修改
石头剪刀布网页数值的代码，可按以下步骤进行：
### HTML 结构
首先创建基本的 HTML 结构，包含输入框、按钮和显示结果的区域。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
石头剪刀布</title>
</head>
<body>
<input type="number" id="inputValue" placeholder="输入 0(
石头)、1(剪刀)、2(布)">
<button onclick="playGame()">开始游戏</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
```
###
JavaScript 逻辑
在
JavaScript 中实现游戏逻辑，包括获取用户输入、验证输入、生成随机结果和判断胜负。
```
javascript
function playGame() {
// 获取用户输入
const inputElement = document.getElementById('inputValue');
let input = parseInt(inputElement.value);
// 验证输入
while (isNaN(input) || input < 0 || input > 2) {
input = parseInt(prompt('请输入有效的数字（0, 1, 2）'));
}
// 生成随机结果
const computerChoice = Math.floor(Math.random() * 3);
// 判断胜负
let resultText;
if (input === computerChoice) {
resultText = '平局！';
} else if ((input === 0 && computerChoice === 1) || (input === 1 && computerChoice === 2) || (input === 2 && computerChoice === 0)) {
resultText = '你赢了！';
} else {
resultText = '你输了！';
}
// 显示结果
const resultElement = document.getElementById('result');
resultElement.textContent = `你选择了 ${['
石头', '剪刀', '布'][input]}，电脑选择了 ${['
石头', '剪刀', '布'][computerChoice]}。${resultText}`;
}
```
### 代码解释
- **HTML 部分**：创建了一个输入框让用户输入数字，一个按钮用于触发游戏，以及一个段落用于显示游戏结果。
- **
JavaScript 部分**：
- `playGame` 函数获取用户输入，并验证其是否为 0、1 或 2。
- 使用 `Math.random()` 生成电脑的随机选择。
- 根据用户和电脑的选择判断胜负，并将结果显示在页面上。
### 运行代码
将上述 HTML 代码保存为 `index.html`，
JavaScript 代码保存为 `script.js`，并将它们放在同一目录下。然后在浏览器中打开 `index.html` 文件，即可开始游戏。
扫一扫
6473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
