Pac-man With ghosts And a Mario invisibility star's game

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

No:17308

←

Prev Next

→

Pac-man With ghosts And a Mario invisibility star
Developer User7638｜Date and time 23/9/23 4:04:49
Build time 44.404 sec｜Game capacity 4.177KB｜

Script

Sure! Here's an example of a Pac-Man game implemented as a single HTML file, including JavaScript code and using pictograms. It also includes Mario's invisibility star that makes Pac-Man invincible for a limited time. You can play the game by opening the HTML file in a web browser.

In this example, there are Pac-Man, four ghosts, and a Mario invisibility star displayed on a game board. You can control Pac-Man's movement using the arrow keys on your smartphone. The ghosts move randomly, and the invisibility star's position changes every 10 seconds. If Pac-Man collects the star, it becomes invincible for 5 seconds.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    /* Set game board dimensions and background */
    #board {
      width: 500px;
      height: 500px;
      background-color: black;
      position: relative;
    }

/* Define game object styles */
    .pacman {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background: url('pacman.png') center no-repeat;
      background-size: contain;
    }

.ghost {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background: url('ghost.png') center no-repeat;
      background-size: contain;
    }

.star {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background: url('star.png') center no-repeat;
      background-size: contain;
    }
  </style>
</head>
<body>
  <div id="board">
    <div class="pacman"></div>
    <div class="ghost" id="ghost1"></div>
    <div class="ghost" id="ghost2"></div>
    <div class="ghost" id="ghost3"></div>
    <div class="ghost" id="ghost4"></div>
    <div class="star"></div>
  </div>
  <script>
    // Wait for the DOM to load
    document.addEventListener("DOMContentLoaded", function() {
      // Get game objects
      var pacman = document.querySelector('.pacman');
      var ghosts = document.querySelectorAll('.ghost');
      var star = document.querySelector('.star');

// Set initial positions
      var pacmanX = 0;
      var pacmanY = 0;
      var speed = 20;

var ghostX = 0;
      var ghostY = 0;
      var ghostSpeed = 10;

var starX = 0;
      var starY = 0;

// Handle key events to move Pac-Man
      document.addEventListener('keydown', function(e) {
        switch(e.key) {
          case 'ArrowUp':
            pacmanY -= speed;
            break;
          case 'ArrowDown':
            pacmanY += speed;
            break;
          case 'ArrowLeft':
            pacmanX -= speed;
            break;
          case 'ArrowRight':
            pacmanX += speed;
            break;
        }

// Update Pac-Man's position
        pacman.style.top = pacmanY + 'px';
        pacman.style.left = pacmanX + 'px';
      });

// Move ghosts randomly
      setInterval(function() {
        ghosts.forEach(function(ghost) {
          var direction = Math.floor(Math.random() * 4);
          switch(direction) {
            case 0:
              ghostY -= ghostSpeed;
              break;
            case 1:
              ghostY += ghostSpeed;
              break;
            case 2:
              ghostX -= ghostSpeed;
              break;
            case 3:
              ghostX += ghostSpeed;
              break;
          }

// Update ghost's position
          ghost.style.top = ghostY + 'px';
          ghost.style.left = ghostX + 'px';
        });
      }, 1000);

// Make Pac-Man invincible with Mario's invisibility star
      setInterval(function() {
        // Update star's position randomly
        starX = Math.floor(Math.random() * 500);
        starY = Math.floor(Math.random() * 500);
        star.style.top = starY + 'px';
        star.style.left = starX + 'px';

// Check if Pac-Man collides with the star
        if (pacmanX === starX && pacmanY === starY) {
          // Pac-Man is invincible for 5 seconds
          setTimeout(function() {
            alert('Pac-Man is no longer invincible!');
          }, 5000);
        }
      }, 10000);
    });
  </script>
</body>
</html>
```