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:49287

←

Prev Next

→

Maze runner .game canvas 320 by 320 32 sectors 16 ..ALL
Developer User18896｜Date and time 24/3/4 9:26:41
Build time 12.476 sec｜Game capacity 2.9KB｜

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: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="320"></canvas>

const sectorSize = 20;
        const gridSize = 16;
        const mazeColor = "blue";

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

let finishLine = {
            x: gridSize - 1,
            y: gridSize - 1
        };

let moves = 0;
        let startTime;

function drawMaze() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw maze walls
            ctx.fillStyle = mazeColor;
            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    if (Math.random() < 0.5) {
                        ctx.fillRect(x * sectorSize, y * sectorSize, sectorSize, sectorSize);
                    }
                }
            }

// Draw player
            ctx.fillStyle = "red";
            ctx.fillRect(player.x * sectorSize, player.y * sectorSize, sectorSize, sectorSize);

// Draw finish line
            ctx.fillStyle = "green";
            ctx.fillRect(finishLine.x * sectorSize, finishLine.y * sectorSize, sectorSize, sectorSize);
        }

function movePlayer(dx, dy) {
            if (player.x + dx >= 0 && player.x + dx < gridSize && player.y + dy >= 0 && player.y + dy < gridSize) {
                player.x += dx;
                player.y += dy;
                moves++;

if (player.x === finishLine.x && player.y === finishLine.y) {
                    const endTime = new Date();
                    const timeTaken = (endTime - startTime) / 1000;
                    alert(`Congratulations! You finished the maze in ${moves} moves and ${timeTaken} seconds.`);
                    moves = 0;
                    startTime = new Date();
                    player.x = 0;
                    player.y = 0;
                    drawMaze();
                }
            }

drawMaze();
        }

function handleKeyPress(event) {
            switch(event.key) {
                case "ArrowUp":
                    movePlayer(0, -1);
                    break;
                case "ArrowDown":
                    movePlayer(0, 1);
                    break;
                case "ArrowLeft":
                    movePlayer(-1, 0);
                    break;
                case "ArrowRight":
                    movePlayer(1, 0);
                    break;
            }
        }

document.addEventListener("keydown", handleKeyPress);

startTime = new Date();
        drawMaze();
    </script>
</body>
</html>