AI game creator

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

No:34429

←

Prev Next

→

Pac-Man
Developer User16242｜Date and time 24/1/10 11:22:45
Build time 11.239 sec｜Game capacity 2.506KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script>
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

const gridSize = 20;
    canvas.width = gridSize * 20;
    canvas.height = gridSize * 20;

const pacMan = {
      x: 10,
      y: 10,
      radius: 10,
      mouth: {
        open: 0,
        direction: 1 // 1 for opening, -1 for closing
      }
    };

const direction = {
      left: 0,
      up: 1,
      right: 2,
      down: 3
    };

let pacManDirection = direction.right;

function drawPacMan() {
      ctx.beginPath();
      ctx.arc(pacMan.x * gridSize, pacMan.y * gridSize, pacMan.radius, 0.1 * Math.PI * pacMan.mouth.open, 1.9 * Math.PI * pacMan.mouth.open);
      ctx.lineTo(pacMan.x * gridSize, pacMan.y * gridSize);
      ctx.closePath();
      ctx.fillStyle = "yellow";
      ctx.fill();
    }

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

function update() {
      pacMan.mouth.open += pacMan.mouth.direction * 0.2;
      if (pacMan.mouth.open > 0.8 || pacMan.mouth.open < 0.2) {
        pacMan.mouth.direction *= -1;
      }

switch (pacManDirection) {
        case direction.left:
          pacMan.x -= 1;
          break;
        case direction.up:
          pacMan.y -= 1;
          break;
        case direction.right:
          pacMan.x += 1;
          break;
        case direction.down:
          pacMan.y += 1;
          break;
      }

if (pacMan.x < 0) {
        pacMan.x = 0;
      } else if (pacMan.x > gridSize - 1) {
        pacMan.x = gridSize - 1;
      }

if (pacMan.y < 0) {
        pacMan.y = 0;
      } else if (pacMan.y > gridSize - 1) {
        pacMan.y = gridSize - 1;
      }
    }

function handleKeyPress(event) {
      switch (event.key) {
        case "ArrowLeft":
          pacManDirection = direction.left;
          break;
        case "ArrowUp":
          pacManDirection = direction.up;
          break;
        case "ArrowRight":
          pacManDirection = direction.right;
          break;
        case "ArrowDown":
          pacManDirection = direction.down;
          break;
      }
    }

document.addEventListener("keydown", handleKeyPress);

function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }

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