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

No:43118

←

Prev Next

→

Pac-Man
Developer User19096｜Date and time 24/2/14 9:50:50
Build time 9.193 sec｜Game capacity 2.226KB｜

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: 400px;
      height: 400px;
      border: 2px solid black;
      margin: 0 auto;
    }

.pacman {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url('pacman.png');
      background-size: cover;
      animation-name: move;
      animation-duration: 0.2s;
      animation-iteration-count: infinite;  
    }

@keyframes move {
      0% {
        background-position: 0px 0px;
      }
      100% {
        background-position: -40px 0px;
      }
    }

#up {
      animation-direction: reverse;
    }

#down {
      transform: rotate(180deg);
    }

#right {
      transform: rotate(90deg);
    }

#left {
      transform: rotate(-90deg);
    }

</style>
</head>
<body>
<h1>لعبة باكمان</h1>
<div id="game-board"></div>

document.addEventListener("DOMContentLoaded", function(event) {
  var pacman = document.createElement("div");
  pacman.className = "pacman";
  document.getElementById("game-board").appendChild(pacman);

var startPosX = 180;
  var startPosY = 180;
  pacman.style.left = startPosX + "px";
  pacman.style.top = startPosY + "px";

var currentPositionX = startPosX;
  var currentPositionY = startPosY;

});
</script>
</body>
</html>