<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Street Racer 2D</title>

<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  overflow:hidden;
  background:#111;
  font-family:Arial,sans-serif;
  touch-action:none;
}
canvas{
  display:block;
  margin:auto;
  background:#222;
}
#controls{
  position:fixed;
  bottom:20px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:80px;
  pointer-events:none;
}
button{
  pointer-events:auto;
  width:80px;
  height:70px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.25);
  color:white;
  font-size:35px;
  font-weight:bold;
}
#start{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:220px;
  height:65px;
  background:#00aaff;
  font-size:24px;
}
</style>
</head>

<body>

<canvas id="game"></canvas>

<button id="start">START RACE 🏁</button>

<div id="controls">
  <button id="left">⬅️</button>
  <button id="right">➡️</button>
</div>

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

let W,H;
function resize(){
  W=Math.min(innerWidth,500);
  H=innerHeight;
  canvas.width=W;
  canvas.height=H;
}
resize();
addEventListener("resize",resize);

let running=false;
let score=0;
let speed=6;
let roadY=0;
let enemies=[];
let coins=[];

const player={
  x:0,
  y:0,
  w:48,
  h:82,
  move:0
};

function reset(){
  player.x=W/2-player.w/2;
  player.y=H-150;
  score=0;
  speed=6;
  roadY=0;
  enemies=[];
  coins=[];
}

function road(){
  // Grass
  ctx.fillStyle="#218c38";
  ctx.fillRect(0,0,W,H);

  // Road
  let roadW=Math.min(W*0.82,390);
  let roadX=(W-roadW)/2;

  ctx.fillStyle="#333";
  ctx.fillRect(roadX,0,roadW,H);

  // Road edges
  ctx.fillStyle="#eee";
  ctx.fillRect(roadX,0,7,H);
  ctx.fillRect(roadX+roadW-7,0,7,H);

  // Lane lines
  ctx.fillStyle="#fff";

  roadY=(roadY+speed)%80;

  for(let y=-80+roadY;y<H;y+=80){
    ctx.fillRect(W/2-4,y,8,45);
  }
}

function drawCar(x,y,w,h,color){
  // Body
  ctx.fillStyle=color;
  ctx.fillRect(x,y,w,h);

  // Windows
  ctx.fillStyle="#9ee7ff";
  ctx.fillRect(x+8,y+10,w-16,22);
  ctx.fillRect(x+8,y+39,w-16,18);

  // Wheels
  ctx.fillStyle="#111";
  ctx.fillRect(x-5,y+12,6,22);
  ctx.fillRect(x+w-1,y+12,6,22);
  ctx.fillRect(x-5,y+h-34,6,22);
  ctx.fillRect(x+w-1,y+h-34,6,22);

  // Lights
  ctx.fillStyle="#fff";
  ctx.fillRect(x+6,y+3,10,5);
  ctx.fillRect(x+w-16,y+3,10,5);
}

function playerCar(){
  drawCar(player.x,player.y,player.w,player.h,"#e63946");
}

function createEnemy(){
  let roadW=Math.min(W*0.82,390);
  let roadX=(W-roadW)/2;

  let lanes=3;
  let lane=Math.floor(Math.random()*lanes);
  let laneW=roadW/lanes;

  enemies.push({
    x:roadX+lane*laneW+laneW/2-24,
    y:-100,
    w:48,
    h:82,
    color:["#1976d2","#ff9800","#9c27b0","#00a884"][Math.floor(Math.random()*4)]
  });
}

function createCoin(){
  let roadW=Math.min(W*0.82,390);
  let roadX=(W-roadW)/2;

  coins.push({
    x:roadX+25+Math.random()*(roadW-50),
    y:-30,
    r:10
  });
}

function collision(a,b){
  return a.x<b.x+b.w &&
         a.x+a.w>b.x &&
         a.y<b.y+b.h &&
         a.y+a.h>b.y;
}

function update(){
  if(!running)return;

  player.x+=player.move*7;

  let roadW=Math.min(W*0.82,390);
  let roadX=(W-roadW)/2;

  if(player.x<roadX+8)player.x=roadX+8;
  if(player.x+player.w>roadX+roadW-8)
    player.x=roadX+roadW-8-player.w;

  if(Math.random()<0.025)
    createEnemy();

  if(Math.random()<0.012)
    createCoin();

  enemies.forEach(e=>{
    e.y+=speed;

    if(collision(player,e)){
      gameOver();
    }
  });

  enemies=enemies.filter(e=>{
    if(e.y>H){
      score+=10;
      return false;
    }
    return true;
  });

  coins.forEach(c=>{
    c.y+=speed;

    let dx=(player.x+player.w/2)-c.x;
    let dy=(player.y+player.h/2)-c.y;

    if(Math.sqrt(dx*dx+dy*dy)<30){
      score+=25;
      c.y=H+100;
    }
  });

  coins=coins.filter(c=>c.y<H+50);

  // धीरे-धीरे speed बढ़ेगी
  speed=6+Math.min(score/500,8);
}

function draw(){
  road();

  coins.forEach(c=>{
    ctx.beginPath();
    ctx.arc(c.x,c.y,c.r,0,Math.PI*2);
    ctx.fillStyle="#ffd700";
    ctx.fill();
    ctx.strokeStyle="#fff";
    ctx.stroke();
  });

  enemies.forEach(e=>{
    drawCar(e.x,e.y,e.w,e.h,e.color);
  });

  playerCar();

  // HUD
  ctx.fillStyle="white";
  ctx.font="bold 20px Arial";
  ctx.fillText("🏆 Score: "+score,15,30);
  ctx.fillText("⚡ Speed: "+Math.floor(speed),15,58);
}

function loop(){
  update();
  draw();
  requestAnimationFrame(loop);
}

function gameOver(){
  running=false;
  document.getElementById("start").style.display="block";
  document.getElementById("start").textContent=
    "GAME OVER 😵  |  "+score+"  |  फिर खेलें";
}

document.getElementById("start").onclick=()=>{
  reset();
  running=true;
  document.getElementById("start").style.display="none";
};

// Mobile controls
document.getElementById("left").addEventListener("touchstart",e=>{
  e.preventDefault();
  player.move=-1;
});
document.getElementById("left").addEventListener("touchend",e=>{
  e.preventDefault();
  player.move=0;
});

document.getElementById("right").addEventListener("touchstart",e=>{
  e.preventDefault();
  player.move=1;
});
document.getElementById("right").addEventListener("touchend",e=>{
  e.preventDefault();
  player.move=0;
});

// Keyboard भी चलेगा
addEventListener("keydown",e=>{
  if(e.key==="ArrowLeft")player.move=-1;
  if(e.key==="ArrowRight")player.move=1;
});

addEventListener("keyup",e=>{
  if(e.key==="ArrowLeft" || e.key==="ArrowRight")
    player.move=0;
});

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

</body>
</html>