Pac-Man (chess game)'s game

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

No:6083

4273

←

Prev Next

→

Pac-Man (chess game)
Developer もちきなこ｜Date and time 23/7/1 16:24:55
Build time 36.448 sec｜Game capacity 3.667KB｜

Script

了解しました。以下にパックマンのゲームを作成します。

このプログラムでは、HTMLのcanvas要素を使用してパックマンのゲームを作成しています。パックマンはキーボードの矢印キーで操作し、ゴーストを避けながらすべてのパワーピルを取得するゲームです。ゴーストに接触するとゲームオーバーとなり、すべてのパワーピルを取得するとクリアとなります。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下にパックマンのゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pacman</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <canvas id="game"></canvas>

function drawPacman() {
      ctx.fillStyle = 'yellow';
      ctx.beginPath();
      ctx.arc(pacman.x * blockSize, pacman.y * blockSize, blockSize / 2, 0.2 * Math.PI, 1.8 * Math.PI);
      ctx.lineTo(pacman.x * blockSize, pacman.y * blockSize);
      ctx.closePath();
      ctx.fill();
    }

function drawGhost(x, y) {
      ctx.fillStyle = 'red';
      ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
    }

function drawPill(x, y) {
      ctx.fillStyle = 'blue';
      ctx.beginPath();
      ctx.arc(x * blockSize + blockSize / 2, y * blockSize + blockSize / 2, blockSize / 4, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
    }

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

ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

drawPacman();

ghosts.forEach(ghost => {
        drawGhost(ghost.x, ghost.y);
      });

pills.forEach(pill => {
        drawPill(pill.x, pill.y);
      });
    }

function checkCollision() {
      ghosts.forEach(ghost => {
        if (ghost.x === pacman.x && ghost.y === pacman.y) {
          alert('Game Over!');
          window.location.reload();
        }
      });

pills.forEach((pill, index) => {
        if (pill.x === pacman.x && pill.y === pacman.y) {
          pills.splice(index, 1);
        }
      });

if (pills.length === 0) {
        alert('You Win!');
        window.location.reload();
      }
    }

function gameLoop() {
      update();
      checkCollision();
      draw();

requestAnimationFrame(gameLoop);
    }

canvas.width = blockSize * width;
    canvas.height = blockSize * height;

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