AI game creator

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

No:8963

←

Prev Next

→

Pac-Man
Developer User4274｜Date and time 23/7/19 23:33:05
Build time 32.343 sec｜Game capacity 3.494KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Create the Pac-Man character
        var pacMan = {
          x: canvas.width / 2,
          y: canvas.height / 2,
          radius: 20,
          speed: 5,
          direction: 0, // 0: up, 1: right, 2: down, 3: left
          mouthOpen: true,
          color: "#FFD700",
          draw: function () {
            context.beginPath();
            context.arc(this.x, this.y, this.radius, 0.2 * Math.PI, 1.8 * Math.PI);
            context.lineTo(this.x, this.y);
            context.closePath();
            context.fillStyle = this.color;
            context.fill();
          },
          move: function () {
            // Move Pac-Man based on its direction
            switch (this.direction) {
              case 0:
                this.y -= this.speed;
                break;
              case 1:
                this.x += this.speed;
                break;
              case 2:
                this.y += this.speed;
                break;
              case 3:
                this.x -= this.speed;
                break;
              default:
                break;
            }

// Wrap Pac-Man around the screen edges
            if (this.x > canvas.width) this.x = 0;
            else if (this.x < 0) this.x = canvas.width;
            if (this.y > canvas.height) this.y = 0;
            else if (this.y < 0) this.y = canvas.height;
          },
        };

// Function to handle key presses
        function handleKeyPress(event) {
          // Change Pac-Man's direction based on the arrow key pressed
          switch (event.keyCode) {
            case 38:
              pacMan.direction = 0; // up
              break;
            case 39:
              pacMan.direction = 1; // right
              break;
            case 40:
              pacMan.direction = 2; // down
              break;
            case 37:
              pacMan.direction = 3; // left
              break;
            default:
              break;
          }
        }

// Function to update the game state
        function update() {
          // Clear the canvas
          context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
          pacMan.draw();

// Move Pac-Man
          pacMan.move();

// Toggle Pac-Man's mouth open/closed
          pacMan.mouthOpen = !pacMan.mouthOpen;

// Set the color of Pac-Man's mouth
          var mouthColor = pacMan.mouthOpen ? "#000" : pacMan.color;

// Draw Pac-Man's mouth
          context.beginPath();
          context.arc(pacMan.x, pacMan.y, pacMan.radius, 0.2 * Math.PI, 1.8 * Math.PI);
          context.lineTo(pacMan.x, pacMan.y);
          context.closePath();
          context.fillStyle = mouthColor;
          context.fill();
        }

// Start the game loop
        setInterval(update, 10);

// Handle key presses
        window.addEventListener("keydown", handleKeyPress);
      };
    </script>
  </body>
</html>