Mazerunner on a canvas 320x320's game

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

No:48481

←

Prev Next

→

Mazerunner on a canvas 320x320
Developer User20713｜Date and time 24/3/2 9:34:36
Build time 12.024 sec｜Game capacity 2.4KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maze Runner Game</title>
<style>
    canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="320"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const player = {
        x: 10,
        y: 10,
        size: 10,
        color: 'red'
    }
    
    const maze = [
        [1, 1, 1, 1, 1],
        [1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1],
        [1, 1, 1, 1, 1]
    ];
    
    function drawMaze() {
        for (let i = 0; i < maze.length; i++) {
            for (let j = 0; j < maze[i].length; j++) {
                if (maze[i][j] === 1) {
                    ctx.fillStyle = 'black';
                } else {
                    ctx.fillStyle = 'white';
                }
                ctx.fillRect(j * 64, i * 64, 64, 64);
            }
        }
    }
    
    function drawPlayer() {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.size, player.size);
    }
    
    function movePlayer(event) {
        switch(event.key) {
            case 'ArrowUp':
                if (maze[(player.y - 1) / 64][(player.x) / 64] === 0) {
                    player.y -= 64;
                }
                break;
            case 'ArrowDown':
                if (maze[(player.y + 1) / 64][(player.x) / 64] === 0) {
                    player.y += 64;
                }
                break;
            case 'ArrowLeft':
                if (maze[(player.y) / 64][(player.x - 1) / 64] === 0) {
                    player.x -= 64;
                }
                break;
            case 'ArrowRight':
                if (maze[(player.y) / 64][(player.x + 1) / 64] === 0) {
                    player.x += 64;
                }
                break;
        }
        
        if (player.x === 256 && player.y === 192) {
            alert("You won!");
        }
    }
    
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawMaze();
        drawPlayer();
    }
    
    document.addEventListener('keydown', movePlayer);
    setInterval(gameLoop, 1000/30);
</script>
</body>
</html>
```