写一个原生js的石头剪刀布游戏
时间: 2023-12-18 19:03:35 浏览: 28
好的,以下是一个基于原生js的石头剪刀布游戏的代码实现:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>石头剪刀布游戏</title>
<style>
#result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>石头剪刀布游戏</h1>
<p>请选择您的出拳:</p>
<button id="rock">石头</button>
<button id="paper">剪刀</button>
<button id="scissors">布</button>
<div id="result"></div>
<script src="./game.js"></script>
</body>
</html>
```
JS代码:
```javascript
// 获取按钮元素
var rock = document.getElementById('rock');
var paper = document.getElementById('paper');
var scissors = document.getElementById('scissors');
var result = document.getElementById('result');
// 定义游戏规则
var rule = {
'rock': 'scissors',
'paper': 'rock',
'scissors': 'paper'
};
// 绑定按钮点击事件
rock.onclick = function() {
play('rock');
}
paper.onclick = function() {
play('paper');
}
scissors.onclick = function() {
play('scissors');
}
// 定义play函数,进行游戏逻辑的处理
function play(player) {
// 随机生成电脑出的拳
var computer = Math.random() < 0.33 ? 'rock' : (Math.random() < 0.67 ? 'paper' : 'scissors');
// 判断输赢
if (player === computer) {
result.innerHTML = '平局!';
} else if (rule[player] === computer) {
result.innerHTML = '您获胜了!';
} else {
result.innerHTML = '电脑获胜了!';
}
}
```
这个游戏的基本逻辑是,用户点击按钮选择出拳,然后电脑随机生成出拳,比较两者之间的关系,输出胜负结果。