AI game creator

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

No:42570

150

←

Prev Next

→

Pac-Man
Developer User18914｜Date and time 24/2/12 4:13:49
Build time 17.632 sec｜Game capacity 4.359KB｜

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: 2px solid black;
      position: relative;
    }

.pac-man {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url("pictograms/pacman.png");
      background-size: cover;
      transition: all 0.2s ease-in-out;
    }

.ghost {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url("pictograms/ghost.png");
      background-size: cover;
      transition: all 0.2s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="pac-man" class="pac-man"></div>
    <div id="ghost1" class="ghost"></div>
    <div id="ghost2" class="ghost"></div>
    <div id="ghost3" class="ghost"></div>
  </div>

let pacmanX = 0;
    let pacmanY = 0;
    let ghost1X = 0;
    let ghost1Y = 0;
    let ghost2X = 400;
    let ghost2Y = 400;
    let ghost3X = 400;
    let ghost3Y = 0;
    let score = 0;

function handleKeyDown(event) {
      let keyPressed = event.key;
      movePacman(keyPressed);
    }

function movePacman(direction) {
      const currentX = pacmanX;
      const currentY = pacmanY;

if (direction === 'ArrowUp') {
        pacmanY -= 40;
      } else if (direction === 'ArrowDown') {
        pacmanY += 40;
      } else if (direction === 'ArrowLeft') {
        pacmanX -= 40;
      } else if (direction === 'ArrowRight') {
        pacmanX += 40;
      }

if (isCollision(pacmanX, pacmanY)) {
        pacmanX = currentX;
        pacmanY = currentY;
        return;
      }

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

if (isCollidingWithGhost()) {
        gameOver();
      }
    }

function moveGhost() {
      const dx1 = Math.random() < 0.5 ? -1 : 1;
      const dy1 = Math.random() < 0.5 ? -1 : 1;
      const dx2 = Math.random() < 0.5 ? -1 : 1;
      const dy2 = Math.random() < 0.5 ? -1 : 1;
      const dx3 = Math.random() < 0.5 ? -1 : 1;
      const dy3 = Math.random() < 0.5 ? -1 : 1;

ghost1X += dx1 * 40;
      ghost1Y += dy1 * 40;
      ghost2X += dx2 * 40;
      ghost2Y += dy2 * 40;
      ghost3X += dx3 * 40;
      ghost3Y += dy3 * 40;

if (ghost1X < 0 || ghost1X > 400 || isCollision(ghost1X, ghost1Y)) {
        ghost1X -= dx1 * 40;
        ghost1Y -= dy1 * 40;
      }
      if (ghost2X < 0 || ghost2X > 400 || isCollision(ghost2X, ghost2Y)) {
        ghost2X -= dx2 * 40;
        ghost2Y -= dy2 * 40;
      }
      if (ghost3X < 0 || ghost3X > 400 || isCollision(ghost3X, ghost3Y)) {
        ghost3X -= dx3 * 40;
        ghost3Y -= dy3 * 40;
      }

ghosts[0].style.transform = `translate(${ghost1X}px, ${ghost1Y}px)`;
      ghosts[1].style.transform = `translate(${ghost2X}px, ${ghost2Y}px)`;
      ghosts[2].style.transform = `translate(${ghost3X}px, ${ghost3Y}px)`;

if (isCollidingWithGhost()) {
        gameOver();
      }
    }

function isCollision(x, y) {
      const walls = document.getElementsByClassName('wall');
      const pacmanRect = pacMan.getBoundingClientRect();

for (let i = 0; i < walls.length; i++) {
        const wallRect = walls[i].getBoundingClientRect();

if (
          x < wallRect.right &&
          pacmanRect.right > wallRect.left &&
          y < wallRect.bottom &&
          pacmanRect.bottom > wallRect.top
        ) {
          return true;
        }
      }

return false;
    }

function gameOver() {
      alert('Game Over!');
      location.reload();
    }

window.addEventListener('keydown', handleKeyDown);
    setInterval(moveGhost, 1000);
  </script>
</body>
</html>