<!doctype html>
<title>لعبة سباق لمس — نسخة هاتف</title> <style> body,html{margin:0;padding:0;height:100%;background:#021;overflow:hidden;} canvas{display:block;width:100%;height:100%;} #ui{position:fixed;top:10px;left:10px;background:rgba(0,0,0,0.45);padding:8px 12px;border-radius:8px;color:#fff;font:14px sans-serif;z-index:20} #controls{position:fixed;bottom:10px;right:10px;display:flex;flex-direction:column;gap:10px;z-index:30} .btn{width:72px;height:72px;border-radius:14px;background:rgba(255,255,255,0.08);color:#fff;font-size:20px;font-weight:bold;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:none;} .btn:active{background:rgba(255,255,255,0.2);} #joy{position:fixed;bottom:10px;left:10px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;z-index:30} #stick{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15);} #msg{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);padding:6px 12px;border-radius:8px;color:#fff;font:13px sans-serif;z-index:40} </style>
سرعة: 0 km/h
لفة: 0/3
لفة: 0/3
اسحب العصا للاتجاه 🚗
▲ تسريع ▼ فرملة — HB = هاند بريك
▲ تسريع ▼ فرملة — HB = هاند بريك
▲
▼
HB
TURBO
⟲
<script>
const cv=document.getElementById("c"),ctx=cv.getContext("2d");
let W=innerWidth,H=innerHeight;cv.width=W;cv.height=H;
window.onresize=()=>{W=innerWidth;H=innerHeight;cv.width=W;cv.height=H;};
const keys={};
function bindBtn(id,key){const b=document.getElementById(id);b.ontouchstart=e=>(keys[key]=true,e.preventDefault());b.ontouchend=e=>(keys[key]=false);}
bindBtn("btnUp","ArrowUp");bindBtn("btnDown","ArrowDown");bindBtn("btnHB","Space");bindBtn("btnTurbo","Turbo");bindBtn("btnRestart","Restart");
// joystick
const joy=document.getElementById("joy"),stick=document.getElementById("stick");
let joyAct=false,joyDir={x:0,y:0},jRect;
function updRect(){jRect=joy.getBoundingClientRect();}
updRect();window.addEventListener("resize",updRect);
joy.ontouchstart=e=>{joyAct=true;handle(e.touches[0]);};
joy.ontouchmove=e=>{if(joyAct)handle(e.touches[0]);};
joy.ontouchend=e=>{joyAct=false;joyDir={x:0,y:0};stick.style.transform="translate(0,0)";keys["ArrowLeft"]=keys["ArrowRight"]=false;};
function handle(t){const dx=t.clientX-(jRect.left+jRect.width/2),dy=t.clientY-(jRect.top+jRect.height/2);
const nx=Math.max(-1,Math.min(1,dx/(jRect.width/2))),ny=Math.max(-1,Math.min(1,dy/(jRect.height/2)));
stick.style.transform=`translate(${nx*40}px,${ny*40}px)`;keys["ArrowLeft"]=nx<-0.3;keys["ArrowRight"]=nx>0.3;keys["ArrowUp"]=ny<-0.3;keys["ArrowDown"]=ny>0.3;}
function makeCar(x,y,c){return{x,y,vx:0,vy:0,a:-Math.PI/2,col:c,lap:0};}
const player=makeCar(W/2,H*0.7,"#4cd137");
let last=performance.now();
function physics(car,dt){let spd=Math.hypot(car.vx,car.vy),ang=Math.atan2(car.vy,car.vx);
let steer=(keys["ArrowLeft"]?-1:0)+(keys["ArrowRight"]?1:0);
let acc=(keys["ArrowUp"]?0.2:0)-(keys["ArrowDown"]?0.1:0);if(keys["Turbo"])acc+=0.3;
spd+=acc*60*dt;spd=Math.max(0,Math.min(12,spd));
car.a+=steer*0.05*spd*dt;car.vx=Math.cos(car.a)*spd;car.vy=Math.sin(car.a)*spd;car.x+=car.vx;car.y+=car.vy;}
function