提示词
js html 写一个老虎机游戏
创建一个简单的老虎机游戏可以是一个有趣的项目，它可以帮助您学习如何使用HTML、CSS和JavaScript来构建互动的网页应用。请注意，虽然这里我们将创建的是一个纯娱乐性质的模拟器，并不涉及真实货币交易，但还是建议负责任地使用此类内容。
以下是一个基本的HTML、CSS和JavaScript实现的老虎机游戏示例：
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Slot Machine Game</title><link rel="stylesheet" href="css/test024.css">
</head>
<body>
<div id="slot-machine"><div class="reel-container"><div class="reel" id="reel1"></div><div class="reel" id="reel2"></div><div class="reel" id="reel3"></div></div><button id="spinButton">Spin!</button><div id="result"></div>
</div>
<script src="js/test024.js"></script>
</body>
</html>
body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f5f5f5;margin: 0;
}#slot-machine {text-align: center;
}.reel-container {display: flex;justify-content: space-around;width: 400px;margin-bottom: 20px;
}.reel {width: 100px;height: 150px;border: 3px solid #333;background-color: white;overflow: hidden;display: flex;justify-content: center;align-items: center;font-size: 50px;
}button {padding: 10px 20px;font-size: 16px;
}
const symbols = ['🍒', '🍋', '🍊', '🍇', '🔔', '💎'];
const reels = document.querySelectorAll('.reel');
let spinning = false;function spinReel() {let count = 0;const interval = setInterval(() => {if (count >= 10) clearInterval(interval);else {for (let reel of reels) {reel.textContent = symbols[Math.floor(Math.random() * symbols.length)];}}count++;}, 100);
}document.getElementById('spinButton').addEventListener('click', () => {if (!spinning) {spinning = true;spinReel();setTimeout(() => {spinning = false;checkResult();}, 1000);}
});function checkResult() {const resultSymbols = Array.from(reels, reel => reel.textContent);const uniqueSymbols = new Set(resultSymbols);let message = '';if (uniqueSymbols.size === 1) {message = '大赢家！';} else if (uniqueSymbols.size === 2) {message = '小胜！';} else {message = '再试一次...';}document.getElementById('result').textContent = message;
}
这个示例提供了一个简单的老虎机游戏结构，包括三个转轴（reels），每个转轴在点击“Spin!”按钮后会随机显示一组符号。游戏结束后会检查结果并给出相应的消息（如“大赢家！”、“小胜！”或“再试一次…”）。你可以根据自己的需求调整符号集、添加更多的动画效果或是修改获胜条件等。此代码仅供学习和娱乐用途。
运行效果
