AI game creator

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

No:42440

←

Prev Next

→

Maze game
Developer User18880｜Date and time 24/2/11 18:35:35
Build time 8.984 sec｜Game capacity 3.194KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    <style>
        #maze {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 2px;
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }
        .cell {
            background-color: #dddddd;
            border: 1px solid #000000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #player {
            background-color: #ff0000;
        }
        #exit {
            background-color: #00ff00;
        }
    </style>
</head>
<body>
    <div id="maze"></div>

const mazeDiv = document.getElementById("maze");
        let playerPosition = { x: 0, y: 0 };

function initializeGame() {
            mazeDiv.innerHTML = "";

for (let i = 0; i < maze.length; i++) {
                for (let j = 0; j < maze[i].length; j++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");

if (maze[i][j] === "S") {
                        cell.id = "player";
                        playerPosition.x = j;
                        playerPosition.y = i;
                    } else if (maze[i][j] === "E") {
                        cell.id = "exit";
                    }

mazeDiv.appendChild(cell);
                }
            }

document.addEventListener("keydown", movePlayer);
        }

function movePlayer(event) {
            let newPositionX = playerPosition.x;
            let newPositionY = playerPosition.y;

if (event.key === "ArrowUp" && playerPosition.y > 0) {
                newPositionY--;
            } else if (event.key === "ArrowDown" && playerPosition.y < maze.length - 1) {
                newPositionY++;
            } else if (event.key === "ArrowLeft" && playerPosition.x > 0) {
                newPositionX--;
            } else if (event.key === "ArrowRight" && playerPosition.x < maze[playerPosition.y].length - 1) {
                newPositionX++;
            }

if (maze[newPositionY][newPositionX] !== "*") {
                const currentPlayerCell = document.getElementById("player");
                currentPlayerCell.removeAttribute("id");

playerPosition.x = newPositionX;
                playerPosition.y = newPositionY;

const newPlayerCell = mazeDiv.childNodes[newPositionY * maze[playerPosition.y].length + newPositionX];
                newPlayerCell.id = "player";

if (maze[newPositionY][newPositionX] === "E") {
                    document.removeEventListener("keydown", movePlayer);
                    alert("Congratulations! You reached the exit.");
                }
            }

}

initializeGame();
    </script>
</body>
</html>