@joaobarrosfranca · 8/12/2026, 3:03:12 PM
Initial version — all lines are new.
+<!doctype html>+<html lang="pt-BR">+<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:#080a1c;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;touch-action:none}+ #game{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 0%,#332276 0,#101330 44%,#070818 100%)}+ #stars{position:absolute;inset:0;background-image:radial-gradient(#fff8 1px,transparent 1.5px);background-size:26px 36px;opacity:.38;animation:fall 5s linear infinite}+ @keyframes fall{to{background-position:0 36px}}+ #hud{position:absolute;top:0;left:0;right:0;padding:calc(20px + env(safe-area-inset-top)) 20px 12px;display:flex;justify-content:space-between;z-index:5;text-shadow:0 2px 8px #000}+ .label{font-size:11px;letter-spacing:1.8px;color:#b8c1ff;font-weight:800}.value{font-size:30px;font-weight:900;line-height:1}+ #track{position:absolute;inset:0 8%;border-left:1px solid #8c7dff44;border-right:1px solid #8c7dff44;background:linear-gradient(90deg,transparent 33.1%,#8c7dff24 33.3%,#8c7dff24 33.7%,transparent 33.9%,transparent 66.1%,#8c7dff24 66.3%,#8c7dff24 66.7%,transparent 66.9%)}+ #player{position:absolute;width:48px;height:62px;bottom:70px;left:calc(50% - 24px);border-radius:22px 22px 13px 13px;background:linear-gradient(135deg,#fff 0,#54efff 35%,#5956ff 100%);box-shadow:0 0 14px #4defff,0 0 35px #6b4dff;z-index:3;transition:left .12s ease}+ #player:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#142050;top:11px;left:15px;box-shadow:0 0 9px #64faff}+ #player:after{content:"";position:absolute;width:30px;height:9px;border-radius:50%;background:#ff5add;bottom:-5px;left:9px;filter:blur(3px);opacity:.85}+ .obstacle,.orb{position:absolute;z-index:2}.obstacle{width:49px;height:49px;border-radius:13px;background:linear-gradient(135deg,#ff987b,#ef246c);box-shadow:0 0 15px #ff316f}.obstacle:after{content:"×";display:grid;place-items:center;height:100%;font-size:38px;font-weight:300;color:#fff8}+ .orb{width:27px;height:27px;border-radius:50%;background:#feff9a;box-shadow:0 0 10px #fff36b,0 0 27px #fff36b;animation:pulse .7s alternate infinite}+ @keyframes pulse{to{transform:scale(1.2);box-shadow:0 0 20px #fff36b,0 0 38px #fff36b}}+ #message{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:28px;text-align:center;background:linear-gradient(#080b1cb3,#080b1cf0)}+ #card{max-width:290px}.logo{font-size:15px;letter-spacing:5px;font-weight:900;color:#74f4ff;text-shadow:0 0 16px #50eaff}.title{font-size:52px;line-height:.9;margin:14px 0 17px;font-weight:950;letter-spacing:-2px;background:linear-gradient(135deg,#fff,#7b9cff 55%,#ff75d7);-webkit-background-clip:text;color:transparent}.copy{font-size:16px;line-height:1.5;color:#d4d8f8;margin-bottom:25px}button{border:0;border-radius:999px;padding:16px 30px;background:linear-gradient(90deg,#5e5bff,#ee50b9);color:#fff;font-size:15px;font-weight:850;letter-spacing:.5px;box-shadow:0 7px 27px #7456ff77;cursor:pointer}button:active{transform:scale(.96)}.hint{font-size:12px;color:#aeb4df;margin-top:18px}+</style>+</head>+<body>+<div id="game">+ <div id="stars"></div><div id="track"></div>+ <div id="hud"><div><div class="label">PONTOS</div><div id="score" class="value">0</div></div><div style="text-align:right"><div class="label">RECORDE</div><div id="best" class="value">0</div></div></div>+ <div id="player"></div>+ <div id="message"><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 toque nas esferas de energia. Deslize para trocar de faixa.</div><button id="start">COMEÇAR</button><div class="hint">Arraste para esquerda ou direita</div></div></div>+</div>+<script>+(() => {+ const game=document.querySelector('#game'), player=document.querySelector('#player'), overlay=document.querySelector('#message'), start=document.querySelector('#start'), copy=document.querySelector('#copy'), scoreEl=document.querySelector('#score'), bestEl=document.querySelector('#best');+ const lanes=[22,50,78]; let lane=1,score=0,best=+localStorage.neonDriftBest||0,running=false,items=[],last=0,spawnGap=700,speed=3.8,startX=0;+ bestEl.textContent=best;+ function positionPlayer(){player.style.left='calc('+lanes[lane]+'% - 24px)'}+ function clearItems(){items.forEach(x=>x.el.remove());items=[]}+ function spawn(){+ const orb=Math.random()<.28,el=document.createElement('div'); el.className=orb?'orb':'obstacle';+ const item={el,orb,lane:Math.floor(Math.random()*3),y:-65}; el.style.left='calc('+lanes[item.lane]+'% - '+(orb?'13.5':'24.5')+'px)';el.style.top=item.y+'px';game.appendChild(el);items.push(item);+ }+ function collide(a,b){return a.left<b.right&&a.right>b.left&&a.top<b.bottom&&a.bottom>b.top}+ function end(){+ running=false;if(score>best){best=score;localStorage.neonDriftBest=best;bestEl.textContent=best}+ copy.innerHTML='Sua pontuação: <b>'+score+'</b><br>O neon ainda tem mais uma corrida.';+ start.textContent='JOGAR DE NOVO';overlay.style.display='grid';clearItems();+ }+ function loop(t){+ if(!running)return;const dt=Math.min(32,t-last||16);last=t;speed=3.8+score/65;spawnGap=Math.max(350,700-score*3);+ if(!loop.next||t>loop.next){spawn();loop.next=t+spawnGap}+ const pr=player.getBoundingClientRect();+ items=[...items].filter(item=>{+ item.y+=speed*dt/16;item.el.style.top=item.y+'px';const ir=item.el.getBoundingClientRect();+ if(collide(pr,ir)){if(item.orb){score+=12;scoreEl.textContent=score;item.el.remove();return false}else{end();return false}}+ if(item.y>innerHeight+75){if(!item.orb){score++;scoreEl.textContent=score}item.el.remove();return false}return true;+ });+ requestAnimationFrame(loop);+ }+ function move(dx){if(!running)return;if(dx>28&&lane<2){lane++;positionPlayer()} if(dx<-28&&lane>0){lane--;positionPlayer()}}+ game.addEventListener('pointerdown',e=>{startX=e.clientX});game.addEventListener('pointerup',e=>move(e.clientX-startX));+ start.onclick=()=>{overlay.style.display='none';clearItems();score=0;scoreEl.textContent=0;lane=1;positionPlayer();running=true;last=0;loop.next=0;requestAnimationFrame(loop)};+ positionPlayer();+})();+</script>+</body>+</html>