Dodge Game

by RapidKoala93

82 lines1.3 KB

<!DOCTYPE html>
<html>
<head>
  <title>Dodge Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
    }

    #player {
      width: 50px;
      height: 50px;
      background: cyan;
      position: absolute;
      bottom: 20px;
      left: 175px;
    }

    .enemy {
      width: 40px;
      height: 40px;
      background: red;
      position: absolute;
      top: 0;
    }
  </style>
</head>
<body>

<div id="player"></div>

<script>
let player = document.getElementById("player");
let x = 175;

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") x -= 20;
  if (e.key === "ArrowRight") x += 20;

  player.style.left = x + "px";
});

function createEnemy() {
  let enemy = document.createElement("div");
  enemy.classList.add("enemy");

  let ex = Math.random() * 360;
  enemy.style.left = ex + "px";

  document.body.appendChild(enemy);

  let y = 0;

  let fall = setInterval(() => {
    y += 5;
    enemy.style.top = y + "px";

    let px = x;

    if (
      y > window.innerHeight - 80 &&
      ex < px + 50 &&
      ex + 40 > px
    ) {
      alert("Game Over!");
      location.reload();
    }

    if (y > window.innerHeight) {
      enemy.remove();
      clearInterval(fall);
    }
  }, 30);
}

setInterval(createEnemy, 1000);
</script>

</body>
</html>

Game Source: Dodge Game

Creator: RapidKoala93

Libraries: none

Complexity: moderate (82 lines, 1.3 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: dodge-game-rapidkoala93" to link back to the original. Then publish at arcadelab.ai/publish.