AI game creator

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

No:40552

←

Prev Next

→

Pac-Man
Developer User18058｜Date and time 24/2/3 12:36:55
Build time 8.524 sec｜Game capacity 2.281KB｜

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;
      background-color: black;
      position: relative;
    }
    
    .pacman {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 180px;
      left: 180px;
      background-image: url('pacman.png');
      background-size: cover;
    }
    
    .ghost {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 200px;
      left: 200px;
      background-image: url('ghost.png');
      background-size: cover;
    }
    
    .food {
      width: 10px;
      height: 10px;
      position: absolute;
      background-color: yellow;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div class="pacman"></div>
    <div class="ghost"></div>
    <div class="food" style="top: 50px; left: 50px;"></div>
    <div class="food" style="top: 50px; left: 370px;"></div>
    <div class="food" style="top: 370px; left: 50px;"></div>
    <div class="food" style="top: 370px; left: 370px;"></div>
  </div>

if (event.key === 'ArrowUp') {
        pacman.style.top = (pacman.offsetTop - 10) + 'px';
      } else if (event.key === 'ArrowDown') {
        pacman.style.top = (pacman.offsetTop + 10) + 'px';
      } else if (event.key === 'ArrowLeft') {
        pacman.style.left = (pacman.offsetLeft - 10) + 'px';
      } else if (event.key === 'ArrowRight') {
        pacman.style.left = (pacman.offsetLeft + 10) + 'px';
      }

if (isEaten(pacman, food)) {
        food.style.display = 'none';
        alert('Food eaten!');
      }
    });

// Checks if Pac-Man has eaten the food
    function isEaten(pacman, food) {
      var pacmanRect = pacman.getBoundingClientRect();
      var foodRect = food.getBoundingClientRect();

return (
        pacmanRect.left < foodRect.right &&
        pacmanRect.right > foodRect.left &&
        pacmanRect.top < foodRect.bottom &&
        pacmanRect.bottom > foodRect.top
      );
    }
  </script>
</body>
</html>