<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>RACE 2 - ถนนเดือด</title>
<style>
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#101010;font-family:Arial,sans-serif}
#game{position:relative;width:min(100vw,500px);height:100vh;max-height:900px;margin:auto;overflow:hidden;background:#333}
canvas{width:100%;height:100%;display:block}
.ui{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:8px;justify-content:space-between;pointer-events:none;font-weight:bold;text-shadow:2px 2px #000;font-size:16px}
.box{background:#0008;border-radius:10px;padding:7px 10px}.nitro{color:#8df}.coin{color:#ffd21c}
#boost{position:absolute;right:14px;bottom:100px;width:88px;height:88px;border-radius:50%;border:3px solid #8df;background:#0589b888;color:#fff;font-size:18px;font-weight:bold}
#boost:active{transform:scale(.94)}
.controls{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:space-between;padding:0 18px;pointer-events:none}
.ctrl{pointer-events:auto;width:92px;height:68px;border-radius:18px;background:#ffffff25;border:2px solid #ffffff55;color:white;font-size:38px;display:flex;align-items:center;justify-content:center;user-select:none}
.overlay{position:absolute;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.card{padding:25px;width:88%;background:#191919ee;border:1px solid #ffffff22;border-radius:22px;box-shadow:0 10px 40px #000}
h1{font-size:36px;margin:0 0 6px}.sub{color:#ddd;line-height:1.7;margin:8px 0 20px}
button{font-size:20px;font-weight:bold;padding:13px 30px;border:0;border-radius:14px;background:#ffd21c;color:#111;cursor:pointer}
#over{display:none}
</style>
</head>
<body>
<div id="game">
<canvas id="c"></canvas>
<div class="ui">
<div class="box">🏁 <span id="score">0</span> m</div>
<div class="box coin">🪙 <span id="coins">0</span></div>
<div class="box">🏆 <span id="best">0</span></div>
<div class="box nitro">⚡ <span id="nitro">100</span>%</div>
</div>
<button id="boost">⚡<br>NITRO</button>
<div class="controls"><div class="ctrl" id="L">◀</div><div class="ctrl" id="R">▶</div></div>
<div class="overlay" id="menu"><div class="card">
<h1>🏎️ RACE 2</h1><div class="sub">ถนนเดือด • เก็บเหรียญ • ใช้ไนตรัส<br>หลบรถให้ได้นานที่สุด!</div>
<button id="start">เริ่มซิ่ง!</button></div></div>
<div class="overlay" id="over"><div class="card">
<h1>💥 BOOM!</h1><div class="sub">ระยะทาง <b id="final">0</b> เมตร<br>เหรียญ <b id="fcoin">0</b> 🪙</div>
<button id="again">เอาใหม่!</button></div></div>
</div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');cv.width=500;cv.height=900;
const W=500,H=900,road={x:80,w:340},lane=road.w/3;
// ย้ายตัวแปร DOM ขึ้นมาก่อนใช้งาน
const score=document.getElementById('score'),coinsEl=document.getElementById('coins'),nitroEl=document.getElementById('nitro'),bestEl=document.getElementById('best'),menu=document.getElementById('menu'),over=document.getElementById('over'),final=document.getElementById('final'),fcoin=document.getElementById('fcoin'),startBtn=document.getElementById('start'),againBtn=document.getElementById('again');
let p,obs,items,particles,run,last,spawn,dist,coins,nitro,boosting,best=+localStorage.race2best||0,keys={};
bestEl.textContent=best;
function init(){
p={lane:1,x:250,y:770,w:48,h:82};obs=[];items=[];particles=[];
dist=0;coins=0;nitro=100;boosting=false;spawn=0;run=true;last=performance.now();
menu.style.display='none';over.style.display='none';requestAnimationFrame(loop)
}
function car(o){
x.save();x.translate(o.x,o.y);
x.fillStyle='#0006';x.fillRect(-o.w/2+5,-o.h/2+7,o.w,o.h);
x.fillStyle=o.color;x.beginPath();x.roundRect(-o.w/2,-o.h/2,o.w,o.h,10);x.fill();
x.fillStyle=o.player?'#bff':'#222';x.fillRect(-15,-23,30,25);
x.fillStyle='#111';x.fillRect(-o.w/2-4,-25,8,18);x.fillRect(o.w/2-4,-25,8,18);x.fillRect(-o.w/2-4,12,8,18);x.fillRect(o.w/2-4,12,8,18);
if(o.player){x.fillStyle='#fff';x.fillRect(-15,27,10,5);x.fillRect(5,27,10,5)}
x.restore()
}
function roadDraw(offset){
x.fillStyle='#24732b';x.fillRect(0,0,W,H);
x.fillStyle='#555';x.fillRect(road.x,0,road.w,H);
x.fillStyle='#eee';x.fillRect(road.x-6,0,6,H);x.fillRect(road.x+road.w,0,6,H);
x.strokeStyle='#eee';x.lineWidth=5;x.setLineDash([38,34]);x.lineDashOffset=offset;
for(let i=1;i<3;i++){x.beginPath();x.moveTo(road.x+lane*i,0);x.lineTo(road.x+lane*i,H);x.stroke()}x.setLineDash([]);
}
function spawnOne(){
let l=Math.floor(Math.random()*3), type=Math.random();
if(obs.some(o=>o.lane===l&&o.y<170))return;
obs.push({lane:l,x:road.x+lane*l+lane/2,y:-70,w:48,h:82,color:['#e33','#27f','#ff8c00','#a42bd4','#12a88d'][Math.floor(Math.random()*5)],spd:.92+Math.random()*.22});
if(type>.42){items.push({lane:Math.floor(Math.random()*3),x:road.x+lane*Math.floor(Math.random()*3)+lane/2,y:-220-Math.random()*180,type:'coin'})}
}
function hit(a,b){return Math.abs(a.x-b.x)<39&&Math.abs(a.y-b.y)<66}
function loop(t){
if(!run)return;
let dt=Math.min((t-last)/16.67,2);last=t;
let d=(keys.left?-1:0)+(keys.right?1:0);
if(d)p.lane=Math.max(0,Math.min(2,p.lane+d*dt*.13));
let tx=road.x+lane*p.lane+lane/2;p.x+=(tx-p.x)*.2*dt;
boosting=keys.boost&&nitro>0;
let base=5+Math.min(5.8,dist/420);let sp=base*(boosting?1.9:1);
if(boosting){nitro=Math.max(0,nitro-.65*dt);for(let i=0;i<2;i++)particles.push({x:p.x+(Math.random()-.5)*20,y:p.y+45,v:3+Math.random()*3,a:1})}
else nitro=Math.min(100,nitro+.08*dt);
spawn+=dt;if(spawn>Math.max(22,58-dist/45)){spawn=0;spawnOne()}
obs.forEach(o=>o.y+=sp*o.spd*dt);items.forEach(q=>q.y+=sp*dt);
dist+=sp*.035*dt;
for(let i=items.length-1;i>=0;i--){let q=items[i];if(Math.abs(q.x-p.x)<30&&Math.abs(q.y-p.y)<45){coins++;nitro=Math.min(100,nitro+8);items.splice(i,1)}else if(q.y>H+50)items.splice(i,1)}
obs=obs.filter(o=>o.y<H+100);
particles.forEach(q=>{q.y+=q.v*dt;q.a-=.04*dt});particles=particles.filter(q=>q.a>0);
roadDraw(-(t/5)%72);
items.forEach(q=>{x.fillStyle='#ffd21c';x.beginPath();x.arc(q.x,q.y,14,0,7);x.fill();x.fillStyle='#9a6900';x.font='bold 14px Arial';x.textAlign='center';x.fillText('$',q.x,q.y+5)});
obs.forEach(car);
particles.forEach(q=>{x.globalAlpha=q.a;x.fillStyle='#8df';x.fillRect(q.x-3,q.y,6,14)});x.globalAlpha=1;
car({...p,color:'#f4c400',player:true});
score.textContent=Math.floor(dist);coinsEl.textContent=coins;nitroEl.textContent=Math.floor(nitro);
if(obs.some(o=>hit(p,o))){end();return}
requestAnimationFrame(loop)
}
function end(){
run=false;let s=Math.floor(dist);if(s>best){best=s;localStorage.race2best=best;bestEl.textContent=best}
final.textContent=s;fcoin.textContent=coins;over.style.display='flex'
}
function bind(id,key){let e=document.getElementById(id);e.addEventListener('pointerdown',z=>{z.preventDefault();keys[key]=true});['pointerup','pointercancel','pointerleave'].forEach(v=>e.addEventListener(v,z=>{z.preventDefault();keys[key]=false}))}
bind('L','left');bind('R','right');bind('boost','boost');
addEventListener('keydown',e=>{if(e.key==='ArrowLeft'||e.key.toLowerCase()==='a')keys.left=true;if(e.key==='ArrowRight'||e.key.toLowerCase()==='d')keys.right=true;if(e.code==='Space')keys.boost=true});
addEventListener('keyup',e=>{if(e.key==='ArrowLeft'||e.key.toLowerCase()==='a')keys.left=false;if(e.key==='ArrowRight'||e.key.toLowerCase()==='d')keys.right=false;if(e.code==='Space')keys.boost=false});
// ผูกปุ่มเริ่มเกมให้ถูกต้อง
startBtn.onclick=init;
againBtn.onclick=init;
</script>
</body>
</html>
