Sayan Jump Game

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayan Jump Game</title>
<style>
*{box-sizing:border-box}
body{
  margin:0;background:#10152d;color:white;
  font-family:Arial,sans-serif;text-align:center;
}
h1{color:#ffd54a}
canvas{
  display:block;width:94%;max-width:500px;
  margin:12px auto;background:#202d52;
  border:3px solid #ffd54a;border-radius:12px;
  touch-action:manipulation;
}
button{
  padding:14px 25px;border:0;border-radius:12px;
  background:#ffd54a;color:#111;font-size:18px;
  font-weight:bold;margin:8px;
}
p{font-size:17px}
</style>
</head>
<body>
<h1>🎮 SAYAN JUMP</h1>
<p>স্কোর: <span id="score">0</span></p>
<canvas id="game" width="360" height="500"></canvas>
<button id="jump">⬆ JUMP</button>
<button id="restart">আবার খেলো</button>
<p>বাধা এড়াও এবং নিজের রেকর্ড ভাঙো!</p>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");
const scoreText=document.getElementById("score");

let player,obstacles,score,frame,over;

function reset(){
  player={x:55,y:410,w:28,h:35,vy:0};
  obstacles=[];
  score=0;frame=0;over=false;
  scoreText.textContent=0;
}
function jump(){
  if(over){reset();return}
  if(player.y>=410)player.vy=-12;
}
document.getElementById("jump").onclick=jump;
c.addEventListener("pointerdown",jump);
document.getElementById("restart").onclick=reset;

function loop(){
  ctx.clearRect(0,0,360,500);

  ctx.fillStyle="#182343";
  ctx.fillRect(0,0,360,500);

  ctx.fillStyle="#283c64";
  for(let i=0;i<360;i+=40){
    ctx.fillRect(i,0,2,420);
  }

  ctx.fillStyle="#56db8a";
  ctx.fillRect(0,445,360,55);

  if(!over){
    frame++;
    player.vy+=0.55;
    player.y+=player.vy;
    if(player.y>410){
      player.y=410;player.vy=0;
    }

    if(frame%75===0){
      obstacles.push({x:360,y:410,w:25,h:35});
    }

    obstacles.forEach(o=>o.x-=4);

    obstacles=obstacles.filter(o=>o.x+o.w>0);

    for(const o of obstacles){
      if(player.x<o.x+o.w &&
         player.x+player.w>o.x &&
         player.y<o.y+o.h &&
         player.y+player.h>o.y){
        over=true;
      }
    }

    if(frame%8===0){
      score++;
      scoreText.textContent=score;
    }
  }

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

  ctx.fillStyle="#ff6464";
  obstacles.forEach(o=>{
    ctx.fillRect(o.x,o.y,o.w,o.h);
  });

  if(over){
    ctx.fillStyle="white";
    ctx.textAlign="center";
    ctx.font="bold 28px Arial";
    ctx.fillText("GAME OVER",180,220);
    ctx.font="18px Arial";
    ctx.fillText("আবার খেলতে Restart চাপো",180,255);
  }

  requestAnimationFrame(loop);
}

reset();
loop();
</script>
</body>
</html>