独り言

プログラミングの講師をしています。新人研修で扱う技術の解説と個人の技術メモ、技術書の紹介など

【JavaScript】スロットゲーム

JavaScript

JavaScriptで作成したスロットゲームです。
ドットインストールを参考にしようとしつつ、結局全く違うコードになってしまいましたが、とりあえずは動きます。
JavaScriptの学習やゲーム作成の参考にどうぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スロットゲーム</title>
    <style>
        body {
            text-align: center;
        }
        main section p {
            font-size: 36px;
            height: 100px;
            line-height: 100px;
            margin: 0;
            background-color: #f5f5f5;
        }
        main {
            background-color: #e6e6fa;
            width: 360px;
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
        }
        section {
            width: 100px;
            margin: 10px;
        }
        section button {
            width: 100px;
        }
        #start {
            width: 150px;
            height: 40px;
            font-size: 24px;
        }

    </style>
</head>
<body>
    <h1>スロットゲーム</h1>
    <main>
        <section>
            <p id="slot1"></p>
            <button id="stop1">STOP</button>
        </section>
        <section>
            <p id="slot2"></p>
            <button id="stop2">STOP</button>
        </section>
        <section>
            <p id="slot3"></p>
            <button id="stop3">STOP</button>
        </section>
    </main>
    <button id="start">START</button>

    <script>
        'use strict';

        const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        const slot1 = document.getElementById('slot1');
        const slot2 = document.getElementById('slot2');
        const slot3 = document.getElementById('slot3');
        const stop1 = document.getElementById('stop1');
        const stop2 = document.getElementById('stop2');
        const stop3 = document.getElementById('stop3');
        const start = document.getElementById('start');

        let setTimeoutId1 = undefined;
        let setTimeoutId2 = undefined;
        let setTimeoutId3 = undefined;

        start.disabled = false;
        stop1.disabled = true;
        stop2.disabled = true;
        stop3.disabled = true;
        slot1.textContent = nums[Math.floor(Math.random() * nums.length)];
        slot2.textContent = nums[Math.floor(Math.random() * nums.length)];
        slot3.textContent = nums[Math.floor(Math.random() * nums.length)];


        function setNum1() {
            slot1.textContent = nums[Math.floor(Math.random() * nums.length)];
            setTimeoutId1 = setTimeout(() => {
                setNum1();
            }, 100);
        }

        function setNum2() {
            slot2.textContent = nums[Math.floor(Math.random() * nums.length)];
            setTimeoutId2 = setTimeout(() => {
                setNum2();
            }, 100);
        }

        function setNum3() {
            slot3.textContent = nums[Math.floor(Math.random() * nums.length)];
            setTimeoutId3 = setTimeout(() => {
                setNum3();
            }, 100);
        }

        function statusCheck() {
            if(start.disabled === true && stop1.disabled === true && stop2.disabled === true && stop3.disabled === true) {
                start.disabled = false;
                stop1.disabled = true;
                stop2.disabled = true;
                stop3.disabled = true;
            }
        }

        start.addEventListener('click', () => {
            start.disabled = true;
            stop1.disabled = false;
            stop2.disabled = false;
            stop3.disabled = false;
            setNum1();
            setNum2();
            setNum3();
        });

        stop1.addEventListener('click', () => {
            stop1.disabled = true;
            clearTimeout(setTimeoutId1)
            statusCheck();
        });

        stop2.addEventListener('click', () => {
            stop2.disabled = true;
            clearTimeout(setTimeoutId2)
            statusCheck();
        });

        stop3.addEventListener('click', () => {
            stop3.disabled = true;
            clearTimeout(setTimeoutId3)
            statusCheck();
        });      


    </script>
</body>
</html>