AI game creator

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

No:37213

184

←

Prev Next

→

Pac-Man
Developer User17015｜Date and time 24/1/20 18:11:31
Build time 17.202 sec｜Game capacity 4.895KB｜

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>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #game-board {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: black;
    }
    
    .pacman {
      position: absolute;
      width: 30px;
      height: 30px;
      background-image: url('pacman.png');
      background-size: cover;
    }
    
    .ghost {
      position: absolute;
      width: 30px;
      height: 30px;
      background-image: url('ghost.png');
      background-size: cover;
    }
    
    .dot {
      position: absolute;
      width: 5px;
      height: 5px;
      background-color: white;
      border-radius: 50%;
    }
    
    #message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const pacman = document.createElement("div");
      pacman.className = "pacman";
      
      const ghosts = [];
      const ghostImages = ["ghost1.png", "ghost2.png", "ghost3.png", "ghost4.png"];
      
      const dots = [];
      
      let score = 0;
      let gameRunning = true;
      
      const gameBoard = document.getElementById("game-board");
      
      const WIDTH = gameBoard.offsetWidth;
      const HEIGHT = gameBoard.offsetHeight;
      const NUM_DOTS = 100;
      
      function randomPosition() {
        const x = Math.floor(Math.random() * (WIDTH - 30));
        const y = Math.floor(Math.random() * (HEIGHT - 30));
        return [x, y];
      }
      
      function createDots() {
        for (let i = 0; i < NUM_DOTS; i++) {
          const dot = document.createElement("div");
          dot.className = "dot";
          
          const [x, y] = randomPosition();
          dot.style.left = x + "px";
          dot.style.top = y + "px";
          
          gameBoard.appendChild(dot);
          dots.push(dot);
        }
      }
      
      function createGhosts() {
        for (let i = 0; i < ghostImages.length; i++) {
          const ghost = document.createElement("div");
          ghost.className = "ghost";
          ghost.style.backgroundImage = `url(${ghostImages[i]})`;
          
          const [x, y] = randomPosition();
          ghost.style.left = x + "px";
          ghost.style.top = y + "px";
          
          gameBoard.appendChild(ghost);
          ghosts.push(ghost);
        }
      }
      
      function updateScore() {
        document.getElementById("score").innerText = score;
      }
      
      function checkCollision() {
        const pacmanRect = pacman.getBoundingClientRect();
        
        dots.forEach((dot, index) => {
          const dotRect = dot.getBoundingClientRect();
          if (pacmanRect.top === dotRect.top && pacmanRect.left === dotRect.left) {
            dot.remove();
            dots.splice(index, 1);
            score += 10;
            updateScore();
          }
        });
        
        ghosts.forEach((ghost) => {
          const ghostRect = ghost.getBoundingClientRect();
          if (pacmanRect.top === ghostRect.top && pacmanRect.left === ghostRect.left) {
            gameRunning = false;
            gameOver();
          }
        });
      }
      
      function gameOver() {
        gameBoard.style.opacity = 0.5;
        
        const message = document.createElement("div");
        message.id = "message";
        message.innerText = "Game Over";
        document.body.appendChild(message);
      }
      
      function movePacman(event) {
        if (!gameRunning) return;
        
        const pacmanRect = pacman.getBoundingClientRect();
        
        switch (event.keyCode) {
          case 37:
            pacman.style.transform = "rotate(-180deg)";
            pacman.style.left = pacmanRect.left - 30 + "px";
            break;
            
          case 38:
            pacman.style.transform = "rotate(-90deg)";
            pacman.style.top = pacmanRect.top - 30 + "px";
            break;
            
          case 39:
            pacman.style.transform = "rotate(0)";
            pacman.style.left = pacmanRect.left + 30 + "px";
            break;
            
          case 40:
            pacman.style.transform = "rotate(90deg)";
            pacman.style.top = pacmanRect.top + 30 + "px";
            break;
        }
        
        checkCollision();
      }
      
      createDots();
      createGhosts();
      updateScore();
      
      document.body.appendChild(pacman);
      pacman.style.top = window.innerHeight / 2 - 15 + "px";
      pacman.style.left = window.innerWidth / 2 - 15 + "px";
      
      document.addEventListener("keydown", movePacman);
    });
  </script>
</body>
</html>