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

126

←

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>