Make a maze game that’s very hard as in very big, but still beatable's game

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

No:49440

←

Prev Next

→

Make a maze game that’s very hard as in very big, ..ALL
Developer User21041｜Date and time 24/3/5 3:03:22
Build time 11.447 sec｜Game capacity 2.237KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hard Maze Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    #maze {
        width: 70vw;
        height: 70vh;
        border: 2px solid black;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
    .cell {
        border: 2px solid white;
        background-color: white;
    }
    #player {
        background-color: yellow;
    }
</style>
</head>
<body>
<div id="maze"></div>

function createMaze() {
        const maze = document.getElementById('maze');
        
        for (let i = 0; i < mazeSize * mazeSize; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');

maze.appendChild(cell);
        }
    }

function movePlayer(event) {
        switch (event.key) {
            case 'ArrowUp':
                if (playerPos.y > 0) playerPos.y--;
                break;
            case 'ArrowDown':
                if (playerPos.y < mazeSize - 1) playerPos.y++;
                break;
            case 'ArrowLeft':
                if (playerPos.x > 0) playerPos.x--;
                break;
            case 'ArrowRight':
                if (playerPos.x < mazeSize - 1) playerPos.x++;
                break;
        }

updatePlayerPosition();
    }

function updatePlayerPosition() {
        const cells = document.getElementsByClassName('cell');
        
        for (let i = 0; i < cells.length; i++) {
            cells[i].style.backgroundColor = 'white';
        }

const playerCell = playerPos.y * mazeSize + playerPos.x;
        cells[playerCell].style.backgroundColor = 'yellow';
        
        if (playerPos.x === mazeSize - 1 && playerPos.y === mazeSize - 1) {
            alert('You win!');
        }
    }

createMaze();
    updatePlayerPosition();
    document.addEventListener('keydown', movePlayer);
</script>
</body>
</html>