@joaobarrosfranca · 8/12/2026, 3:10:54 PM
Diferença em relação à v2.
<!doctype html>-<html lang="pt-BR">+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>Neon Drift</title><style>*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#070817;color:white;font-family:system-ui,sans-serif;touch-action:none}#game{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0,#3a237b,#11132e 48%,#070817)}#stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:27px 39px;opacity:.35;animation:stars 4s linear infinite}@keyframes stars{to{background-position:0 39px}}#road{position:absolute;inset:0 9%;border-left:1px solid #9388ff55;border-right:1px solid #9388ff55;background:linear-gradient(90deg,transparent 33%,#a798ff33 33.2%,#a798ff33 33.7%,transparent 34%,transparent 66%,#a798ff33 66.2%,#a798ff33 66.7%,transparent 67%)}#hud{position:absolute;inset:0 0 auto;z-index:4;padding:22px 20px;display:flex;justify-content:space-between;text-shadow:0 2px 7px #000}.tag{font-size:10px;letter-spacing:1.7px;font-weight:800;color:#b7c3ff}.number{font-size:30px;font-weight:900;line-height:1}.right{text-align:right}#ship{position:absolute;z-index:3;bottom:64px;width:48px;height:62px;border-radius:23px 23px 13px 13px;background:linear-gradient(135deg,#fff,#53f0ff 38%,#5c57ff);box-shadow:0 0 16px #4fefff,0 0 36px #7250ff;transition:left .12s ease}#ship:before{content:"";position:absolute;top:11px;left:15px;width:17px;height:17px;border-radius:50%;background:#142052;box-shadow:0 0 9px #61fbff}#ship:after{content:"";position:absolute;bottom:-5px;left:9px;width:30px;height:9px;border-radius:50%;background:#ff5bd7;filter:blur(3px)}.block,.orb{position:absolute;z-index:2}.block{width:49px;height:49px;border-radius:13px;background:linear-gradient(135deg,#ff9a7d,#ed256d);box-shadow:0 0 16px #ff3370}.block:after{content:"×";display:grid;place-items:center;height:100%;font-size:38px;color:#fff9}.orb{width:27px;height:27px;border-radius:50%;background:#ffff98;box-shadow:0 0 12px #fff16b,0 0 30px #fff16b;animation:pulse .7s alternate infinite}@keyframes pulse{to{transform:scale(1.2)}}#screen{position:absolute;z-index:9;inset:0;display:grid;place-items:center;padding:28px;text-align:center;background:#070817d9}#card{max-width:300px}.logo{font-size:14px;letter-spacing:5px;font-weight:900;color:#74f6ff}.title{font-size:50px;font-weight:950;line-height:.92;letter-spacing:-2px;margin:13px 0 17px;background:linear-gradient(135deg,#fff,#829dff 55%,#ff74d9);-webkit-background-clip:text;color:transparent}.copy{color:#d3d8fb;font-size:16px;line-height:1.5;margin-bottom:25px}button{cursor:pointer;border:0;border-radius:999px;padding:16px 30px;background:linear-gradient(90deg,#5c5cff,#ed50b9);color:#fff;font-weight:900;font-size:15px;letter-spacing:.5px;box-shadow:0 8px 27px #785dff77}button:active{transform:scale(.96)}.hint{font-size:12px;color:#abb4df;margin-top:18px}</style></head>-<body><main id="game"><div id="stars"></div><div id="road"></div><div id="hud"><div><div class="tag">PONTOS</div><div id="score" class="number">0</div></div><div class="right"><div class="tag">RECORDE</div><div id="best" class="number">0</div></div></div><div id="ship"></div><section id="screen"><div id="card"><div class="logo">NEON DRIFT</div><div class="title">CORRA<br>PELA LUZ</div><div id="copy" class="copy">Desvie dos blocos rosas e colete energia.<br>No desktop, use ← → ou A / D.</div><button id="play" type="button">COMEÇAR</button><div class="hint">Arraste para os lados no celular</div></div></section></main>+<body><main id="game"><div id="stars"></div><div id="road"></div><div id="hud"><div><div class="tag">SCORE</div><div id="score" class="number">0</div></div><div class="right"><div class="tag">BEST</div><div id="best" class="number">0</div></div></div><div id="ship"></div><section id="screen"><div id="card"><div class="logo">NEON DRIFT</div><div class="title">CHASE<br>THE LIGHT</div><div id="copy" class="copy">Dodge the pink blocks and collect energy.<br>On desktop, use ← → or A / D.</div><button id="play" type="button">START GAME</button><div class="hint">Swipe left or right on mobile</div></div></section></main><script>(function(){var game=document.getElementById("game"),ship=document.getElementById("ship"),screen=document.getElementById("screen"),play=document.getElementById("play"),scoreEl=document.getElementById("score"),bestEl=document.getElementById("best"),copy=document.getElementById("copy");var lanes=[22,50,78],lane=1,score=0,best=0,running=false,things=[],lastTime=0,nextSpawn=0,startX=0;function setShip(){ship.style.left="calc("+lanes[lane]+"% - 24px)"}setShip();bestEl.textContent=best;function removeAll(){things.forEach(function(x){x.el.remove()});things=[]}function addThing(){var isOrb=Math.random()<.28,el=document.createElement("div"),x={el:el,lane:Math.floor(Math.random()*3),y:-60,orb:isOrb};el.className=isOrb?"orb":"block";el.style.left="calc("+lanes[x.lane]+"% - "+(isOrb?"13.5":"24.5")+"px)";el.style.top=x.y+"px";game.appendChild(el);things.push(x)}function hit(a,b){return a.left<b.right&&a.right>b.left&&a.top<b.bottom&&a.bottom>b.top}-function finish(){running=false;if(score>best){best=score;bestEl.textContent=best}copy.innerHTML="Sua pontuação: <b>"+score+"</b><br>Use as setas ou A / D para tentar de novo.";play.textContent="JOGAR DE NOVO";screen.style.display="grid";removeAll()}+function finish(){running=false;if(score>best){best=score;bestEl.textContent=best}copy.innerHTML="Your score: <b>"+score+"</b><br>Use the arrow keys or A / D to try again.";play.textContent="PLAY AGAIN";screen.style.display="grid";removeAll()}function frame(time){if(!running)return;var dt=Math.min(35,lastTime?time-lastTime:16);lastTime=time;var speed=3.8+score/65;if(time>=nextSpawn){addThing();nextSpawn=time+Math.max(360,700-score*3)}var shipBox=ship.getBoundingClientRect();things=things.filter(function(x){x.y+=speed*dt/16;x.el.style.top=x.y+"px";var box=x.el.getBoundingClientRect();if(hit(shipBox,box)){x.el.remove();if(x.orb){score+=12;scoreEl.textContent=score;return false}finish();return false}if(x.y>window.innerHeight+70){x.el.remove();if(!x.orb){score++;scoreEl.textContent=score}return false}return true});requestAnimationFrame(frame)}function move(direction){if(!running)return;lane=Math.max(0,Math.min(2,lane+direction));setShip()}play.addEventListener("click",function(e){e.stopPropagation();removeAll();score=0;scoreEl.textContent=0;lane=1;setShip();screen.style.display="none";running=true;lastTime=0;nextSpawn=0;requestAnimationFrame(frame)});window.addEventListener("keydown",function(e){if(e.key==="ArrowLeft"||e.key.toLowerCase()==="a"){e.preventDefault();move(-1)}if(e.key==="ArrowRight"||e.key.toLowerCase()==="d"){e.preventDefault();move(1)}if((e.key===" "||e.key==="Enter")&&!running){e.preventDefault();play.click()}});game.addEventListener("pointerdown",function(e){startX=e.clientX});game.addEventListener("pointerup",function(e){var delta=e.clientX-startX;if(delta>25)move(1);if(delta<-25)move(-1)});}());</script></body></html>