Drone Racer ???쒕줎 ?덉씠??/title> <style> :root{ --bg:#0B0F19; --panel:#141A26; --line:#2B3445; --blue:#3B82F6; --cyan:#22d3ee; --gold:#fbbf24; --green:#22C55E; --text:#E5EAF2; --muted:#94A3B8; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;height:100%;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif; overflow:hidden;user-select:none;-webkit-user-select:none;} #app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;} header{width:100%;max-width:640px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:8px;} .title{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;} .title .em{font-size:20px;} .stats{display:flex;gap:7px;} .pill{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 11px; font-size:13px;font-weight:700;text-align:center;line-height:1.2;min-width:58px;} .pill .lab{color:var(--muted);font-weight:600;font-size:10px;display:block;letter-spacing:.5px;} .pill.gold{color:var(--gold);border-color:rgba(251,191,36,.4);} .pill.cyan{color:var(--cyan);} #stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:4px 12px;} canvas{background:#080c14;border:1px solid var(--line);border-radius:14px;touch-action:none;max-width:100%;max-height:100%;} footer{width:100%;max-width:640px;padding:8px 16px 14px;display:flex;flex-direction:column;gap:10px;align-items:center;} .pad{display:flex;gap:10px;align-items:center;justify-content:center;width:100%;} .pad button{flex:1;max-width:120px;font-size:22px;padding:14px 0;border-radius:14px;border:1px solid var(--line); background:var(--panel);color:var(--cyan);font-weight:800;cursor:pointer;} .pad button.thrust{color:var(--gold);max-width:160px;} .pad button:active{transform:scale(.95);background:#1c2533;} .hint{color:var(--muted);font-size:12px;text-align:center;line-height:1.5;} .overlay{position:fixed;inset:0;background:rgba(8,11,18,.88);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .25s;} .overlay.show{opacity:1;pointer-events:auto;} .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px;text-align:center;max-width:340px;width:86%;box-shadow:0 20px 60px rgba(0,0,0,.5);} .card h2{margin:0 0 6px;font-size:23px;} .card p{margin:5px 0;color:var(--muted);font-size:14px;line-height:1.6;} .card .big{color:var(--cyan);font-weight:800;font-size:20px;margin:8px 0 2px;} .card .rp{color:var(--gold);font-weight:800;font-size:18px;margin:12px 0;} .card button{margin-top:12px;width:100%;font-size:15px;padding:12px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--blue),#2563eb);color:#fff;font-weight:700;cursor:pointer;} </style> </head> <body> <div id="app"> <header> <div class="title"><span class="em">?뢾</span> Drone Racer</div> <div class="stats"> <div class="pill cyan"><span class="lab">LAP</span><span id="lap">1/3</span></div> <div class="pill"><span class="lab">TIME</span><span id="time">0.0</span></div> <div class="pill gold"><span class="lab">BEST LAP</span><span id="best">??/span></div> </div> </header> <div id="stage"><canvas id="cv"></canvas></div> <footer> <div class="pad"> <button id="left">?</button> <button id="thrust" class="thrust">??遺?ㅽ듃</button> <button id="right">??/button> </div> <div class="hint">諛⑺뼢??????議고뼢, ??異붿쭊 쨌 ?몃옓??踰쀬뼱?섎㈃媛먯냽! 3諛뷀?理쒕떒 湲곕줉???꾩쟾</div> </footer> </div> <div class="overlay" id="ov"> <div class="card"> <h2 id="ovtitle">?뢾 ?꾩＜!</h2> <p id="ovdesc">3諛뷀??꾩＜</p> <div class="big" id="ovtime">0.00s</div> <p id="ovbest"></p> <div class="rp" id="ovrp">+0 RP</div> <button id="ovbtn">?ㅼ떆 ?щ━湲?/button> </div> </div> <script> (function(){ "use strict"; const cv=document.getElementById('cv'), ctx=cv.getContext('2d'); const $=id=>document.getElementById(id); const DPR=Math.min(window.devicePixelRatio||1,2); const LAPS=3; // ---- audio ---- let AC=null; function tone(f,d,t,v){try{AC=AC||new(window.AudioContext||window.webkitAudioContext)(); const o=AC.createOscillator(),g=AC.createGain();o.type=t||'sine';o.frequency.value=f; g.gain.value=v||0.04;o.connect(g);g.connect(AC.destination);o.start(); g.gain.exponentialRampToValueAtTime(0.0001,AC.currentTime+(d||0.1));o.stop(AC.currentTime+(d||0.1));}catch(e){}} const sLap=()=>{tone(660,0.1,'square',0.05);setTimeout(()=>tone(880,0.12,'square',0.05),90);}; const sFin=()=>{[523,659,784,1046].forEach((f,i)=>setTimeout(()=>tone(f,0.15,'sine',0.06),i*110));}; // ---- track (closed wavy loop centerline) ---- const N=260; let TRACK=[]; // {x,y} let trackW=58; let bounds={minx:0,miny:0,maxx:1,maxy:1}; function buildTrack(){ TRACK=[]; const cx=0,cy=0, A=320, B=210; for(let i=0;i<N;i++){ const t=i/N*Math.PI*2; const wob=1+0.16*Math.sin(3*t)+0.09*Math.cos(2*t); const x=cx+Math.cos(t)*A*wob; const y=cy+Math.sin(t)*B*(1+0.18*Math.sin(2*t+1)); TRACK.push({x,y}); } let minx=1e9,miny=1e9,maxx=-1e9,maxy=-1e9; for(const p of TRACK){minx=Math.min(minx,p.x);miny=Math.min(miny,p.y);maxx=Math.max(maxx,p.x);maxy=Math.max(maxy,p.y);} bounds={minx:minx-trackW,miny:miny-trackW,maxx:maxx+trackW,maxy:maxy+trackW}; } // world->screen transform (fit track in canvas) let sc=1, offx=0, offy=0; function computeFit(W,H){ const bw=bounds.maxx-bounds.minx, bh=bounds.maxy-bounds.miny; sc=Math.min(W/bw, H/bh)*0.96; offx=W/2 - (bounds.minx+bw/2)*sc; offy=H/2 - (bounds.miny+bh/2)*sc; } const S=(x,y)=>({x:x*sc+offx, y:y*sc+offy}); // ---- drone state ---- let drone={x:0,y:0,a:0,v:0}; let keys={l:false,r:false,t:false}; let progress=0, lastIdx=0, lap=0, started=false, finished=false; let startT=0, nowT=0, lapStartT=0, bestLap=null, lapTimes=[]; try{const b=localStorage.getItem('droneracer_best'); if(b)bestLap=+b;}catch(e){} function nearestIdx(x,y){ let bi=0,bd=1e18; for(let i=0;i<N;i++){const dx=TRACK[i].x-x,dy=TRACK[i].y-y;const d=dx*dx+dy*dy;if(d<bd){bd=d;bi=i;}} return {i:bi,dist:Math.sqrt(bd)}; } function reset(){ buildTrack(); // place drone at start (index 0), heading toward index 1 const p0=TRACK[0], p1=TRACK[1]; drone.x=p0.x; drone.y=p0.y; drone.a=Math.atan2(p1.y-p0.y,p1.x-p0.x); drone.v=0; progress=0; lastIdx=0; lap=0; started=false; finished=false; nowT=0; startT=0; lapStartT=0; lapTimes=[]; $('lap').textContent='1/'+LAPS; $('time').textContent='0.0'; $('best').textContent= bestLap!=null? bestLap.toFixed(2):'??; $('ov').classList.remove('show'); resize(); } function resize(){ const stage=$('stage'); const W=Math.min(stage.clientWidth-4, 760); const H=stage.clientHeight-4; cv.style.width=W+'px';cv.style.height=H+'px'; cv.width=W*DPR;cv.height=H*DPR;ctx.setTransform(DPR,0,0,DPR,0,0); computeFit(W,H); } // ---- loop ---- let last=0; function frame(ts){ if(!last)last=ts; let dt=(ts-last)/1000; last=ts; if(dt>0.05)dt=0.05; if(!finished) update(dt); render(); requestAnimationFrame(frame); } function update(dt){ const ACC=520, VMAX=300, VMAX_OFF=120, TURN=3.0; // steering (scaled slightly by speed for control) const steer=(keys.r?1:0)-(keys.l?1:0); drone.a += steer*TURN*dt*(0.45+0.55*Math.min(1,Math.abs(drone.v)/120)); // thrust if(keys.t){ drone.v += ACC*dt; if(!started){started=true; startT=nowT; lapStartT=nowT;} } // off-track check const ni=nearestIdx(drone.x,drone.y); const off= ni.dist > trackW*0.5; const vmax= off?VMAX_OFF:VMAX; if(drone.v>vmax) drone.v += (vmax-drone.v)*Math.min(1,dt* (off?6:2)); drone.v *= off?0.965:0.992; if(drone.v<0)drone.v=0; // integrate drone.x += Math.cos(drone.a)*drone.v*dt; drone.y += Math.sin(drone.a)*drone.v*dt; // timer if(started){ nowT+=dt; $('time').textContent=(nowT-startT).toFixed(1); } // progress / laps let idx=ni.i; let d=idx-lastIdx; if(d>N/2)d-=N; if(d<-N/2)d+=N; if(Math.abs(d)<N/4) progress+=d; // ignore teleport-like jumps lastIdx=idx; if(started && progress >= (lap+1)*N){ lap++; const lapTime=(nowT-lapStartT); lapTimes.push(lapTime); lapStartT=nowT; if(bestLap==null||lapTime<bestLap){bestLap=lapTime; try{localStorage.setItem('droneracer_best',String(bestLap));}catch(e){} $('best').textContent=bestLap.toFixed(2);} if(lap>=LAPS){ finish(); return; } $('lap').textContent=(lap+1)+'/'+LAPS; sLap(); } } function finish(){ finished=true; sFin(); const total=nowT-startT; const rp=Math.max(5,Math.min(50, Math.round(80 - total) )); // faster = more, capped try{window.parent&&window.parent.postMessage({type:'game_result',game:'drone-racer',score:Math.round(total*100),rp:rp},'*');}catch(e){} $('ovtitle').textContent='?뢾 ?꾩＜!'; $('ovdesc').textContent=LAPS+'諛뷀??꾩＜ 쨌 踰좎뒪?몃옪 '+(bestLap!=null?bestLap.toFixed(2)+'s':'??); $('ovtime').textContent=total.toFixed(2)+'s'; $('ovbest').textContent='?? '+lapTimes.map(t=>t.toFixed(2)).join(' / '); $('ovrp').textContent='+'+rp+' RP'; setTimeout(()=>$('ov').classList.add('show'),300); } // ---- render ---- function render(){ ctx.clearRect(0,0,cv.width,cv.height); // road (thick stroke) ctx.lineJoin='round'; ctx.lineCap='round'; ctx.beginPath(); for(let i=0;i<=N;i++){const p=TRACK[i%N];const s=S(p.x,p.y);i?ctx.lineTo(s.x,s.y):ctx.moveTo(s.x,s.y);} ctx.strokeStyle='#1a2230'; ctx.lineWidth=trackW*sc; ctx.stroke(); ctx.strokeStyle='#222d3e'; ctx.lineWidth=trackW*sc-6*sc; ctx.stroke(); // center dashed ctx.setLineDash([10*sc,12*sc]); ctx.strokeStyle='rgba(148,163,184,.35)'; ctx.lineWidth=2; ctx.beginPath(); for(let i=0;i<=N;i++){const p=TRACK[i%N];const s=S(p.x,p.y);i?ctx.lineTo(s.x,s.y):ctx.moveTo(s.x,s.y);} ctx.stroke(); ctx.setLineDash([]); // start/finish line drawStartLine(); // drone drawDrone(); } function drawStartLine(){ const p=TRACK[0], pN=TRACK[1]; const ang=Math.atan2(pN.y-p.y,pN.x-p.x)+Math.PI/2; const hw=trackW*0.5; const a=S(p.x+Math.cos(ang)*hw, p.y+Math.sin(ang)*hw); const b=S(p.x-Math.cos(ang)*hw, p.y-Math.sin(ang)*hw); ctx.strokeStyle='#e5eaf2'; ctx.lineWidth=4; ctx.setLineDash([6,6]); ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();ctx.setLineDash([]); } function drawDrone(){ const s=S(drone.x,drone.y); ctx.save(); ctx.translate(s.x,s.y); ctx.rotate(drone.a); const r=11; // glow trail ctx.shadowColor='#22d3ee'; ctx.shadowBlur=14; ctx.fillStyle='#22d3ee'; ctx.beginPath(); ctx.moveTo(r,0); ctx.lineTo(-r*0.8,r*0.7); ctx.lineTo(-r*0.4,0); ctx.lineTo(-r*0.8,-r*0.7); ctx.closePath(); ctx.fill(); ctx.shadowBlur=0; ctx.fillStyle='#0B0F19'; ctx.beginPath(); ctx.arc(0,0,r*0.28,0,7); ctx.fill(); ctx.restore(); } // ---- input ---- function bindHold(el,prop){ const on=e=>{e.preventDefault();keys[prop]=true;}; const off=e=>{e.preventDefault();keys[prop]=false;}; el.addEventListener('mousedown',on);el.addEventListener('mouseup',off);el.addEventListener('mouseleave',off); el.addEventListener('touchstart',on,{passive:false});el.addEventListener('touchend',off,{passive:false}); } bindHold($('left'),'l'); bindHold($('right'),'r'); bindHold($('thrust'),'t'); window.addEventListener('keydown',e=>{ if(e.key==='ArrowLeft'){keys.l=true;e.preventDefault();} if(e.key==='ArrowRight'){keys.r=true;e.preventDefault();} if(e.key==='ArrowUp'||e.key===' '){keys.t=true;e.preventDefault();} }); window.addEventListener('keyup',e=>{ if(e.key==='ArrowLeft')keys.l=false; if(e.key==='ArrowRight')keys.r=false; if(e.key==='ArrowUp'||e.key===' ')keys.t=false; }); $('ovbtn').addEventListener('click',()=>{reset();}); window.addEventListener('resize',()=>{resize();}); reset(); requestAnimationFrame(frame); })(); </script> </body> </html>