AI game creator

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

No:7588

7169

←

Prev Next

→

Light on-off maze
Developer o2pi4｜Date and time 23/7/8 23:18:45
Build time 24.034 sec｜Game capacity 5.44KB｜

Script

ご要望のゲームを作成しました。以下のコードを1枚のHTMLファイルにコピーして保存し、ブラウザで開くことでゲームをプレイすることができます。

このゲームはライトのオン・オフを操作しながら迷路を解いていくものです。ゴールに到達した際、ライトがついていれば「ゴール！」と表示され、ライトが消えていれば「暗いよ！」と表示されます。上下左右の矢印キーでプレイヤーを移動させることができます。プレイヤーがいるセルの背景色は青色になります。各セルをクリックすることでライトのオン・オフを切り替えることができます。ライトがついている場合、そのセルは黄色になります。なお、このゲームはスマートフォンでも操作しやすいように設計されていますが、PCのブラウザでも問題なくプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

ご要望のゲームを作成しました。以下のコードを1枚のHTMLファイルにコピーして保存し、ブラウザで開くことでゲームをプレイすることができます。

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .light-on {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <script>
        const mazeSize = 9; // メイズの大きさ(奇数を指定すること)
        const maze = [];
        const playerStartPosition = { x: Math.floor(mazeSize / 2), y: Math.floor(mazeSize / 2) };
        const goalPosition = { x: 0, y: 0 };

let playerPosition = { ...playerStartPosition };
        let isLightOn = false;

function drawMaze() {
            const mazeElement = document.createElement('div');
            mazeElement.style.display = 'grid';
            mazeElement.style.gridTemplateColumns = `repeat(${mazeSize}, 1fr)`;
            mazeElement.style.gap = '2px';

for (let i = 0; i < mazeSize; i++) {
                for (let j = 0; j < mazeSize; j++) {
                    const cellElement = document.createElement('div');
                    cellElement.style.width = '60px';
                    cellElement.style.height = '60px';
                    cellElement.style.border = '1px solid black';
                    cellElement.style.backgroundColor = 'gray';
                    cellElement.dataset.x = j;
                    cellElement.dataset.y = i;

if (maze[i][j].lightOn) {
                        cellElement.classList.add('light-on');
                    }

mazeElement.appendChild(cellElement);
                }
            }

document.body.appendChild(mazeElement);
        }

function updatePlayerPosition() {
            const prevCell = document.querySelector(`[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`);
            prevCell.style.backgroundColor = 'gray';

const currentCell = document.querySelector(`[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`);
            currentCell.style.backgroundColor = 'blue';

currentCell.classList.remove('light-on');
            maze[playerPosition.y][playerPosition.x].lightOn = false;
        }

updatePlayerPosition();

if (playerPosition.x === goalPosition.x && playerPosition.y === goalPosition.y) {
                if (isLightOn) {
                    alert('ゴール！');
                } else {
                    alert('暗いよ！');
                }
            }
        }

function handleClick() {
            const currentCell = document.querySelector(`[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`);

if (!currentCell.classList.contains('light-on')) {
                currentCell.classList.add('light-on');
                maze[playerPosition.y][playerPosition.x].lightOn = true;
                isLightOn = true;
            } else {
                currentCell.classList.remove('light-on');
                maze[playerPosition.y][playerPosition.x].lightOn = false;
                isLightOn = false;
            }
        }

function initialize() {
            generateMaze();
            drawMaze();
            updatePlayerPosition();

const goalCell = document.querySelector(`[data-x='${goalPosition.x}'][data-y='${goalPosition.y}']`);
            goalCell.textContent = '🚩';
            
            document.addEventListener('keydown', handleKeydown);
            document.addEventListener('click', handleClick);
        }

initialize();
    </script>
</body>
</html>
```

このゲームはライトのオン・オフを操作しながら迷路を解いていくものです。ゴールに到達した際、ライトがついていれば「ゴール！」と表示され、ライトが消えていれば「暗いよ！」と表示されます。

上下左右の矢印キーでプレイヤーを移動させることができます。プレイヤーがいるセルの背景色は青色になります。

各セルをクリックすることでライトのオン・オフを切り替えることができます。ライトがついている場合、そのセルは黄色になります。

なお、このゲームはスマートフォンでも操作しやすいように設計されていますが、PCのブラウザでも問題なくプレイすることができます。