用AI写游戏2——实现老虎机游戏

AnalogElectronic

于 2025-02-07 16:57:55 发布

阅读量580

点赞数 2

CC 4.0 BY-SA版权

文章标签：游戏 js

本文链接：https://blog.youkuaiyun.com/AnalogElectronic/article/details/145498511

提示词
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!”按钮后会随机显示一组符号。游戏结束后会检查结果并给出相应的消息（如“大赢家！”、“小胜！”或“再试一次…”）。你可以根据自己的需求调整符号集、添加更多的动画效果或是修改获胜条件等。此代码仅供学习和娱乐用途。