使用html+css+javascript实现猜拳游戏
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6.猜拳游戏</title>
<link rel="stylesheet" href="index.css">
<script src="index.js" defer></script>
</head>
<body>
<div class="container">
<h1>猜拳游戏</h1>
<div>
<img id="sysResult" src="./images/question.png" alt="问号">
</div>
<div id="userSelect">
<h1>请出拳:</h1>
<div class="user_select" onclick="handleClicked(event)">
<div class="item">
<img src="./images/rock.png" alt="石头" data-type="0">
</div>
<div class="item">
<img src="./images/cloth.png" alt="布" data-type="1">
</div>
<div class="item">
<img src="./images/scissor.png" alt="剪刀" data-type="2">
</div>
</div>
</div>
<div id="userResult">
<h1 id="userResultMsg"></h1>
<div>
<img id="userResultImg" src="./images/question.png" alt="问号">
</div>
<p>
<img class="refresh_btn" onclick="refresh()" src="./images/refresh.png" alt="刷新">
</p>
</div>
</div>
</body>
</html>
index.js
const images = ['rock', 'cloth', 'scissor'];
function handleClicked(e) {
if (!e.target.dataset.type) return;
// 用户
const userResult = +e.target.dataset.type;
// 系统
const sysResult = Math.floor(3 * Math.random());
// 猜拳
let res = 0;
if (userResult === sysResult) res = 0;
else if (sysResult - userResult === 1 || sysResult - userResult === -2) res = -1;
else res = 1;
document.getElementById('sysResult').src = './images/' + images[sysResult] + '.png';
document.getElementById('userSelect').style.display = 'none';
document.getElementById('userResult').style.display = 'block';
document.getElementById('userResultMsg').innerText = ['您输啦', '平局', '您赢啦'][res + 1];
document.getElementById('userResultImg').src = './images/' + images[userResult] + '.png';
document.body.style.backgroundColor = ['#f38181', '#fce38a', '#95e1d3'][res + 1];
}
function refresh() {
document.getElementById('sysResult').src = './images/question.png';
document.getElementById('userSelect').style.display = 'block';
document.getElementById('userResult').style.display = 'none';
document.getElementById('userResultMsg').innerText = '';
document.getElementById('userResultImg').src = './images/question.png';
document.body.style.backgroundColor = '#eaffd0';
}
index.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
text-align: center;
background-color: bisque;
}
.user_select{
display: flex;
justify-content: center;
align-items: flex-end;
}
.user_select .item{
cursor:pointer
}
.user_select .item:hover{
transform: scale(1.1);
}
.user_select .item:active{
transform: scale(1);
}
.user_select .item ~ .item {
margin-left: 20px;
}
#userResult{
display: none;
}
.refresh_btn{
cursor: pointer;
transition: all .3s;
}
.refresh_btn:hover{
transform: rotate(90deg);
}
h1{
margin: 20px;
}
运行结果图
猜拳游戏