const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

canvas.width = innerWidth;
canvas.height = innerHeight;

const ctx = canvas.getContext("2d");

let player = { x: 200, y: 400, w: 50, h: 50 };
let enemy = { x: 200, y: 0, w: 50, h: 50 };

onkeydown = (e) => {
  if (e.key === "ArrowLeft") player.x -= 20;
  if (e.key === "ArrowRight") player.x += 20;
};

function game() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, player.w, player.h);

  ctx.fillStyle = "blue";
  ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);

  enemy.y += 5;

  if (
    player.x < enemy.x + enemy.w &&
    player.x + player.w > enemy.x &&
    player.y < enemy.y + enemy.h &&
    player.y + player.h > enemy.y
  ) {
    alert("CRASH!");
    enemy.y = 0;
    enemy.x = Math.random() * 500;
  }

  requestAnimationFrame(game);
}

game();