独り言

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

【JavaScript】石取りゲーム

JavaScript

JavaScriptを使って超簡単な石取りゲームを作成。
プレイヤーがAとBで交互に交換していき、1度に1～3個の石を取ることができる。
最後の1個を取った人が負け。
JavaScriptの勉強の参考に。

ソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石取りゲーム</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>石取りゲーム</h1>
    <p style="color:red" id="winner"></p>
    <p>残り：<span id="total"></span>個</p>
    <p>※1度に3つまで取得できます</p>
    <p id="stone">
        
    </p>
    プレイヤー<span id="player">A</span>さん
    <form>
        <p>石を<input type="number" id="num" name="num" min="1" max="3">個取る</p>
        <button type="button" id="btn" name="btn">決定</button>
    </form>
    <p id="message"></p>
    <script>
        'use strict';

        const disp = function(num) {
            let stone = '';
            for(let i=1; i <= num; i++) {
                stone += '●';
                if(i % 10 == 0) {
                    stone += '<br>';
                }
            }
            document.getElementById('stone').innerHTML = stone;
            document.getElementById('total').textContent = (num);
        }

        const firstStoneNum = 25;
        disp(firstStoneNum);

        // ボタンが押されたときのイベント処理
        document.getElementById('btn').addEventListener('click', function() {
            const total = Number(document.getElementById('total').textContent);
            const num = Number(document.getElementById('num').value);
            let player = document.getElementById('player').textContent;
            if(player === 'A') {
                player = 'B';
            } else {
                player = 'A';
            }

            if(total - num > 0) {
                disp(total - num);
                document.getElementById('player').textContent = player;
            } else {
                document.getElementById('stone').textContent = '';
                document.getElementById('total').textContent = '0';
                document.getElementById('winner').textContent = player + 'さんの勝利！'
            }
        });

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

参考図書