AI game creator

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

No:35358

←

Prev Next

→

Pac-Man
Developer User16525｜Date and time 24/1/14 6:08:30
Build time 16.074 sec｜Game capacity 5.045KB｜

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 {
      position: relative;
      width: 400px;
      height: 400px;
      border: 2px solid black;
    }
    .pacman {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: yellow;
    }
    .food {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
    }
    .ghost {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

pacman.className = 'pacman';
      pacman.style.top = '180px';
      pacman.style.left = '180px';
      gameBoard.appendChild(pacman);

for (let i = 0; i < 10; i++) {
        const food = document.createElement('div');
        food.className = 'food';
        const x = Math.floor(Math.random() * 380);
        const y = Math.floor(Math.random() * 380);
        food.style.top = `${y}px`;
        food.style.left = `${x}px`;
        gameBoard.appendChild(food);
        foods.push(food);
      }

for (let i = 0; i < 3; i++) {
        const ghost = document.createElement('div');
        ghost.className = 'ghost';
        const x = Math.floor(Math.random() * 380);
        const y = Math.floor(Math.random() * 380);
        ghost.style.top = `${y}px`;
        ghost.style.left = `${x}px`;
        gameBoard.appendChild(ghost);
        ghosts.push(ghost);
      }

function movePacman(event) {
        event.preventDefault();
        const key = event.key;
        const pacmanStyle = window.getComputedStyle(pacman);
        let topPos = parseInt(pacmanStyle.top);
        let leftPos = parseInt(pacmanStyle.left);

if (key === 'ArrowUp' && topPos > 0) {
          topPos -= 20;
        } else if (key === 'ArrowDown' && topPos < 360) {
          topPos += 20;
        } else if (key === 'ArrowLeft' && leftPos > 0) {
          leftPos -= 20;
        } else if (key === 'ArrowRight' && leftPos < 360) {
          leftPos += 20;
        }

pacman.style.top = `${topPos}px`;
        pacman.style.left = `${leftPos}px`;
        checkFoodCollision();
        checkGhostCollision();
      }

function checkFoodCollision() {
        foods.forEach((food, index) => {
          const pacmanRect = pacman.getBoundingClientRect();
          const foodRect = food.getBoundingClientRect();

if (
            pacmanRect.top <= foodRect.bottom &&
            pacmanRect.right >= foodRect.left &&
            pacmanRect.bottom >= foodRect.top &&
            pacmanRect.left <= foodRect.right
          ) {
            foods.splice(index, 1);
            gameBoard.removeChild(food);
            if (foods.length === 0) {
              setTimeout(() => {
                alert('¡Has ganado!');
                resetGame();
              }, 500);
            }
          }
        });
      }

function checkGhostCollision() {
        ghosts.forEach((ghost) => {
          const pacmanRect = pacman.getBoundingClientRect();
          const ghostRect = ghost.getBoundingClientRect();

if (
            pacmanRect.top <= ghostRect.bottom &&
            pacmanRect.right >= ghostRect.left &&
            pacmanRect.bottom >= ghostRect.top &&
            pacmanRect.left <= ghostRect.right
          ) {
            setTimeout(() => {
              alert('¡Has perdido!');
              resetGame();
            }, 500);
          }
        });
      }

function resetGame() {
        pacman.style.top = '180px';
        pacman.style.left = '180px';
        for (let food of foods) {
          gameBoard.removeChild(food);
        }
        foods.length = 0;

for (let ghost of ghosts) {
          gameBoard.removeChild(ghost);
        }
        ghosts.length = 0;

for (let i = 0; i < 10; i++) {
          const food = document.createElement('div');
          food.className = 'food';
          const x = Math.floor(Math.random() * 380);
          const y = Math.floor(Math.random() * 380);
          food.style.top = `${y}px`;
          food.style.left = `${x}px`;
          gameBoard.appendChild(food);
          foods.push(food);
        }

for (let i = 0; i < 3; i++) {
          const ghost = document.createElement('div');
          ghost.className = 'ghost';
          const x = Math.floor(Math.random() * 380);
          const y = Math.floor(Math.random() * 380);
          ghost.style.top = `${y}px`;
          ghost.style.left = `${x}px`;
          gameBoard.appendChild(ghost);
          ghosts.push(ghost);
        }
      }

window.addEventListener('keydown', movePacman);
    });
  </script>
</body>
</html>