AI game creator

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

No:40903

←

Prev Next

→

Pac-Man
Developer Angbo｜Date and time 24/2/4 15:26:11
Build time 16.065 sec｜Game capacity 4.258KB｜

Script

Sure, here's how you can create a simple Pac-Man game using JavaScript within a single HTML file:

This HTML file defines a Pac-Man game where you can control the movement of Pac-Man using the arrow keys. The game consists of a maze (defined using a 2D array) and the Pac-Man character. Pac-Man's mouth opens and closes as it moves, giving it the classic Pac-Man appearance. You can run this HTML file on a smartphone within a browser to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure, here's how you can create a simple Pac-Man game using JavaScript within a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man</title>
    <style>
      #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <canvas id="game-canvas" width="600" height="400"></canvas>
    </div>
    
    <script>
      // Game variables
      const canvas = document.getElementById('game-canvas');
      const context = canvas.getContext('2d');
      const pacMan = {
        x: 300,
        y: 200,
        radius: 20,
        mouthAngle: 0,
        direction: 'right'
      };
      const tileWidth = canvas.width / 30;
      const tileHeight = canvas.height / 20;
      const maze = [
        '######################',
        '#....................#',
        '#.####.#####.####.###.#',
        '#.#.................#.#',
        '#.#.###.##.##.###.###.#',
        '#.#.#.............#.#.#',
        '#.#.#.###.####.###.#.#',
        '#.....#...........#...#',
        '#####.#.#####.###.###.#',
        '#####.#.......#.......#',
        '#####.#########.#######',
        '#.........#...........#',
        '#.######..#..#####.###.#',
        '#.#....##.....#.......#',
        '#.###.#####.#.#######.#',
        '#.....................#',
        '######################'
      ];
      const wallColor = '#000000';
      const pacManColor = '#FFD700';

// Main game loop
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawMaze();
        movePacMan();
        drawPacMan();
        requestAnimationFrame(gameLoop);
      }
      
      // Draw the maze walls
      function drawMaze() {
        for (let row = 0; row < maze.length; row++) {
          for (let col = 0; col < maze[row].length; col++) {
            if (maze[row][col] === '#') {
              const x = col * tileWidth;
              const y = row * tileHeight;
              context.fillStyle = wallColor;
              context.fillRect(x, y, tileWidth, tileHeight);
            }
          }
        }
      }

// Move Pac-Man based on user input
      function movePacMan() {
        document.addEventListener('keydown', (event) => {
          if (event.key === 'ArrowUp' && isTileEmpty(pacMan.x, pacMan.y - tileHeight)) {
            pacMan.direction = 'up';
            pacMan.y -= tileHeight;
          } else if (event.key === 'ArrowDown' && isTileEmpty(pacMan.x, pacMan.y + tileHeight)) {
            pacMan.direction = 'down';
            pacMan.y += tileHeight;
          } else if (event.key === 'ArrowLeft' && isTileEmpty(pacMan.x - tileWidth, pacMan.y)) {
            pacMan.direction = 'left';
            pacMan.x -= tileWidth;
          } else if (event.key === 'ArrowRight' && isTileEmpty(pacMan.x + tileWidth, pacMan.y)) {
            pacMan.direction = 'right';
            pacMan.x += tileWidth;
          }
        });
      }
      
      // Check if the tile at the provided coordinates is empty
      function isTileEmpty(x, y) {
        const row = Math.floor(y / tileHeight);
        const col = Math.floor(x / tileWidth);
        return maze[row][col] === '.';
      }

// Draw Pac-Man
      function drawPacMan() {
        context.beginPath();
        context.arc(pacMan.x, pacMan.y, pacMan.radius, (pacMan.mouthAngle - 0.2) * Math.PI, (pacMan.mouthAngle + 0.2) * Math.PI);
        context.lineTo(pacMan.x, pacMan.y);
        context.fillStyle = pacManColor;
        context.fill();
        context.closePath();
        
        // Update Pac-Man's mouth movement
        pacMan.mouthAngle += 0.1;
        if (pacMan.mouthAngle >= 2) {
          pacMan.mouthAngle = 0;
        }
      }
      
      // Start the game
      gameLoop();
    </script>
  </body>
</html>
```