AI game creator

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

No:35577

←

Prev Next

→

Pac-Man
Developer User16594｜Date and time 24/1/14 23:20:06
Build time 13.323 sec｜Game capacity 3.017KB｜

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 Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
      margin: 0 auto;
    }
    
    .pacman {
      width: 50px;
      height: 50px;
      background-image: url("pacman.png");
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    
    .ghost {
      width: 50px;
      height: 50px;
      background-image: url("ghost.png");
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    
    .food {
      width: 10px;
      height: 10px;
      background-color: yellow;
      position: absolute;
      border-radius: 50%;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="pacman" class="pacman"></div>
    <div id="ghost" class="ghost"></div>
    <div class="food" style="top: 50px; left: 80px"></div>
    <div class="food" style="top: 120px; left: 200px"></div>
    <div class="food" style="top: 200px; left: 150px"></div>
    <div class="food" style="top: 300px; left: 250px"></div>
  </div>
  
  <script>
    // Game variables
    let pacman = document.getElementById("pacman");
    let ghost = document.getElementById("ghost");
    let foods = document.getElementsByClassName("food");
    let currentScore = 0;
    
    // Listen for arrow key presses
    document.addEventListener("keydown", function(event) {
      movePacman(event.key);
    });
    
    // Move Pac-Man based on arrow key pressed
    function movePacman(direction) {
      let pacmanTop = parseInt(pacman.style.top) || 0;
      let pacmanLeft = parseInt(pacman.style.left) || 0;
      
      switch(direction) {
        case "ArrowUp":
          pacman.style.transform = "rotate(-90deg)";
          pacmanTop -= 10;
          break;
        case "ArrowDown":
          pacman.style.transform = "rotate(90deg)";
          pacmanTop += 10;
          break;
        case "ArrowLeft":
          pacman.style.transform = "rotate(180deg)";
          pacmanLeft -= 10;
          break;
        case "ArrowRight":
          pacman.style.transform = "rotate(0deg)";
          pacmanLeft += 10;
          break;
      }
      
      // Check for collisions with food
      for(let i = 0; i < foods.length; i++) {
        let food = foods[i];
        if(isColliding(pacman, food)) {
          currentScore++;
          food.remove();
        }
      }
      
      pacman.style.top = pacmanTop + "px";
      pacman.style.left = pacmanLeft + "px";
    }
    
    // Check if two elements are colliding
    function isColliding(element1, element2) {
      let rect1 = element1.getBoundingClientRect();
      let rect2 = element2.getBoundingClientRect();
      
      return !(rect1.right < rect2.left || 
               rect1.left > rect2.right || 
               rect1.bottom < rect2.top || 
               rect1.top > rect2.bottom);
    }
  </script>
</body>
</html>