Click's game | AI game creator

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

No:15761

129

Click
Developer User6838｜Date and time 23/9/11 10:27:24
Build time 2.269 sec｜Game capacity 0.391KB｜

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

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

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

→ 　

0　

0　

　
　
　
　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>ご要望のゲームを作成しました。以下のコードを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 generateMaze() {
            for (let i = 0; i < mazeSize; i++) {
                const row = [];
                for (let j = 0; j < mazeSize; j++) {
                    row.push({ lightOn: false });
                }
                maze.push(row);
            }
        }

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;
        }

function handleKeydown(event) {
            if (event.key === 'ArrowUp' && playerPosition.y > 0) {
                playerPosition.y--;
            } else if (event.key === 'ArrowDown' && playerPosition.y < mazeSize - 1) {
                playerPosition.y++;
            } else if (event.key === 'ArrowLeft' && playerPosition.x > 0) {
                playerPosition.x--;
            } else if (event.key === 'ArrowRight' && playerPosition.x < mazeSize - 1) {
                playerPosition.x++;
            }

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のブラウザでも問題なくプレイすることができます。