AI game creator

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

No:35960

154

←

Prev Next

→

Make a Pacman game
Developer User16701｜Date and time 24/1/16 5:23:54
Build time 16.143 sec｜Game capacity 4.214KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Pacman</title>
    <style>
      #container {
        margin: 0 auto;
        width: 400px;
        height: 400px;
        position: relative;
        background-color: black;
        overflow: hidden;
      }

#pacman {
        position: absolute;
        top: 180px;
        left: 180px;
        width: 40px;
        height: 40px;
        background-color: yellow;
        border-radius: 50%;
        transition: all 0.2s ease-out;
      }

.ghost {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: all 0.2s ease-out;
      }

#red-ghost {
        top: 40px;
        left: 100px;
        background-color: red;
      }

#blue-ghost {
        top: 200px;
        left: 300px;
        background-color: blue;
      }

#green-ghost {
        top: 340px;
        left: 200px;
        background-color: green;
      }

.food {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: white;
        border-radius: 50%;
      }

#food1 {
        top: 100px;
        left: 100px;
      }

#food2 {
        top: 300px;
        left: 100px;
      }

#food3 {
        top: 200px;
        left: 250px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="pacman"></div>
      <div id="red-ghost" class="ghost"></div>
      <div id="blue-ghost" class="ghost"></div>
      <div id="green-ghost" class="ghost"></div>
      <div id="food1" class="food"></div>
      <div id="food2" class="food"></div>
      <div id="food3" class="food"></div>
    </div>

let pacmanX = 180;
      let pacmanY = 180;

let direction = "right";

pacman.style.transform = `translate(${pacmanX}px, ${pacmanY}px)`;
        checkCollision();
      }

function checkCollision() {
        const objects = [redGhost, blueGhost, greenGhost, food1, food2, food3];

objects.forEach((object) => {
          if (
            pacmanX < object.offsetLeft + object.offsetWidth &&
            pacmanX + pacman.offsetWidth > object.offsetLeft &&
            pacmanY < object.offsetTop + object.offsetHeight &&
            pacmanY + pacman.offsetHeight > object.offsetTop
          ) {
            if (object.classList.contains("food")) {
              object.style.display = "none";
            } else {
              gameOver();
            }
          }
        });
      }

function moveGhost() {
        const ghostX = Math.floor(Math.random() * 400);
        const ghostY = Math.floor(Math.random() * 400);

redGhost.style.transform = `translate(${ghostX}px, ${ghostY}px)`;
        blueGhost.style.transform = `translate(${ghostX}px, ${ghostY}px)`;
        greenGhost.style.transform = `translate(${ghostX}px, ${ghostY}px)`;
      }

function gameOver() {
        alert("Game Over");
      }

setInterval(movePacman, 100);
      setInterval(moveGhost, 1000);
    </script>
  </body>
</html>