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/jgkM 著作权归作者所有。请勿转载和采集!