用js实现一个猜拳小游戏
时间: 2024-05-07 14:17:31 浏览: 111
dc.rar_猜拳_简单小游戏
好的,我们可以通过以下步骤来实现一个简单的猜拳游戏:
1. 创建一个 HTML 文件,并在其中添加三个按钮,分别代表石头、剪刀和布。
```html
<!DOCTYPE html>
<html>
<head>
<title>猜拳游戏</title>
</head>
<body>
<h1>猜拳游戏</h1>
<button id="rock">石头</button>
<button id="scissors">剪刀</button>
<button id="paper">布</button>
<p id="result"></p>
<script src="game.js"></script>
</body>
</html>
```
2. 创建一个名为 game.js 的 JavaScript 文件,并在其中添加代码逻辑。
```javascript
// 定义变量
const options = ["rock", "scissors", "paper"];
const resultEl = document.querySelector("#result");
// 生成随机数
function randomChoice() {
return options[Math.floor(Math.random() * options.length)];
}
// 对战逻辑
function play(playerChoice) {
const computerChoice = randomChoice();
// 判断胜负关系
if (playerChoice === computerChoice) {
resultEl.textContent = "平局";
} else if (
(playerChoice === "rock" && computerChoice === "scissors") ||
(playerChoice === "scissors" && computerChoice === "paper") ||
(playerChoice === "paper" && computerChoice === "rock")
) {
resultEl.textContent = "你赢了!";
} else {
resultEl.textContent = "你输了~";
}
}
// 点击事件监听器
document.querySelector("#rock").addEventListener("click", function() {
play("rock");
});
document.querySelector("#scissors").addEventListener("click", function() {
play("scissors");
});
document.querySelector("#paper").addEventListener("click", function() {
play("paper");
});
```
3. 浏览器打开 HTML 文件,点击石头、剪刀和布按钮开始游戏。游戏结果会显示在页面上方的 p 元素中。
这样就完成了一个基础的猜拳游戏实现。
阅读全文