Pac-Man's game | AI game creator

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

No:9774

170

Pac-Man
Developer User4426｜Date and time 23/7/27 13:53:07
Build time 28.85 sec｜Game capacity 3.82KB｜

This is a simple implementation of the Pac-Man game using HTML, CSS, and JavaScript. To play, simply save the code as an HTML file (e.g., `pacman.html`) and open it in a web browser on your smartphone. The game consists of a game board represented by a black square and a Pac-Man character that can be moved using the arrow keys. The Pac-Man starts at the top-left corner of the game board and can move in four directions - right, left, up, and down. The game board is enclosed in a `div` element with the id `game-board`. The Pac-Man character is represented by a `div` element with the class `pacman`. The Pac-Man is initially positioned at `left: 50px` and `top: 50px` within the game board. The `createPacman` function creates the Pac-Man character and appends it to the game board. The `movePacman` function listens for keydown events and updates the direction of Pac-Man accordingly. It also handles the movement of Pac-Man on the game board. The Pac-Man moves 30 pixels in the specified direction every `speed` milliseconds. If Pac-Man reaches the edges of the game board, it wraps around to the opposite side to create a looping effect. The `initGame` function initializes the game by setting up the game board, creating Pac-Man, and enabling Pac-Man movement. Please note that you'll need to provide your own `emozi_all/pacman.png` file to use as the Pac-Man character image.

→ 　

1　

0　

　
　
　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Pac-Man Game</title>
<style>
  #game-board {
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid black;
    background-color: black;
  }
  .pacman {
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url('pacman.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>
</head>
<body>
  <div id="game-board"></div>

<script>
  var pacman;
  var gameBoard;
  var direction = 'right';
  var speed = 200;

function createPacman() {
    pacman = document.createElement('div');
    pacman.className = 'pacman';
    pacman.style.left = '50px';
    pacman.style.top = '50px';
    gameBoard.appendChild(pacman);
  }

function movePacman() {
    document.addEventListener('keydown', function (event) {
      if (event.keyCode === 37) {
        direction = 'left';
        pacman.style.transform = 'rotate(180deg)';
      }
      if (event.keyCode === 38) {
        direction = 'up';
        pacman.style.transform = 'rotate(-90deg)';
      }
      if (event.keyCode === 39) {
        direction = 'right';
        pacman.style.transform = 'rotate(0deg)';
      }
      if (event.keyCode === 40) {
        direction = 'down';
        pacman.style.transform = 'rotate(90deg)';
      }
    });

setInterval(function () {
      var leftPosition = parseInt(pacman.style.left);
      var topPosition = parseInt(pacman.style.top);

if (direction === 'right') {
        pacman.style.left = (leftPosition + 30) + 'px';
      }
      if (direction === 'left') {
        pacman.style.left = (leftPosition - 30) + 'px';
      }
      if (direction === 'up') {
        pacman.style.top = (topPosition - 30) + 'px';
      }
      if (direction === 'down') {
        pacman.style.top = (topPosition + 30) + 'px';
      }

if (leftPosition >= (gameBoard.offsetWidth - 30)) {
        pacman.style.left = '0px';
      }
      if (topPosition >= (gameBoard.offsetHeight - 30)) {
        pacman.style.top = '0px';
      }
      if (leftPosition < 0) {
        pacman.style.left = (gameBoard.offsetWidth - 30) + 'px';
      }
      if (topPosition < 0) {
        pacman.style.top = (gameBoard.offsetHeight - 30) + 'px';
      }
    }, speed);
  }

function initGame() {
    gameBoard = document.getElementById('game-board');
    createPacman();
    movePacman();
  }

window.onload = initGame;
</script>
</body>
</html>
```

This is a simple implementation of the Pac-Man game using HTML, CSS, and JavaScript. To play, simply save the code as an HTML file (e.g., `pacman.html`) and open it in a web browser on your smartphone.

The game consists of a game board represented by a black square and a Pac-Man character that can be moved using the arrow keys. The Pac-Man starts at the top-left corner of the game board and can move in four directions - right, left, up, and down.

The game board is enclosed in a `div` element with the id `game-board`. The Pac-Man character is represented by a `div` element with the class `pacman`. The Pac-Man is initially positioned at `left: 50px` and `top: 50px` within the game board.

The `createPacman` function creates the Pac-Man character and appends it to the game board.

The `movePacman` function listens for keydown events and updates the direction of Pac-Man accordingly. It also handles the movement of Pac-Man on the game board. The Pac-Man moves 30 pixels in the specified direction every `speed` milliseconds. If Pac-Man reaches the edges of the game board, it wraps around to the opposite side to create a looping effect.

The `initGame` function initializes the game by setting up the game board, creating Pac-Man, and enabling Pac-Man movement.

Please note that you'll need to provide your own `pacman.png` file to use as the Pac-Man character image.