AI game creator

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

No:34472

←

Prev Next

→

Pac-Man
Developer User16253｜Date and time 24/1/10 16:47:08
Build time 9.453 sec｜Game capacity 2.003KB｜

Script

/* Pac-Man Game This is a simple implementation of the classic Pac-Man game using JavaScript and depicted with pictograms. The game can be played on a smartphone. */

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Pac-Man Game

This is a simple implementation of the classic Pac-Man game using JavaScript and depicted with pictograms. The game can be played on a smartphone.

<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    body {
      background-color: black;
      margin: 0;
      padding: 0;
    }
    
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #pacman {
      display: block;
      width: 50px;
      height: 50px;
      background-image: url('https://i.imgur.com/xFzdh73.png');
      background-size: contain;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="pacman"></div>
  </div>
  
  <script>
    window.addEventListener('load', () => {
      const pacman = document.getElementById('pacman');
      let positionX = 0;
      let direction = 'right';
      
      function movePacman() {
        if (direction === 'right') {
          positionX += 10;
          pacman.style.transform = 'rotate(0deg)';
        } else if (direction === 'left') {
          positionX -= 10;
          pacman.style.transform = 'rotate(180deg)';
        } else if (direction === 'up') {
          pacman.style.transform = 'rotate(-90deg)';
        } else if (direction === 'down') {
          pacman.style.transform = 'rotate(90deg)';
        }
        
        pacman.style.left = positionX + 'px';
      }
      
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowRight') {
          direction = 'right';
        } else if (event.key === 'ArrowLeft') {
          direction = 'left';
        } else if (event.key === 'ArrowUp') {
          direction = 'up';
        } else if (event.key === 'ArrowDown') {
          direction = 'down';
        }
        
        movePacman();
      });
    });
  </script>
</body>
</html>