PAC man. Ghost dots's game | AI game creator

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

No:27703

110

PAC man. Ghost dots
Developer User13763｜Date and time 23/12/8 10:06:54
Build time 41.877 sec｜Game capacity 4.346KB｜

Sure! Here's a sample implementation of the classic game Pac-Man using JavaScript and HTML. The game is designed to be played on a smartphone and uses pictograms for the characters and elements.

Score: 0

You can save this code in a single HTML file and open it with a web browser to play the Pac-Man game. The game board consists of a grid of dots, with Pac-Man represented by a white dot and the ghost represented by a custom pictogram (ghost.png). The objective is to control Pac-Man using the arrow keys and eat the dots while avoiding the ghost. The score is displayed at the top, and the game ends if Pac-Man and the ghost collide. Note: To run this example, you would need an image named "emozi_all/ghost.png" in the same folder as the HTML file, representing the ghost pictogram.

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

Sure! Here's a sample implementation of the classic game Pac-Man using JavaScript and HTML. The game is designed to be played on a smartphone and uses pictograms for the characters and elements.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    #game {
      display: flex;
      flex-wrap: wrap;
      width: 90vmin;
      height: 90vmin;
      border: 2px solid black;
      margin: 5vmin auto;
      background-color: #000;
    }

.dot {
      width: 10%;
      height: 10%;
      background: #fff;
      border-radius: 50%;
    }

#pacman {
      width: 10%;
      height: 10%;
      position: relative;
    }

#ghost {
      width: 10%;
      height: 10%;
      position: relative;
      background-image: url('ghost.png');
      background-size: cover;
    }

#score {
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  <div id="score">Score: <span id="scoreValue">0</span></div>

<script>
    // Game setup
    const gameContainer = document.querySelector('#game');
    const scoreValue = document.querySelector('#scoreValue');
    
    const boardWidth = 9;
    const boardHeight = 9;
    
    const pacmanStartPosition = { x: 0, y: boardHeight - 1 };
    const ghostStartPosition = { x: boardWidth - 1, y: 0 };
    
    const emptyDotClass = 'dot';
    const pacmanClass = 'pacman';
    const ghostClass = 'ghost';
    
    const dots = [];
    let pacmanPosition = { ...pacmanStartPosition };
    let ghostPosition = { ...ghostStartPosition };
    let score = 0;
    
    function createBoard() {
      for (let y = 0; y < boardHeight; y++) {
        for (let x = 0; x < boardWidth; x++) {
          const dot = document.createElement('div');
          dot.classList.add(emptyDotClass);
          gameContainer.appendChild(dot);
          dots.push(dot);
        }
      }
    }
    
    function draw() {
      dots.forEach((dot, index) => {
        if (index === pacmanPosition.x + pacmanPosition.y * boardWidth) {
          dot.classList.add(pacmanClass);
        } else if (index === ghostPosition.x + ghostPosition.y * boardWidth) {
          dot.classList.add(ghostClass);
        } else {
          dot.classList.remove(pacmanClass, ghostClass);
        }
      });
    }
    
    function movePacman(event) {
      const key = event.key;
    
      if (key === 'ArrowUp' && pacmanPosition.y > 0) {
        pacmanPosition.y--;
      } else if (key === 'ArrowDown' && pacmanPosition.y < boardHeight - 1) {
        pacmanPosition.y++;
      } else if (key === 'ArrowLeft' && pacmanPosition.x > 0) {
        pacmanPosition.x--;
      } else if (key === 'ArrowRight' && pacmanPosition.x < boardWidth - 1) {
        pacmanPosition.x++;
      }
    
      eatDot(pacmanPosition);
    
      draw();
      checkGameStatus();
    }
    
    function eatDot(position) {
      const dot = dots[position.x + position.y * boardWidth];
    
      if (dot.classList.contains(emptyDotClass)) {
        score++;
        dot.classList.remove(emptyDotClass);
        scoreValue.textContent = score;
      }
    }
    
    function checkGameStatus() {
      if (pacmanPosition.x === ghostPosition.x && pacmanPosition.y === ghostPosition.y) {
        alert('Game Over! Pac-Man was captured by the ghost. Final Score: ' + score);
        resetGame();
      }
    }
    
    function resetGame() {
      dots.forEach(dot => dot.classList.add(emptyDotClass));
    
      pacmanPosition = { ...pacmanStartPosition };
      ghostPosition = { ...ghostStartPosition };
    
      score = 0;
      scoreValue.textContent = score;
    
      draw();
    }
    
    createBoard();
    draw();
    document.addEventListener('keydown', movePacman);
  </script>
</body>
</html>
```

You can save this code in a single HTML file and open it with a web browser to play the Pac-Man game. The game board consists of a grid of dots, with Pac-Man represented by a white dot and the ghost represented by a custom pictogram (ghost.png). The objective is to control Pac-Man using the arrow keys and eat the dots while avoiding the ghost. The score is displayed at the top, and the game ends if Pac-Man and the ghost collide.

Note: To run this example, you would need an image named "ghost.png" in the same folder as the HTML file, representing the ghost pictogram.