close-haul hurricane's game

Click here for free DL of the app version that can save data.

No:11398

157

←

Prev Next

→

close-haul hurricane
Developer User1006｜Date and time 23/8/9 16:10:53
Build time 41.001 sec｜Game capacity 4.36KB｜

Script

了解です。ちゅきちゅきハリケーンのゲームを実装します。

このプログラムは、3x3のマス目のゲームボードを表示し、交互にマス目をクリックして〇と✕を置いていきます。勝利条件や引き分けの判定も行います。ゲームが終了した後は、マス目の表示と状態をリセットします。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

了解です。ちゅきちゅきハリケーンのゲームを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ちゅきちゅきハリケーン</title>
    <style>
        #container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        .button {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccf2ff;
            font-size: 48px;
            cursor: pointer;
            padding: 30px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="game-board">
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
    </div>
</div>

// 現在のプレイヤーを保持する変数
    let currentPlayer = '〇';

// マス目がクリックされたときの処理
    function handleClick(index) {
        // クリックされたマス目が空である場合のみ処理を実行
        if (board[index] === '') {
            // 現在のプレイヤーのマークを表示
            document.getElementById('game-board').children[index].textContent = currentPlayer;
            // マス目の状態を更新
            board[index] = currentPlayer;
            // 勝利判定の関数を呼び出し
            if (handleWin()) {
                // 勝利した場合は処理を終了
                return;
            }
            // 現在のプレイヤーを切り替え
            currentPlayer = currentPlayer === '〇' ? '✕' :  '〇';
        }
    }

// 勝利判定の関数
    function handleWin() {
        // 勝利の組み合わせを定義
        const winPatterns = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ];

// 勝利判定のチェック
        for (let pattern of winPatterns) {
            const [a, b, c] = pattern;
            if (board[a] === board[b] && board[b] === board[c] && board[a] !== '') {
                // 勝利したプレイヤーを表示
                alert(`Player ${board[a]} wins!`);
                // マス目の状態をリセット
                board = ['', '', '', '', '', '', '', '', ''];
                // マス目の表示をリセット
                resetButtons();
                return true;
            }
        }

// 引き分けのチェック
        if (!board.includes('')) {
            // 引き分けの場合はアラートを表示
            alert('Draw!');
            // マス目の状態をリセット
            board = ['', '', '', '', '', '', '', '', ''];
            // マス目の表示をリセット
            resetButtons();
            return true;
        }

return false;
    }

// マス目の表示をリセットする関数
    function resetButtons() {
        const buttons = document.getElementsByClassName('button');
        for (let button of buttons) {
            button.textContent = '';
        }
    }

// ゲームの初期化
    function init() {
        const buttons = document.getElementsByClassName('button');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', () => {
                handleClick(i);
            });
        }
    }

// ゲームの初期化関数を呼び出す
    init();
</script>
</body>
</html>
```