AI game creator

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

No:27256

←

Prev Next

→

Pac-Man
Developer User13574｜Date and time 23/12/5 21:10:11
Build time 71.062 sec｜Game capacity 1.9KB｜

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</title>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

#gameCanvas {
    background-color: black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

// Define Pac-Man properties
  let pacManX = 200;
  let pacManY = 200;
  let pacManAngle = 0;
  const pacManSpeed = 3;
  const pacManSize = 30;

// Define the game loop function
  function gameLoop() {
    update();
    draw();
  }

// Handling user input and updating Pac-Man's position
  function update() {
    if (keyState.ArrowUp) {
      pacManY -= pacManSpeed;
    }
    if (keyState.ArrowDown) {
      pacManY += pacManSpeed;
    }
    if (keyState.ArrowLeft) {
      pacManX -= pacManSpeed;
      pacManAngle = 180;
    }
    if (keyState.ArrowRight) {
      pacManX += pacManSpeed;
      pacManAngle = 0;
    }
  }

// Drawing Pac-Man on the canvas
  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
    context.beginPath();
    context.arc(pacManX, pacManY, pacManSize, 0.2 * Math.PI + (pacManAngle * Math.PI) / 180, 1.8 * Math.PI + (pacManAngle * Math.PI) / 180);
    context.lineTo(pacManX, pacManY);
    context.closePath();
    context.fillStyle = "yellow";
    context.fill();
    context.stroke();

// Call the game loop recursively
    requestAnimationFrame(gameLoop);
  }

// Keyboard input handling
  const keyState = {};
  window.addEventListener("keydown", function (e) {
    keyState[e.key] = true;
  });

window.addEventListener("keyup", function (e) {
    keyState[e.key] = false;
  });

// Start the game loop
  gameLoop();
</script>
</body>
</html>