AI game creator

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

No:19526

←

Prev Next

→

Pacman
Developer User8620｜Date and time 23/10/4 17:03:46
Build time 25.824 sec｜Game capacity 3.029KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pacman</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

const pacman = {
      x: 0,
      y: 0,
      direction: null
    };

const gameMap = [
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 1, 1, 1, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 1, 1, 0, 1, 0, 1],
      [1, 0, 1, 0, 1, 1, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 0, 0, 1, 1, 0, 0, 0, 1],
      [1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ];

const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

function drawMap() {
      for (let row = 0; row < gridHeight; row++) {
        for (let col = 0; col < gridWidth; col++) {
          const tile = gameMap[row][col];

if (tile === 1) {
            ctx.fillStyle = "blue";
            ctx.fillRect(col * tileSize, row * tileSize, tileSize, tileSize);
          }
        }
      }
    }

function drawPacman() {
      ctx.fillStyle = "yellow";
      ctx.beginPath();
      ctx.arc(
        pacman.x * tileSize + tileSize / 2,
        pacman.y * tileSize + tileSize / 2,
        tileSize / 2,
        0.25 * Math.PI,
        1.75 * Math.PI
      );
      ctx.lineTo(
        pacman.x * tileSize + tileSize / 2,
        pacman.y * tileSize + tileSize / 2
      );
      ctx.closePath();
      ctx.fill();
    }

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

function gameLoop() {
      clearCanvas();
      drawMap();
      movePacman();
      drawPacman();
    }

document.addEventListener("keydown", handleKeyDown);
    setInterval(gameLoop, 1000 / 60); // Start the game loop at 60 FPS
  </script>
</body>
</html>