Game

<canvas id="game" style="display:block; width:100%; height:400px; background:#87CEEB;"></canvas>
<button id="retry" style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px 40px; font-size:24px; background:orange; border:none; border-radius:10px; cursor:pointer;">TRY AGAIN</button>

<audio id="bgm" src="https://filesamples.com/samples/audio/mp3/sample3.mp3" loop></audio>
<audio id="jump" src="https://www.soundjay.com/mechanical/sounds/mechanical-clunk-3.mp3"></audio>
<audio id="crash" src="https://www.soundjay.com/button/sounds/button-10.mp3"></audio>

<script>
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = 400;

  const retryBtn = document.getElementById('retry');
  const bgm = document.getElementById('bgm');
  const jumpSound = document.getElementById('jump');
  const crashSound = document.getElementById('crash');

  let bikeY = canvas.height - 150;
  let velocityY = 0;
  let gravity = 1;
  let isJumping = false;
  let loopX = canvas.width;
  let score = 0;
  let crashed = false;

  const bike = new Image();
  bike.src = 'https://i.imgur.com/6jRbZNO.png';

  const fireLoop = new Image();
  fireLoop.src = 'https://i.imgur.com/0zYy3jK.png';

  function resetGame() {
    bikeY = canvas.height - 150;
    velocityY = 0;
    isJumping = false;
    loopX = canvas.width;
    crashed = false;
    retryBtn.style.display = 'none';
    score = 0;
    bgm.play();
    animate();
  }

  function drawBike() {
    ctx.drawImage(bike, 100, bikeY, 100, 100);
  }

  function drawFireLoop() {
    ctx.drawImage(fireLoop, loopX, canvas.height - 180, 100, 150);
  }

  function animate() {
    if (crashed) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBike();
    drawFireLoop();

    if (isJumping) {
      velocityY += gravity;
      bikeY += velocityY;
      if (bikeY >= canvas.height - 150) {
        bikeY = canvas.height - 150;
        isJumping = false;
      }
    }

    loopX -= 5;
    if (loopX < -100) {
      loopX = canvas.width + Math.random() * 200;
      score++;
    }

    if (
      loopX < 150 && loopX > 80 &&
      (bikeY > canvas.height - 130 || bikeY < canvas.height - 230)
    ) {
      crashSound.play();
      bgm.pause();
      crashed = true;
      retryBtn.style.display = 'block';
      return;
    }

    requestAnimationFrame(animate);
  }

  window.addEventListener('keydown', (e) => {
    if (e.code === 'Space' && !isJumping && !crashed) {
      isJumping = true;
      velocityY = -20;
      jumpSound.play();
    }
  });

  retryBtn.addEventListener('click', resetGame);
  bgm.volume = 0.5;
  bgm.play();
  animate();
</script>