将随机的计算机选择添加到石头剪布剪刀游戏中的按钮,可以通过以下步骤实现:
示例代码如下(仅供参考):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>石头剪布剪刀游戏</title>
<style>
/* 样式设置 */
</style>
</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>
JavaScript (game.js):
// 获取按钮元素
var rockBtn = document.getElementById('rock');
var scissorsBtn = document.getElementById('scissors');
var paperBtn = document.getElementById('paper');
// 监听按钮点击事件
rockBtn.addEventListener('click', function() {
playGame('rock');
});
scissorsBtn.addEventListener('click', function() {
playGame('scissors');
});
paperBtn.addEventListener('click', function() {
playGame('paper');
});
// 游戏逻辑函数
function playGame(userChoice) {
// 随机选择计算机的选项
var computerChoice = getRandomChoice();
// 比较用户选择和计算机选择,判断胜负
var result;
if (userChoice === computerChoice) {
result = '平局';
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'scissors' && computerChoice === 'paper') ||
(userChoice === 'paper' && computerChoice === 'rock')
) {
result = '你赢了';
} else {
result = '你输了';
}
// 显示游戏结果
var resultElement = document.getElementById('result');
resultElement.textContent = result;
}
// 生成计算机的随机选择
function getRandomChoice() {
var random = Math.random();
if (random < 0.33) {
return 'rock';
} else if (random < 0.66) {
return 'scissors';
} else {
return 'paper';
}
}
通过上述代码,实现了一个简单的石头剪布剪刀游戏,并且可以将计算机的随机选择与用户选择进行对比,判断胜负,并在页面上显示结果。注意,上述代码仅为示例,实际实现中可能需要根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云