AI game creator

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

No:10509

147

←

Prev Next

→

PAC man
Developer User4556｜Date and time 23/7/31 19:17:06
Build time 44.211 sec｜Game capacity 4.159KB｜

Script

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

To make this code work, you need to have two image files named "emozi_all/pacman.png" and "emozi_chicken.png" in the same directory as the HTML file. The "emozi_all/pacman.png" image should be the picture of Pac-Man, and the "emozi_all/man.png" image should represent the dots. You can copy the above code into an HTML file and open it in a web browser to play the Pac-Man game on your smartphone. Use the arrow keys to move Pac-Man around the game board and try to collect all the dots.

←

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>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid black;
      width: 300px;
      height: 300px;
    }
    
    .cell {
      width: 30px;
      height: 30px;
      background-color: black;
    }
    
    .pacman {
      background-image: url('pacman.png');
      background-size: cover;
    }
    
    .dot {
      background-image: url('dot.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <script>
    var board = [
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "pacman", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"],
      ["dot", "dot", "dot", "dot", "dot", "dot", "dot", "dot"]
    ];
    
    var pacmanRow = 1;
    var pacmanColumn = 1;
    
    window.addEventListener("keydown", function(event) {
      switch(event.key) {
        case "ArrowUp":
          movePacman(-1, 0);
          break;
        case "ArrowDown":
          movePacman(1, 0);
          break;
        case "ArrowLeft":
          movePacman(0, -1);
          break;
        case "ArrowRight":
          movePacman(0, 1);
          break;
      }
    });
    
    function movePacman(rowOffset, columnOffset) {
      var newRow = pacmanRow + rowOffset;
      var newColumn = pacmanColumn + columnOffset;
      
      if (isValidMove(newRow, newColumn)) {
        clearPreviousPosition();
        
        pacmanRow = newRow;
        pacmanColumn = newColumn;
        
        updateBoard();
      }
    }
    
    function isValidMove(row, column) {
      return (row >= 0 && row < board.length &&
              column >= 0 && column < board[0].length &&
              board[row][column] !== "wall");
    }
    
    function clearPreviousPosition() {
      board[pacmanRow][pacmanColumn] = "dot";
    }
    
    function updateBoard() {
      board[pacmanRow][pacmanColumn] = "pacman";
      
      var gameBoard = document.getElementById("game-board");
      gameBoard.innerHTML = "";
      
      for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length; j++) {
          var cell = document.createElement("div");
          cell.className = "cell";
          
          if (board[i][j] === "dot") {
            cell.className += " dot";
          }
          else if (board[i][j] === "pacman") {
            cell.className += " pacman";
          }
          
          gameBoard.appendChild(cell);
        }
      }
    }
    
    function initializeGame() {
      var gameBoard = document.getElementById("game-board");
      gameBoard.innerHTML = "";
      
      for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length; j++) {
          var cell = document.createElement("div");
          cell.className = "cell";
          
          if (board[i][j] === "dot") {
            cell.className += " dot";
          }
          else if (board[i][j] === "pacman") {
            cell.className += " pacman";
          }
          
          gameBoard.appendChild(cell);
        }
      }
    }
    
    initializeGame();
  </script>
  
  <div id="game-board"></div>
</body>
</html>
```

To make this code work, you need to have two image files named "pacman.png" and "dot.png" in the same directory as the HTML file. The "pacman.png" image should be the picture of Pac-Man, and the "dot.png" image should represent the dots.

You can copy the above code into an HTML file and open it in a web browser to play the Pac-Man game on your smartphone. Use the arrow keys to move Pac-Man around the game board and try to collect all the dots.