Maze, left down up right player control, obstacles, items to collect, center of maze progresses player to next level's game

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

No:50591

101

←

Prev Next

→

Maze, left down up right player control, obstacles..ALL
Developer User21362｜Date and time 24/3/9 6:46:04
Build time 13.898 sec｜Game capacity 4.261KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
    <head>
        <title>Maze Game</title>
    </head>
    <body>
        <canvas id="mazeCanvas" width="4000" height="4000"></canvas>
        
        <script>
            const canvas = document.getElementById("mazeCanvas");
            const ctx = canvas.getContext("2d");
            
            let playerX = 10;
            let playerY = 10;
            const playerSize = 10;
            const mazeWidth = 40;
            const mazeHeight = 40;
            
            let level = 1;
            
            const maze = [
                [0,0,0,1,0,0,0,0,0,1],
                [1,0,0,1,0,1,1,1,0,1],
                [1,1,0,0,0,1,0,0,0,0],
                [0,0,1,1,0,1,0,1,1,0],
                [1,0,0,0,0,0,0,1,0,1],
                [1,0,1,1,1,1,0,1,0,0],
                [0,0,0,0,0,1,0,1,0,1],
                [1,1,1,1,0,1,0,1,0,1],
                [1,0,0,0,0,1,0,1,0,1],
                [1,1,1,1,1,1,0,1,0,0]
            ];
            
            const drawMaze = () => {
                for(let row=0; row<mazeHeight; row++) {
                    for(let col=0; col<mazeWidth; col++) {
                        if(maze[row][col] === 1) {
                            ctx.fillStyle = "black";
                        } else {
                            ctx.fillStyle = "white";
                        }
                        ctx.fillRect(col * 10, row * 10, 10, 10);
                    }
                }
            }
            
            const drawPlayer = () => {
                ctx.fillStyle = "red";
                ctx.fillRect(playerX, playerY, playerSize, playerSize);
            }
            
            const checkCollision = (x, y) => {
                if(x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
                    return true;
                }
                
                const row = Math.floor(y / 10);
                const col = Math.floor(x / 10);
                
                if(maze[row][col] === 1) {
                    return true;
                }
                
                return false;
            }
            
            const movePlayer = (direction) => {
                let newX = playerX;
                let newY = playerY;
                
                if(direction === "left") {
                    newX -= playerSize;
                }
                if(direction === "up") {
                    newY -= playerSize;
                }
                if(direction === "right") {
                    newX += playerSize;
                }
                if(direction === "down") {
                    newY += playerSize;
                }
                
                if(!checkCollision(newX, newY)) {
                    playerX = newX;
                    playerY = newY;
                }
                
                if(playerX === 390 && playerY === 390) {
                    level++;
                    if(level === 6) {
                        alert("Congratulations! You completed all levels!");
                    } else {
                        alert("Level " + level);
                        playerX = 10;
                        playerY = 10;
                    }
                }
            }
            
            document.addEventListener('keydown', (event) => {
                if (event.key === 'ArrowLeft') {
                    movePlayer("left");
                }
                if (event.key === 'ArrowUp') {
                    movePlayer("up");
                }
                if (event.key === 'ArrowRight') {
                    movePlayer("right");
                }
                if (event.key === 'ArrowDown') {
                    movePlayer("down");
                }
            });
            
            const gameLoop = () => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                drawMaze();
                drawPlayer();
                
                requestAnimationFrame(gameLoop);
            }
            
            alert("Level " + level);
            gameLoop();
        </script>
    </body>
</html>