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

No:48186

101

Maze runner
Developer User20713｜Date and time 24/3/1 17:44:39
Build time 16.112 sec｜Game capacity 2.858KB｜

Maze Runner

→ 　

1　

1　

　
　
　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Maze Runner</title>
    <style>
        body {
            text-align: center;
        }
        #maze {
            display: grid;
            grid-template-columns: repeat(5, 50px);
            grid-gap: 0;
            margin: 20px auto;
        }
        .cell {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: white;
        }
        #player {
            background-color: blue;
        }
        #finish {
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>Maze Runner</h1>
    <div id="maze"></div>

<script>
        const maze = [
            [1, 0, 0, 1, 0],
            [1, 0, 1, 1, 0],
            [1, 1, 1, 0, 0],
            [0, 0, 1, 0, 1],
            [0, 1, 1, 1, 1]
        ];

let playerPosition = { x: 0, y: 0 };

document.addEventListener('keydown', function (event) {
            const key = event.key;
            if (key === 'ArrowUp') {
                if (playerPosition.y > 0 && maze[playerPosition.y - 1][playerPosition.x] !== 0) {
                    playerPosition.y--;
                }
            } else if (key === 'ArrowDown') {
                if (playerPosition.y < maze.length - 1 && maze[playerPosition.y + 1][playerPosition.x] !== 0) {
                    playerPosition.y++;
                }
            } else if (key === 'ArrowLeft') {
                if (playerPosition.x > 0 && maze[playerPosition.y][playerPosition.x - 1] !== 0) {
                    playerPosition.x--;
                }
            } else if (key === 'ArrowRight') {
                if (playerPosition.x < maze[0].length - 1 && maze[playerPosition.y][playerPosition.x + 1] !== 0) {
                    playerPosition.x++;
                }
            }

if (playerPosition.x === maze[0].length - 1 && playerPosition.y === maze.length - 1) {
                alert('Congratulations! You finished the maze.');
            }

renderMaze();
        });

function renderMaze() {
            const mazeElement = document.getElementById('maze');
            mazeElement.innerHTML = '';
            for (let y = 0; y < maze.length; y++) {
                for (let x = 0; x < maze[y].length; x++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (y === playerPosition.y && x === playerPosition.x) {
                        cell.setAttribute('id', 'player');
                    } else if (y === maze.length - 1 && x === maze[0].length - 1) {
                        cell.setAttribute('id', 'finish');
                    }
                    mazeElement.appendChild(cell);
                }
            }
        }

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