AI game creator

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

No:20306

←

Prev Next

→

Maze game
Developer User7287｜Date and time 23/10/9 4:48:25
Build time 18.429 sec｜Game capacity 3.199KB｜

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 {
            height: 400px;
            width: 400px;
            display: grid;
            margin: 0 auto;
            border: 1px solid black;
        }

.cell {
            height: 20px;
            width: 20px;
            background-color: white;
        }

.player {
            height: 20px;
            width: 20px;
            background-color: blue;
        }

.end-point {
            height: 20px;
            width: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
<script>
    var maze = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 1, 1, 1, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
        [1, 1, 1, 1, 1, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 1, 0, 1],
        [1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
        [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ];

var playerX = 1;
    var playerY = 1;

var endPointX = 8;
    var endPointY = 8;

document.addEventListener("DOMContentLoaded", createMaze);

function createMaze() {
        var mazeContainer = document.createElement("div");
        mazeContainer.id = "maze";
        document.body.appendChild(mazeContainer);

for (var y = 0; y < maze.length; y++) {
            for (var x = 0; x < maze[y].length; x++) {
                var cell = document.createElement("div");
                cell.className = "cell";

if (x === playerX && y === playerY) {
                    cell.className = "cell player";
                } else if (x === endPointX && y === endPointY) {
                    cell.className = "cell end-point";
                }

mazeContainer.appendChild(cell);
            }
        }

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

function movePlayer(event) {
        var keyPressed = event.keyCode;
        var oldX = playerX;
        var oldY = playerY;

// 37: left arrow key
        if (keyPressed === 37 && maze[playerY][playerX - 1] !== 1) {
            playerX--;
        }
        // 38: up arrow key
        else if (keyPressed === 38 && maze[playerY - 1][playerX] !== 1) {
            playerY--;
        }
        // 39: right arrow key
        else if (keyPressed === 39 && maze[playerY][playerX + 1] !== 1) {
            playerX++;
        }
        // 40: down arrow key
        else if (keyPressed === 40 && maze[playerY + 1][playerX] !== 1) {
            playerY++;
        }

if (playerX === endPointX && playerY === endPointY) {
            alert("¡Felicidades! Has completado el laberinto.");
        }

if (playerX !== oldX || playerY !== oldY) {
            updateMaze(oldX, oldY);
        }
    }

function updateMaze(oldX, oldY) {
        var mazeContainer = document.getElementById("maze");
        var cells = mazeContainer.getElementsByClassName("cell");

cells[oldY * 10 + oldX].className = "cell";
        cells[playerY * 10 + playerX].className = "cell player";
    }
</script>
</body>
</html>