AI game creator

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

No:15055

211

←

Prev Next

→

Real Pacman game
Developer User5869｜Date and time 23/9/5 23:40:05
Build time 36.145 sec｜Game capacity 3.324KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      width: 500px;
      height: 500px;
      background-color: black;
      position: relative;
    }
    .pacman {
      width: 30px;
      height: 30px;
      background-color: yellow;
      border-radius: 50%;
      position: absolute;
    }
    .dot {
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  
  <script>
    var pacman, dots;
    var currentDirection, nextDirection;
    var speed = 10;
    
    function createPacman() {
      pacman = document.createElement("div");
      pacman.className = "pacman";
      document.getElementById("game-board").appendChild(pacman);
      setPosition(pacman, 250, 250);
    }
    
    function createDots() {
      dots = [];
      for (var i = 0; i < 10; i++) {
        var dot = document.createElement("div");
        dot.className = "dot";
        var x = Math.floor(Math.random() * 480) + 10;
        var y = Math.floor(Math.random() * 480) + 10;
        setPosition(dot, x, y);
        document.getElementById("game-board").appendChild(dot);
        dots.push(dot);
      }
    }
    
    function setPosition(element, x, y) {
      element.style.left = x + "px";
      element.style.top = y + "px";
    }
    
    function handleKeyPress(event) {
      if (event.key === "ArrowUp" && currentDirection !== "down") nextDirection = "up";
      else if (event.key === "ArrowDown" && currentDirection !== "up") nextDirection = "down";
      else if (event.key === "ArrowLeft" && currentDirection !== "right") nextDirection = "left";
      else if (event.key === "ArrowRight" && currentDirection !== "left") nextDirection = "right";
    }
    
    function updateGame() {
      currentDirection = nextDirection;
      var pacmanRect = pacman.getBoundingClientRect();
      
      if (currentDirection === "up") {
        if (pacmanRect.top > 0) pacman.style.top = (pacmanRect.top - speed) + "px";
      }
      else if (currentDirection === "down") {
        if (pacmanRect.bottom < 500) pacman.style.top = (pacmanRect.top + speed) + "px";
      }
      else if (currentDirection === "left") {
        if (pacmanRect.left > 0) pacman.style.left = (pacmanRect.left - speed) + "px";
      }
      else if (currentDirection === "right") {
        if (pacmanRect.right < 500) pacman.style.left = (pacmanRect.left + speed) + "px";
      }
      
      checkCollisions();
      requestAnimationFrame(updateGame);
    }
    
    function checkCollisions() {
      var pacmanRect = pacman.getBoundingClientRect();
      
      for (var i = 0; i < dots.length; i++) {
        var dotRect = dots[i].getBoundingClientRect();
        
        if (pacmanRect.top < dotRect.bottom &&
            pacmanRect.bottom > dotRect.top &&
            pacmanRect.left < dotRect.right &&
            pacmanRect.right > dotRect.left) {
          dots[i].remove();
          dots.splice(i, 1);
        }
      }
      
      if (dots.length === 0) {
        alert("Congratulations! You have collected all the dots!");
        location.reload();
      }
    }
    
    createPacman();
    createDots();
    document.addEventListener("keydown", handleKeyPress);
    updateGame();
  </script>
</body>
</html>