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

No:17201

Pac-Man but there's a fire flower for all devices
Developer User7570｜Date and time 23/9/22 10:02:35
Build time 30.293 sec｜Game capacity 3.67KB｜

Script

Sure! Here's an example of a Pac-Man game with a fire flower power-up, implemented as a single HTML file using JavaScript and enclosed in script tags. This game can be played on all devices, including smartphones, and uses pictograms.

Pac-Man with Fire Flower Power-Up

To play the game, simply copy the above code into a new HTML file and open it in a web browser. The game canvas will appear, and you can control Pac-Man's movement using the arrow keys. The objective is to collide with the fire flower power-up to activate it and earn points. The score will be displayed at the top of the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: black;
      text-align: center;
    }

canvas {
      border: 1px solid white;
      background-color: black;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Pac-Man with Fire Flower Power-Up</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
    let pacman = {
      x: 200,
      y: 200,
      radius: 15,
      mouthOpen: true,
      direction: 0, // 0: right, 1: down, 2: left, 3: up
    };

let fireFlower = {
      x: 100,
      y: 100,
      radius: 10,
      active: false,
    };

let score = 0;

// Keyboard input handling
    const KEY_UP = 38;
    const KEY_DOWN = 40;
    const KEY_LEFT = 37;
    const KEY_RIGHT = 39;

const keyState = {};

document.addEventListener("keydown", function (event) {
      keyState[event.keyCode] = true;
    });

document.addEventListener("keyup", function (event) {
      keyState[event.keyCode] = false;
    });

// Game update function
    function update() {
      // Move pacman
      if (keyState[KEY_UP]) {
        pacman.y -= 5;
        pacman.direction = 3;
      }
      if (keyState[KEY_DOWN]) {
        pacman.y += 5;
        pacman.direction = 1;
      }
      if (keyState[KEY_LEFT]) {
        pacman.x -= 5;
        pacman.direction = 2;
      }
      if (keyState[KEY_RIGHT]) {
        pacman.x += 5;
        pacman.direction = 0;
      }

// Check collision with fire flower
      if (collision(pacman, fireFlower)) {
        fireFlower.active = true;
        score += 10;
      }

// Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Pac-Man
      context.beginPath();
      context.arc(pacman.x, pacman.y, pacman.radius, (0.25 - pacman.mouthOpen / 2) * Math.PI, (1.75 + pacman.mouthOpen / 2) * Math.PI);
      context.lineTo(pacman.x, pacman.y);
      context.fillStyle = fireFlower.active ? "orange" : "yellow";
      context.fill();
      context.closePath();

// Draw Fire Flower
      if (!fireFlower.active) {
        context.beginPath();
        context.arc(fireFlower.x, fireFlower.y, fireFlower.radius, 0, 2 * Math.PI);
        context.fillStyle = "red";
        context.fill();
        context.closePath();
      }

// Update mouth state for next frame
      pacman.mouthOpen = !pacman.mouthOpen;

// Update score display
      document.getElementById("score").textContent = "Score: " + score;

// Call update again on next frame
      requestAnimationFrame(update);
    }

// Function to check collision between two circles
    function collision(circle1, circle2) {
      const dx = circle1.x - circle2.x;
      const dy = circle1.y - circle2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);

return distance < circle1.radius + circle2.radius;
      }

// Start game by calling update for the first time
    update();
  </script>
</body>
</html>
```