Pacman With ghost And a Mario Invincibility star's game

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

No:17309

←

Prev Next

→

Pacman With ghost And a Mario Invincibility star
Developer User7638｜Date and time 23/9/23 4:06:02
Build time 40.519 sec｜Game capacity 3.848KB｜

Script

Sure! Here's a simple implementation of the Pacman game with ghosts and an invincibility star using JavaScript and pictograms. Remember to save the code in a single HTML file and enclose it in script tags for proper execution.

This implementation sets up the game environment with Pacman, a ghost, and an invincibility star. Pacman is controlled using the arrow keys, and the ghost moves randomly. The game loop checks for collisions between Pacman and the ghost or the invincibility star. If Pacman collides with the ghost, the game ends, and if Pacman catches the invincibility star, a victory message is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pacman Game</title>
  <style>
    /* CSS styling for game elements */
    body {
      margin: 0;
      padding: 0;
    }
    #game {
      background-color: #000;
      width: 800px;
      height: 600px;
      margin: 20px auto;
      position: relative;
    }
    .pacman, .ghost, .star {
      position: absolute;
      width: 40px;
      height: 40px;
    }
    .pacman {
      background-image: url('https://image.flaticon.com/icons/svg/187/187698.svg');
      background-size: cover;
    }
    .ghost {
      background-image: url('https://image.flaticon.com/icons/svg/187/187708.svg');
      background-size: cover;
    }
    .star {
      background-image: url('https://image.flaticon.com/icons/svg/187/187710.svg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// Create Pacman
    var pacman = document.createElement('div');
    pacman.className = 'pacman';
    game.appendChild(pacman);

// Create Ghost
    var ghost = document.createElement('div');
    ghost.className = 'ghost';
    game.appendChild(ghost);

// Create Invincibility Star
    var star = document.createElement('div');
    star.className = 'star';
    game.appendChild(star);

// Set initial positions
    var pacmanX = 60;
    var pacmanY = 60;
    var ghostX = 400;
    var ghostY = 300;
    var starX = 700;
    var starY = 500;

// Update positions based on keyboard events
    document.addEventListener('keydown', function(event) {
      switch (event.keyCode) {
        case 37: // Left Arrow
          pacmanX -= 20;
          break;
        case 38: // Up Arrow
          pacmanY -= 20;
          break;
        case 39: // Right Arrow
          pacmanX += 20;
          break;
        case 40: // Down Arrow
          pacmanY += 20;
          break;
      }
      pacman.style.left = pacmanX + 'px';
      pacman.style.top = pacmanY + 'px';
      event.preventDefault(); // Prevent scrolling with arrow keys
    });

// Game loop
    setInterval(function() {
      // Move Ghost randomly
      var direction = Math.floor(Math.random() * 4);
      switch (direction) {
        case 0:
          ghostX -= 20;
          break;
        case 1:
          ghostY -= 20;
          break;
        case 2:
          ghostX += 20;
          break;
        case 3:
          ghostY += 20;
          break;
      }
      ghost.style.left = ghostX + 'px';
      ghost.style.top = ghostY + 'px';

// Check collision
      if (checkCollision(pacmanX, pacmanY, ghostX, ghostY)) {
        alert('Game Over! Ghost caught Pacman!');
      }

// Check if Pacman caught the Invincibility Star
      if (checkCollision(pacmanX, pacmanY, starX, starY)) {
        alert('Congratulations! Pacman caught the Invincibility Star!');
      }
    }, 1000);

// Function to check collision between two objects
    function checkCollision(x1, y1, x2, y2) {
      var deltaX = Math.abs(x1 - x2);
      var deltaY = Math.abs(y1 - y2);
      return deltaX < 40 && deltaY < 40; // Assuming object size is 40x40
    }
  </script>
</body>
</html>
```