Pac-Man with letters's game

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

No:51424

101

←

Prev Next

→

Pac-Man with letters
Developer User21066｜Date and time 24/3/12 2:21:44
Build time 11.678 sec｜Game capacity 2.83KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man with Letters</title>
    <style>
      body {
        text-align: center;
        font-size: 36px;
        margin-top: 20vh;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

let pacman = {
        x: 50,
        y: 50,
        radius: 20,
        speed: 3,
        dx: -1,
        dy: 0,
      };

const letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];

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

function movePacman() {
        pacman.x += pacman.speed * pacman.dx;
        pacman.y += pacman.speed * pacman.dy;

if (pacman.x + pacman.radius > canvas.width) {
          pacman.x = canvas.width - pacman.radius;
        }

if (pacman.x - pacman.radius < 0) {
          pacman.x = pacman.radius;
        }

if (pacman.y + pacman.radius > canvas.height) {
          pacman.y = canvas.height - pacman.radius;
        }

if (pacman.y - pacman.radius < 0) {
          pacman.y = pacman.radius;
        }
      }

function drawLetter(letter, x, y) {
        ctx.fillStyle = "white";
        ctx.fillText(letter, x, y);
      }

function drawLetters() {
        letters.forEach((letter, index) => {
          drawLetter(letter, 100 + index * 50, 100);
        });
      }

function checkCollision() {
        letters.forEach((letter, index) => {
          if (
            Math.abs(pacman.x - (100 + index * 50)) < pacman.radius &&
            Math.abs(pacman.y - 100) < pacman.radius
          ) {
            letters.splice(index, 1);
          }
        });

if (letters.length === 0) {
          alert("You win!");
          clearInterval(gameLoop);
        }
      }

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

drawPacman();
        drawLetters();
        movePacman();
        checkCollision();
      }

let gameLoop = setInterval(updateGameArea, 1000 / 60);
    </script>
  </body>
</html>