AI game creator

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

No:47558

←

Prev Next

→

Pac-Man
Developer User20527｜Date and time 24/2/28 12:51:40
Build time 6.243 sec｜Game capacity 1.248KB｜

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 {
      width: 240px;
      height: 320px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  
  <script>
    const gameBoard = document.getElementById("game");
    
    const player = {
      x: 120,
      y: 160
    };
    
    function drawPlayer() {
      gameBoard.innerHTML = `<img src="pacman.png" style="position: absolute; left: ${player.x}px; top: ${player.y}px;" />`;
    }
    
    function movePlayer(direction) {
      if (direction === "up") {
        player.y -= 10;
      } else if (direction === "down") {
        player.y += 10;
      } else if (direction === "left") {
        player.x -= 10;
      } else if (direction === "right") {
        player.x += 10;
      }
    }
    
    drawPlayer();
    
    document.addEventListener("keydown", event => {
      if (event.key === "ArrowUp") {
        movePlayer("up");
      } else if (event.key === "ArrowDown") {
        movePlayer("down");
      } else if (event.key === "ArrowLeft") {
        movePlayer("left");
      } else if (event.key === "ArrowRight") {
        movePlayer("right");
      }
      
      drawPlayer();
    });
  </script>
</body>
</html>