AI game creator

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

No:11872

237

←

Prev Next

→

Pac-Man
Developer User4883｜Date and time 23/8/12 20:17:55
Build time 24.966 sec｜Game capacity 3.168KB｜

Script

Sure! Here's a simple implementation of the classic game Pac-Man using JavaScript within a single HTML file. It is designed for smartphone operation and utilizes pictograms for visuals.

When you open this HTML file in a web browser, it will display a small game board with Pac-Man (represented by a yellow emoji) moving within the grid based on the arrow keys on your smartphone. The game loops continuously, moving Pac-Man every 500 milliseconds.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic game Pac-Man using JavaScript within a single HTML file. It is designed for smartphone operation and utilizes pictograms for visuals.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man</title>
    <style>
      #game-board {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        border: 2px solid black;
      }

.cell {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
      }

.pacman {
        font-size: 20px;
        color: yellow;
        animation: movePacman 1s infinite;
      }

@keyframes movePacman {
        0% {
          transform: rotate(0);
        }
        25% {
          transform: rotate(90deg);
        }
        50% {
          transform: rotate(180deg);
        }
        75% {
          transform: rotate(270deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

const pacMan = {
        x: 0,
        y: 0,
        direction: "right"
      };

const gameBoard = document.getElementById("game-board");

function createCell(pictogram) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        cell.textContent = pictogram;
        return cell;
      }

function movePacman() {
        switch (pacMan.direction) {
          case "up":
            if (pacMan.y > 0) pacMan.y--;
            break;
          case "down":
            if (pacMan.y < boardSize - 1) pacMan.y++;
            break;
          case "left":
            if (pacMan.x > 0) pacMan.x--;
            break;
          case "right":
            if (pacMan.x < boardSize - 1) pacMan.x++;
            break;
        }

renderBoard();
      }

document.addEventListener("keydown", function(event) {
        switch (event.key) {
          case "ArrowUp":
            pacMan.direction = "up";
            break;
          case "ArrowDown":
            pacMan.direction = "down";
            break;
          case "ArrowLeft":
            pacMan.direction = "left";
            break;
          case "ArrowRight":
            pacMan.direction = "right";
            break;
        }
      });

setInterval(movePacman, 500);
      renderBoard();
    </script>
  </body>
</html>
```