AI game creator

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

No:42995

139

←

Prev Next

→

Pac-Man
Developer User18878｜Date and time 24/2/13 18:19:34
Build time 9.16 sec｜Game capacity 2.216KB｜

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</title>
  <style>
    #game-board {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 800px;
      background-color: black;
    }

#pacman {
      height: 50px;
      width: 50px;
      background-image: url("pacman.png");
      background-size: cover;
      animation: move 1s linear infinite;
    }

@keyframes move {
      0% { transform: rotate(45deg) }
      25% { transform: rotate(135deg) }
      50% { transform: rotate(225deg) }
      75% { transform: rotate(315deg) }
      100% { transform: rotate(405deg) }
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="pacman"></div>
  </div>

let boardWidth = gameBoard.offsetWidth;
    let boardHeight = gameBoard.offsetHeight;
    let pacmanSpeed = 20;

let pacmanX = boardWidth / 2;
    let pacmanY = boardHeight / 2;

let direction = "";

if (pacmanX < 0) {
        pacmanX = boardWidth - pacman.offsetWidth;
      } else if (pacmanX > boardWidth - pacman.offsetWidth) {
        pacmanX = 0;
      }

if (pacmanY < 0) {
        pacmanY = boardHeight - pacman.offsetHeight;
      } else if (pacmanY > boardHeight - pacman.offsetHeight) {
        pacmanY = 0;
      }

pacman.style.transform = `translate(${pacmanX}px, ${pacmanY}px)`;
    }

setInterval(movePacman, 1000 / 60);
  </script>
</body>
</html>