Car Racer 3D

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Car Racer 3D</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#101820;color:white;font-family:Arial;text-align:center}
h2{margin:10px}
canvas{display:block;width:100%;max-width:420px;height:auto;margin:auto;background:#333}
button{padding:14px 25px;margin:8px;border:0;border-radius:12px;
background:#00c853;color:white;font-size:18px;font-weight:bold}
#info{padding:8px;font-size:20px}
</style>
</head>
<body>
<h2>🏎️ CAR RACER</h2>
<div id="info">Score: 0</div>
<canvas id="game" width="360" height="560"></canvas>
<div>
<button onclick="move(-1)">⬅ LEFT</button>
<button onclick="move(1)">RIGHT ➡</button>
</div>
<button onclick="restart()">START / RESTART</button>

<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");
let player={x:155,y:450,w:42,h:72};
let enemies=[],score=0,frame=0,running=true;
let roadOffset=0;

function car(x,y,color){
 ctx.fillStyle=color;
 ctx.fillRect(x,y,42,72);
 ctx.fillStyle="#bdeaff";
 ctx.fillRect(x+7,y+9,28,16);
 ctx.fillStyle="#111";
 ctx.fillRect(x-4,y+10,5,17);
 ctx.fillRect(x+41,y+10,5,17);
 ctx.fillRect(x-4,y+47,5,17);
 ctx.fillRect(x+41,y+47,5,17);
 ctx.fillStyle="#fff59d";
 ctx.fillRect(x+5,y+2,8,4);
 ctx.fillRect(x+29,y+2,8,4);
}

function draw(){
 ctx.fillStyle="#25833a";ctx.fillRect(0,0,360,560);
 ctx.fillStyle="#444";ctx.fillRect(40,0,280,560);
 ctx.fillStyle="white";
 for(let y=-40+roadOffset;y<560;y+=100){
  ctx.fillRect(130,y,7,48);
  ctx.fillRect(223,y,7,48);
 }
 roadOffset=(roadOffset+5)%100;
 car(player.x,player.y,"#00bfff");

 for(let e of enemies)car(e.x,e.y,"#ff3030");
}

function update(){
 if(!running)return;
 frame++;
 if(frame%55===0){
  let lanes=[65,159,253];
  enemies.push({x:lanes[Math.floor(Math.random()*3)],y:-80});
 }
 for(let e of enemies)e.y+=4+Math.min(score/300,5);

 for(let e of enemies){
  if(player.x<e.x+42&&player.x+42>e.x&&
     player.y<e.y+72&&player.y+72>e.y){
    running=false;
  }
 }
 enemies=enemies.filter(e=>e.y<600);
 score++;
 document.getElementById("info").textContent=
  running?"Score: "+score:"GAME OVER! Score: "+score;
}

function loop(){
 draw();
 update();
 if(running)requestAnimationFrame(loop);
 else{
  ctx.fillStyle="white";ctx.textAlign="center";
  ctx.font="bold 34px Arial";
  ctx.fillText("GAME OVER",180,270);
 }
}

function move(d){
 if(!running)return;
 player.x=Math.max(45,Math.min(273,player.x+d*47));
}

function restart(){
 player.x=155;enemies=[];score=0;frame=0;
 roadOffset=0;running=true;loop();
}

document.addEventListener("keydown",e=>{
 if(e.key==="ArrowLeft")move(-1);
 if(e.key==="ArrowRight")move(1);
});
loop();
</script>
</body>
</html>