HTML5+CSS+JavaScript剪子石头布游戏
HTML5+CSS+JavaScript剪子石头布游戏
用HTML5+CSS+JavaScript剪子石头布游戏实现剪子石头布游戏，游戏有成绩计数，人、机输赢情况，及平局情况。
✂代表剪刀，▉代表石头，▓ 代表布，给出人机双方的出拳情况
游戏规则
剪刀胜布：剪刀可以剪断布。
石头胜剪刀：石头可以砸坏剪刀。
布胜石头：布可以包住石头。
先看运行效果图：
源码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剪子石头布游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
.container {
margin-top: 50px;
}
.choices button {
width: 80px; /* 设置按钮宽度 */
height: 50px; /* 设置按钮高度 */
font-size: 20px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.result {
font-size: 24px;
margin-top: 20px;
}
.scoreboard {
margin-top: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>剪子石头布游戏</h1>
<div class="choices">
<button onclick="playGame('✂️')">✂️</button>
<button onclick="playGame('▉')">▉</button>
<button onclick="playGame('▓')">▓</button>
</div>
<div class="result">
<p id="resultText">请选择您的出拳</p>
<p id="Choice">出拳情况: </p>
</div>
<div class="scoreboard">
<p>玩家胜利: <span id="playerWins">0</span> ；
电脑胜利: <span id="computerWins">0</span> ；
平局: <span id="ties">0</span> </p>
</div>
</div>
<script>
let playerWins = 0;
let computerWins = 0;
let ties = 0;
function playGame(playerChoice) {
const choices = ['✂️', '▉', '▓'];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
document.getElementById('Choice').textContent = `玩家出拳: ${playerChoice} ；
电脑出拳: ${computerChoice}`;
let result = '';
if (playerChoice === computerChoice) {
result = '平局!';
ties++;
} else if (
(playerChoice === '✂️' && computerChoice === '▓') ||
(playerChoice === '▉' && computerChoice === '✂️') ||
(playerChoice === '▓' && computerChoice === '▉')
) {
result = '你赢了!';
playerWins++;
} else {
result = '电脑赢了!';
computerWins++;
}
document.getElementById('resultText').textContent = result;
document.getElementById('playerWins').textContent = playerWins;
document.getElementById('computerWins').textContent = computerWins;
document.getElementById('ties').textContent = ties;
}
</script>
</body>
</html>
原文地址：https://blog.csdn.net/cnds123/article/details/142695681
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！