Create a purple maze runner with pacman style's game

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

No:48485

←

Prev Next

→

Create a purple maze runner with pacman style
Developer User20713｜Date and time 24/3/2 9:37:35
Build time 13.912 sec｜Game capacity 2.75KB｜

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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Purple Maze Runner</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: black;
  }

canvas {
    border: 2px solid purple;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

const cellSize = 20;
  const rows = 20;
  const cols = 20;

let player = {
    x: 1,
    y: 1,
    direction: 'right'
  };

let maze = [
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,1],
    [1,0,1,1,1,0,1,0,1,1,1,1,0,1,0,1,1,1,0,1],
    [1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1,0,1],
    [1,0,1,1,1,0,1,1,1,1,1,1,0,1,1,1,0,1,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  ];

function drawPlayer() {
    ctx.fillStyle = 'yellow';
    ctx.fillRect(player.x * cellSize, player.y * cellSize, cellSize, cellSize);
  }

function keyDownHandler(event) {
    switch(event.key) {
      case 'ArrowUp':
        player.direction = 'up';
        break;
      case 'ArrowDown':
        player.direction = 'down';
        break;
      case 'ArrowLeft':
        player.direction = 'left';
        break;
      case 'ArrowRight':
        player.direction = 'right';
        break;
    }
  }

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

drawMaze();
    drawPlayer();
    movePlayer();

if (player.x === cols - 2 && player.y === rows - 2) {
      alert('You won!');
    }

requestAnimationFrame(gameLoop);
  }

document.addEventListener('keydown', keyDownHandler);

gameLoop();
</script>
</body>
</html>
```