AI game creator

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

No:24726

←

Prev Next

→

Pac-Man
Developer User6662｜Date and time 23/11/11 19:12:04
Build time 136.687 sec｜Game capacity 4.411KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Pac-Man Game</title>
    <style>
      #game-board {
        width: 480px;
        height: 520px;
        border: 2px solid black;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    <script>
      // Game configuration
      const ROWS = 15;
      const COLS = 17;
      const CELL_SIZE = 32;
      const GAME_WIDTH = COLS * CELL_SIZE;
      const GAME_HEIGHT = ROWS * CELL_SIZE;
      
      // Initialize game board
      const gameBoard = document.getElementById("game-board");
      gameBoard.style.width = `${GAME_WIDTH}px`;
      gameBoard.style.height = `${GAME_HEIGHT}px`;
      
      // Characters
      const pacMan = {
        x: 8,
        y: 7,
        direction: "right"
      };
      
      // Game board state
      const boardState = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1],
        [1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1],
        [1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1],
        [1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1],
        [1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1],
        [1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
      ];
      
      // Render game board
      function renderGameBoard() {
        gameBoard.innerHTML = "";
        for (let i = 0; i < ROWS; i++) {
          for (let j = 0; j < COLS; j++) {
            const cell = document.createElement("div");
            cell.style.width = `${CELL_SIZE}px`;
            cell.style.height = `${CELL_SIZE}px`;
            cell.style.position = "absolute";
            cell.style.top = `${i * CELL_SIZE}px`;
            cell.style.left = `${j * CELL_SIZE}px`;
            
            if (boardState[i][j] === 1) {
              cell.style.backgroundColor = "blue";
            } else {
              cell.style.backgroundColor = "white";
            }
            
            gameBoard.appendChild(cell);
          }
        }
      }
      
      // Update Pac-Man's position
      function updatePacManPosition() {
        const currentCell = boardState[pacMan.y][pacMan.x];
        if (currentCell === 0) {
          boardState[pacMan.y][pacMan.x] = 2;
        }
        
        if (pacMan.direction === "right" && pacMan.x < COLS - 1) {
          if (boardState[pacMan.y][pacMan.x + 1] !== 1) {
            pacMan.x++;
          }
        } else if (pacMan.direction === "left" && pacMan.x > 0) {
          if (boardState[pacMan.y][pacMan.x - 1] !== 1) {
            pacMan.x--;
          }
        } else if (pacMan.direction === "up" && pacMan.y > 0) {
          if (boardState[pacMan.y - 1][pacMan.x] !== 1) {
            pacMan.y--;
          }
        } else if (pacMan.direction === "down" && pacMan.y < ROWS - 1) {
          if (boardState[pacMan.y + 1][pacMan.x] !== 1) {
            pacMan.y++;
          }
        }
        
        if (boardState[pacMan.y][pacMan.x] === 0) {
          boardState[pacMan.y][pacMan.x] = 2;
        }
      }
      
      // Handle key presses for Pac-Man movement
      function handleKeyPress(event) {
        const key = event.key;
        if (key === "ArrowRight") {
          pacMan.direction = "right";
        } else if (key === "ArrowLeft") {
          pacMan.direction = "left";
        } else if (key === "ArrowUp") {
          pacMan.direction = "up";
        } else if (key === "ArrowDown") {
          pacMan.direction = "down";
        }
      }
      
      // Game loop
      function gameLoop() {
        updatePacManPosition();
        renderGameBoard();
      }
      
      // Start the game
      window.addEventListener("keydown", handleKeyPress);
      setInterval(gameLoop, 200);
    </script>
  </body>
</html>