HTML 猜拳小游戏：带动态摇晃效果
以下是一个简单的猜拳小游戏的HTML代码，其中包含动态效果：
<!DOCTYPE html>
<html>
<head>
<title>猜拳小游戏</title>
<style>
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<h1>猜拳小游戏</h1>
<p>请选择一个手势：</p>
<button onclick="playGame('rock')">✊</button>
<button onclick="playGame('paper')">✋</button>
<button onclick="playGame('scissors')">✌️</button>
<div id="result"></div>
<script>
function playGame(userChoice) {
var choices = ['rock', 'paper', 'scissors'];
var randomIndex = Math.floor(Math.random() * 3);
var computerChoice = choices[randomIndex];
var result = compareChoices(userChoice, computerChoice);
displayResult(userChoice, computerChoice, result);
}
function compareChoices(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return '平局！';
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'paper' && computerChoice === 'rock') ||
(userChoice === 'scissors' && computerChoice === 'paper')
) {
return '你赢了！';
} else {
return '你输了！';
}
}
function displayResult(userChoice, computerChoice, result) {
var resultElement = document.getElementById('result');
resultElement.innerHTML = '你选择了：' + userChoice + '<br>' +
'电脑选择了：' + computerChoice + '<br>' +
'结果：' + result;
resultElement.style.animation = 'shake 0.5s';
setTimeout(function() {
resultElement.style.animation = '';
}, 500);
}
</script>
</body>
</html>
这个小游戏使用了JavaScript来处理逻辑，并在用户选择手势后计算结果并显示。结果显示时会有一个摇晃的动画效果，通过CSS的@keyframes和animation属性实现。
原文地址: https://www.cveoy.top/t/topic/cH6K 著作权归作者所有。请勿转载和采集!