AI game creator

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

No:39469

←

Prev Next

→

Pac-Man
Developer User17653｜Date and time 24/1/28 14:37:30
Build time 8.311 sec｜Game capacity 1.673KB｜

Script

←

Prev　Next

→ 　

Back　

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

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 {
      position: relative;
      width: 400px;
      height: 400px;
      border: 2px solid black;
      margin: 0 auto;
    }
    #pacman {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background-image: url('pacman.png');
      background-size: cover;
      transition: left 0.4s ease, top 0.4s ease;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="pacman"></div>
  </div>

// Set initial position
    var positionX = 0;
    var positionY = 0;
    pacman.style.left = positionX + "px";
    pacman.style.top = positionY + "px";

// Define movement keys
    var arrowKeys = {
      left: 37,
      up: 38,
      right: 39,
      down: 40
    };

// Handle arrow key press events
    document.addEventListener("keydown", function(event) {
      var key = event.keyCode;
      
      if (key === arrowKeys.left) {
        // Move Pac-Man to the left
        positionX -= 40;
        pacman.style.left = positionX + "px";
      } else if (key === arrowKeys.up) {
        // Move Pac-Man upwards
        positionY -= 40;
        pacman.style.top = positionY + "px";
      } else if (key === arrowKeys.right) {
        // Move Pac-Man to the right
        positionX += 40;
        pacman.style.left = positionX + "px";
      } else if (key === arrowKeys.down) {
        // Move Pac-Man downwards
        positionY += 40;
        pacman.style.top = positionY + "px";
      }
    });
  </script>
</body>
</html>