Light-on-off maze II's game

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

No:7589

3040

←

Prev Next

→

Light-on-off maze II
Developer o2pi4｜Date and time 23/7/8 23:20:47
Build time 18.639 sec｜Game capacity 3.788KB｜

Script

了解しました。以下に、JavaScriptを用いたライトオンオフ迷路ゲームの実装例を示します。

このプログラムでは、5x5のマップデータを元に、クリックしたセルとその周囲のセルの状態を反転し、目指すのはすべてのセルをオフにすることです。セルがオンの場合は黄色、オフの場合は白色で表示されます。全てのセルがオフになるとクリアとなり、アラートが表示されます。スマートフォンでも操作できるようになっており、絵文字は使用していませんが、上述の要件を満たすライトオンオフ迷路ゲームが実装されています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。以下に、JavaScriptを用いたライトオンオフ迷路ゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ライトオンオフ迷路II</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 1px;
            background-color: black;
        }
        .cell {
            background-color: white;
        }
        .cell.on {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="grid"></div>

const grid = document.querySelector('.grid');
        let gameState = [];

// ゲームの初期化
        function initializeGame() {
            for (let row = 0; row < map.length; row++) {
                for (let col = 0; col < map[row].length; col++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener('click', handleClick);
                    grid.appendChild(cell);

if (map[row][col] === 1) {
                        cell.classList.add('on');
                        gameState.push(1);
                    } else {
                        gameState.push(0);
                    }
                }
            }
        }

// クリックイベントの処理
        function handleClick(event) {
            const clickedCell = event.target;
            const row = parseInt(clickedCell.dataset.row);
            const col = parseInt(clickedCell.dataset.col);

toggleCellState(row, col);
            toggleCellState(row - 1, col);
            toggleCellState(row + 1, col);
            toggleCellState(row, col - 1);
            toggleCellState(row, col + 1);

if (checkWin()) {
                alert('クリア！');
            }
        }

// マスの状態を反転する
        function toggleCellState(row, col) {
            if (row >= 0 && row < map.length && col >= 0 && col < map[row].length) {
                const index = row * map[row].length + col;
                const cell = grid.children[index];

if (gameState[index] === 1) {
                    cell.classList.remove('on');
                    gameState[index] = 0;
                } else {
                    cell.classList.add('on');
                    gameState[index] = 1;
                }
            }
        }

// ゲームのクリア判定
        function checkWin() {
            for (let state of gameState) {
                if (state === 1) {
                    return false;
                }
            }
            return true;
        }

// ゲームの開始
        initializeGame();
    </script>
</body>
</html>
```

このプログラムでは、5x5のマップデータを元に、クリックしたセルとその周囲のセルの状態を反転し、目指すのはすべてのセルをオフにすることです。セルがオンの場合は黄色、オフの場合は白色で表示されます。全てのセルがオフになるとクリアとなり、アラートが表示されます。

スマートフォンでも操作できるようになっており、絵文字は使用していませんが、上述の要件を満たすライトオンオフ迷路ゲームが実装されています。