Maze runner .game canvas 320 by 320 32 sectors 16 sectors color blue randomly placed to make a maze .maze needs player start position and a finish line randomly played each level.score by how many moves it takes and the time's game

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

No:49286

←

Prev Next

→

Maze runner .game canvas 320 by 320 32 sectors 16 ..ALL
Developer User18896｜Date and time 24/3/4 9:21:29
Build time 8.647 sec｜Game capacity 3.32KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Maze Runner Game</title>
    <style>
        canvas {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas id="mazeCanvas" width="320" height="320"></canvas>
    <script>
        const canvas = document.getElementById('mazeCanvas');
        const ctx = canvas.getContext('2d');
        const mazeSize = 320;
        const sectors = 32;
        const sectorSize = mazeSize / sectors;

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

let finishPosition = {
            x: Math.floor(Math.random() * sectors),
            y: Math.floor(Math.random() * sectors)
        };

let moves = 0;
        let startTime;

function drawPlayer() {
            ctx.fillStyle = 'red';
            ctx.fillRect(playerPosition.x * sectorSize, playerPosition.y * sectorSize, sectorSize, sectorSize);
        }

function drawFinish() {
            ctx.fillStyle = 'green';
            ctx.fillRect(finishPosition.x * sectorSize, finishPosition.y * sectorSize, sectorSize, sectorSize);
        }

function drawGame() {
            ctx.clearRect(0, 0, mazeSize, mazeSize);
            drawMaze();
            drawPlayer();
            drawFinish();
        }

document.addEventListener('keydown', (e) => {
            switch (e.keyCode) {
                case 37: //left
                    movePlayer(playerPosition.x - 1, playerPosition.y);
                    break;
                case 38: //up
                    movePlayer(playerPosition.x, playerPosition.y - 1);
                    break;
                case 39: //right
                    movePlayer(playerPosition.x + 1, playerPosition.y);
                    break;
                case 40: //down
                    movePlayer(playerPosition.x, playerPosition.y + 1);
                    break;
            }
        });

startTime = Date.now();
        drawGame();
    </script>
</body>
</html>