AI game creator

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

No:34931

119

←

Prev Next

→

Pac-Man
Developer User16392｜Date and time 24/1/12 19:36:22
Build time 15.378 sec｜Game capacity 3.484KB｜

Script

Sure, here's a simple implementation of the classic game Pac-Man in a single HTML file, using JavaScript and enclosed in script tags. The game can be played on a smartphone and includes pictograms for the characters.

To play the game, the user can swipe on the game board in the specified directions (left, right, up, down) to move Pac-Man accordingly. The game board is represented by a 20x20 grid, and Pac-Man is represented by the 👻 pictogram. You can further enhance the game by adding ghosts, collectible items, and additional gameplay mechanics.

←

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 Game</title>
  <style>
    /* CSS styles for game elements */
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333;
    }
    #pacman {
      position: absolute;
      top: 0;
      left: 0;
      color: yellow;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

for (let i = 0; i < 20; i++) {
      for (let j = 0; j < 20; j++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        gameBoard.appendChild(cell);
        cells.push(cell);
      }
    }

// Define game characters
    const pacman = document.createElement('div');
    pacman.id = 'pacman';
    pacman.innerHTML = '👻';
    cells[0].appendChild(pacman);
     
    // Store pacman position
    let pacmanPosition = 0;

// Handle swipe events on smartphone
    let touchstartX = 0;
    let touchstartY = 0;
    let touchendX = 0;
    let touchendY = 0;

gameBoard.addEventListener('touchstart', function (event) {
      touchstartX = event.touches[0].clientX;
      touchstartY = event.touches[0].clientY;
    }, false);

gameBoard.addEventListener('touchend', function (event) {
      touchendX = event.changedTouches[0].clientX;
      touchendY = event.changedTouches[0].clientY;
      handleGesture();
    }, false);

// Move Pac-Man in the specified direction
    function movePacman(direction) {
      const currentCell = cells[pacmanPosition];
      currentCell.removeChild(pacman);

switch (direction) {
        case 'left':
          if (pacmanPosition % 20 !== 0) {
            pacmanPosition--;
          }
          break;
        case 'right':
          if (pacmanPosition % 20 !== 19) {
            pacmanPosition++;
          }
          break;
        case 'up':
          if (pacmanPosition >= 20) {
            pacmanPosition -= 20;
          }
          break;
        case 'down':
          if (pacmanPosition <= 380) {
            pacmanPosition += 20;
          }
          break;
      }

const newCell = cells[pacmanPosition];
      newCell.appendChild(pacman);
    }
  </script>
</body>
</html>
```