js实现简易猜拳游戏。

OK论坛 · 发表于 2024-8-19 14:00:04

本帖最后由 OK论坛于 2024-8-19 14:00 编辑

效果如图：

<!DOCTYPE html>
<html lang="en">
<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;
margin-top: 50px;
}
button,
#computerChoice {
padding: 10px 20px;
margin: 10px;
font-size: 16px;
cursor: pointer;
border: none;
}
p {
margin: 20px 0;
font-size: 18px;
}
.active,
#computerChoice {
background-color: #ff6700;
color: white;
}
</style>
</head>
<body>
<div>
<h1>猜拳游戏</h1>
<span>总局数：<span id="allCount">0</span></span>
<span style="margin-left: 30px;">赢局：<span id="win">0</span></span>
<span style="margin-left: 30px;">平局：<span id="abreast">0</span></span>
<span style="margin-left: 30px;">输局：<span id="defeat">0</span></span>
</div>
<div>
<span>你的选择：</span>
<button onclick="userChoice('石头',0)">石头</button>
<button onclick="userChoice('剪刀',1)">剪刀</button>
<button onclick="userChoice('布',2)">布</button>
<span style="margin-left: 66px;">电脑选择：</span> <span id="computerChoice">……</span>
</div>
<p>结果： <span id="result">……</span></p>
</body>
<script>
const result = ["#ffc107", "#32a12b", "#db5243"]
const resultText = document.getElementById("result")
const allCount = getElementByMyId("allCount")
const win = getElementByMyId("win")
const defeat = getElementByMyId("defeat")
const abreast = getElementByMyId("abreast")
function getRandomChoice() {
const choices = ['石头', '剪刀', '布'];
return choices[Math.floor(Math.random() * choices.length)];
}
function getElementByMyId(name) {
return document.getElementById(name)
}
function determineWinner(user, computer) {
if (user === computer) {
resultText.style.color = result[0]
score.abreast = score.abreast + 1
abreast.innerText = score.abreast
return '-平局-';
} else if ((user === '石头' && computer === '剪刀') ||
(user === '剪刀' && computer === '布') ||
(user === '布' && computer === '石头')) {
resultText.style.color = result[1]
score.win = score.win + 1
win.innerText = score.win
return '你赢了!';
} else {
resultText.style.color = result[2]
score.defeat = score.defeat + 1
defeat.innerText = score.defeat
return '你输了!';
}
}
const score = {
"all": 0,
"win": 0,
"defeat": 0,
"abreast": 0
}
function userChoice(choice, index) {
score.all = score.all + 1
allCount.innerText = score.all
const buttonList = document.getElementsByTagName("button")
for (let index = 0; index < buttonList.length; index++) {
const element = buttonList[index];
element.classList.remove("active")
// element.classList.add("active")
}
buttonList[index].classList.add("active")
const computerChoice = getRandomChoice();
document.getElementById('computerChoice').innerText = computerChoice;
const result = determineWinner(choice, computerChoice);
document.getElementById('result').innerText = result;
}
</script>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

js实现简易猜拳游戏。

本帖子中包含更多资源

优秀版主

i 认证

js实现简易猜拳游戏 。

本帖子中包含更多资源

优秀版主

i 认证

js实现简易猜拳游戏。