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

No:52645

170

←

Prev Next

→

A Pac-Man game where you must find chicken wings t..ALL
Developer User22074｜Date and time 24/3/23 13:13:38
Build time 8.231 sec｜Game capacity 1.741KB｜

Script

Chicken Wing Pac-Man

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Chicken Wing Pac-Man</title>
<style>
  #game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    background-color: blue;
    position: relative;
  }
  .player {
    width: 20px;
    height: 20px;
    background-color: yellow;
    position: absolute;
  }
  .chicken-wing {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
  }
</style>
</head>
<body>
  <h1>Chicken Wing Pac-Man</h1>
  <div id="game-board"></div>
  
  <script>
    const gameBoard = document.getElementById("game-board");
    const player = document.createElement("div");
    player.classList.add("player");
    gameBoard.appendChild(player);
    
    const chickenWing = document.createElement("div");
    chickenWing.classList.add("chicken-wing");
    gameBoard.appendChild(chickenWing);
    
    let playerX = 0;
    let playerY = 0;
    
    function movePlayer(direction) {
      switch(direction) {
        case "ArrowUp":
          playerY -= 10;
          break;
        case "ArrowDown":
          playerY += 10;
          break;
        case "ArrowLeft":
          playerX -= 10;
          break;
        case "ArrowRight":
          playerX += 10;
          break;
      }
      player.style.left = playerX + "px";
      player.style.top = playerY + "px";
      
      checkCollision();
    }
    
    function checkCollision() {
      if(playerX === chickenWing.offsetLeft && playerY === chickenWing.offsetTop) {
        chickenWing.style.left = Math.random()*380 + "px";
        chickenWing.style.top = Math.random()*380 + "px";
      }
    }
    
    window.addEventListener("keydown", (event) => {
      movePlayer(event.key);
    });
  </script>
</body>
</html>