HTML 猜拳游戏：在线玩剪刀石头布
<!DOCTYPE html>
<html>
<head>
<title>猜拳小游戏 - 在线玩剪刀石头布</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
h1 {
color: #333;
}
.choices {
margin-top: 20px;
}
.choice {
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.choice img {
width: 100px;
height: 100px;
}
#result {
margin-top: 20px;
font-size: 24px;
color: #f00;
}
</style>
</head>
<body>
<h1>猜拳小游戏</h1>
<div class="choices">
<div class="choice" onclick="playGame('rock')">
<img src="rock.png" alt="石头">
</div>
<div class="choice" onclick="playGame('paper')">
<img src="paper.png" alt="布">
</div>
<div class="choice" onclick="playGame('scissors')">
<img src="scissors.png" alt="剪刀">
</div>
</div>
<div id="result"></div>
<pre><code><script>
function playGame(playerChoice) {
var choices = ['rock', 'paper', 'scissors'];
var computerChoice = choices[Math.floor(Math.random() * choices.length)];
if (playerChoice === computerChoice) {
document.getElementById('result').innerHTML = '平局！';
} else if (
(playerChoice === 'rock' && computerChoice === 'scissors') ||
(playerChoice === 'paper' && computerChoice === 'rock') ||
(playerChoice === 'scissors' && computerChoice === 'paper')
) {
document.getElementById('result').innerHTML = '你赢了！';
} else {
document.getElementById('result').innerHTML = '你输了！';
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/cHV8 著作权归作者所有。请勿转载和采集!