AI game creator

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

No:32019

←

Prev Next

→

Pac-Man
Developer User15300｜Date and time 23/12/29 7:23:57
Build time 27.647 sec｜Game capacity 3.464KB｜

Script

Sure! Here's an example of a simple Pac-Man game implemented as a single HTML file, including JavaScript and using pictograms:

This implementation creates a 5x5 game grid using CSS Grid. The Pac-Man, dots, and power pellets are represented using pictogram icons. You can control Pac-Man using the arrow keys on your smartphone's keyboard. The goal is to eat all the dots by moving Pac-Man around. Once all the dots are eaten, a congratulatory message will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple Pac-Man game implemented as a single HTML file, including JavaScript and using pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pac-Man Game</title>
  <style>
    #game-board {
      display: grid;
      grid-template-columns: repeat(5, 80px);
      gap: 2px;
      justify-content: center;
    }

.cell {
      width: 80px;
      height: 80px;
      background-color: black;
      border-radius: 50%;
    }

.pacman {
      background-image: url('https://img.icons8.com/color/48/000000/pacman.png');
      background-repeat: no-repeat;
      background-position: center;
    }

.dot {
      background-image: url('https://img.icons8.com/fluent/48/000000/pixel-dot.png');
      background-repeat: no-repeat;
      background-position: center;
    }

.power-pellet {
      background-image: url('https://img.icons8.com/emoji/48/000000/crystal-ball-emoji.png');
      background-repeat: no-repeat;
      background-position: center;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

let score = 0;
    let pacmanPosition = [2, 2]; // Starting position for Pac-Man

function renderBoard() {
      const gameBoard = document.getElementById("game-board");
      gameBoard.innerHTML = "";

for (let i = 0; i < board.length; i++) {
        for (let j = 0; j < board[i].length; j++) {
          const cell = document.createElement("div");
          cell.className = "cell";

if (pacmanPosition[0] === i && pacmanPosition[1] === j) {
            cell.classList.add("pacman");
            board[i][j] = 0; // Pac-Man "eats" the dot/power pellet
          } else {
            if (board[i][j] === 1) {
              cell.classList.add("dot");
            } else if (board[i][j] === 2) {
              cell.classList.add("power-pellet");
            }
          }

gameBoard.appendChild(cell);
        }
      }
    }

function handleKeyPress(event) {
      const key = event.key;

if (key === "ArrowUp") {
        movePacman(-1, 0);
      } else if (key === "ArrowDown") {
        movePacman(1, 0);
      } else if (key === "ArrowLeft") {
        movePacman(0, -1);
      } else if (key === "ArrowRight") {
        movePacman(0, 1);
      }
    }

function movePacman(dy, dx) {
      const nextRow = pacmanPosition[0] + dy;
      const nextCol = pacmanPosition[1] + dx;

if (nextRow >= 0 && nextRow < board.length && nextCol >= 0 && nextCol < board[0].length) {
        pacmanPosition[0] = nextRow;
        pacmanPosition[1] = nextCol;
        renderBoard();
        checkGameStatus();
      }
    }

function checkGameStatus() {
      const remainingDots = board.flat().filter((cell) => cell === 1).length;

if (remainingDots === 0) {
        alert("Congratulations! You won!");
      }
    }

// Game setup
    window.addEventListener("keydown", handleKeyPress);
    renderBoard();
  </script>
</body>
</html>
```