AI game creator

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

No:34027

←

Prev Next

→

Pac-Man
Developer User15998｜Date and time 24/1/7 20:03:51
Build time 38.606 sec｜Game capacity 3.214KB｜

Script

This is a simple implementation of the Pac-Man game using HTML and JavaScript. The game is displayed on a canvas element and can be played on a smartphone. The player can control Pac-Man using the arrow keys to move around the maze, avoiding the walls represented by the "1" values in the maze array. The game continuously updates and redraws the canvas to animate Pac-Man's movement.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="pacman-canvas"></canvas>

const pacmanRadius = 15;
    let pacmanX = canvas.width / 2;
    let pacmanY = canvas.height / 2;

const maze = [
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      [1, 0, 0, 1, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 1, 1, 0, 1, 0, 1],
      [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
      [1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 1, 1, 0, 1, 0, 1, 0, 1],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ];

const blockSize = 40;
    const mazeWidth = maze[0].length;
    const mazeHeight = maze.length;
    const canvasWidth = blockSize * mazeWidth;
    const canvasHeight = blockSize * mazeHeight;

canvas.width = canvasWidth;
    canvas.height = canvasHeight;

function drawMaze() {
      for (let row = 0; row < mazeHeight; row++) {
        for (let col = 0; col < mazeWidth; col++) {
          const tileX = col * blockSize;
          const tileY = row * blockSize;

if (maze[row][col] === 1) {
            context.fillStyle = '#000000';
            context.fillRect(tileX, tileY, blockSize, blockSize);
          } else {
            context.fillStyle = '#ffffff';
            context.fillRect(tileX, tileY, blockSize, blockSize);
          }
        }
      }
    }

function drawPacman() {
      context.beginPath();
      context.fillStyle = '#ffff00';
      context.arc(pacmanX, pacmanY, pacmanRadius, 0.25 * Math.PI, 1.75 * Math.PI, false);
      context.lineTo(pacmanX, pacmanY);
      context.closePath();
      context.fill();
    }

function clearCanvas() {
      context.clearRect(0, 0, canvasWidth, canvasHeight);
    }

function updateGame() {
      clearCanvas();
      drawMaze();
      drawPacman();
    }

function handleKeyPress(event) {
      let newX = pacmanX;
      let newY = pacmanY;

switch (event.code) {
        case 'ArrowUp':
          newY -= blockSize;
          break;
        case 'ArrowDown':
          newY += blockSize;
          break;
        case 'ArrowLeft':
          newX -= blockSize;
          break;
        case 'ArrowRight':
          newX += blockSize;
          break;
      }

if (maze[Math.floor(newY/blockSize)][Math.floor(newX/blockSize)] !== 1) {
        pacmanX = newX;
        pacmanY = newY;
      }

updateGame();
    }

document.addEventListener('keydown', handleKeyPress);
    updateGame();

</script>
</body>
</html>
```