AI game creator

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

No:25127

←

Prev Next

→

Pac-Man
Developer User12219｜Date and time 23/11/18 1:50:24
Build time 79.334 sec｜Game capacity 2.875KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.pacman {
      width: 40px;
      height: 40px;
      position: absolute;
      background-image: url('pacman.png');
    }

.food {
      width: 10px;
      height: 10px;
      background-color: yellow;
      border-radius: 50%;
      position: absolute;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div class="pacman" id="pacman"></div>
    <div class="food" id="food1"></div>
    <div class="food" id="food2"></div>
    <div class="food" id="food3"></div>
    
  </div>

let score = 0;

pacman.style.left = '0px';
      pacman.style.top = '0px';

// Check for keyboard arrow key presses
      window.addEventListener('keydown', (event) => {
        const key = event.key;
        let leftPos = parseInt(pacman.style.left);
        let topPos = parseInt(pacman.style.top);

if (key === 'ArrowDown') {
          // Move pacman down by 40 pixels
          pacman.style.top = (topPos + 40) + 'px';
        } else if (key === 'ArrowUp') {
          // Move pacman up by 40 pixels
          pacman.style.top = (topPos - 40) + 'px';
        } else if (key === 'ArrowRight') {
          // Move pacman right by 40 pixels
          pacman.style.left = (leftPos + 40) + 'px';
        } else if (key === 'ArrowLeft') {
          // Move pacman left by 40 pixels
          pacman.style.left = (leftPos - 40) + 'px';
        }

// Check if pacman has collided with any food
        if (checkCollision(pacman, food1)) {
          food1.style.display = 'none'; // Hide the food element
          score += 10; // Increase score by 10
        }
        
        if (checkCollision(pacman, food2)) {
          food2.style.display = 'none';
          score += 10;
        }
        
        if (checkCollision(pacman, food3)) {
          food3.style.display = 'none';
          score += 10;
        }

console.log('Score:', score);
      });

// Function to check collision between two elements
      function checkCollision(element1, element2) {
        const rect1 = element1.getBoundingClientRect();
        const rect2 = element2.getBoundingClientRect();

return !(
          rect1.top > rect2.bottom ||
          rect1.bottom < rect2.top ||
          rect1.right < rect2.left ||
          rect1.left > rect2.right
        );
      }
    });
  </script>
</body>
</html>