v1Atual

@joaobarrosfranca · 8/12/2026, 4:18:50 PM

Versão inicial — todas as linhas são novas.

+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><style>
+*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#050517;font-family:system-ui,sans-serif;touch-action:none}canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}.hud{position:fixed;z-index:3;top:0;left:0;right:0;padding:17px;display:flex;justify-content:space-between;color:#fff;pointer-events:none;text-shadow:0 2px 5px #000}.lab{font-size:10px;letter-spacing:1.7px;font-weight:950;color:#b9ceff}.num{font-size:28px;line-height:1;font-weight:1000}.r{text-align:right}.life{font-size:18px;color:#ff628e;letter-spacing:2px}#wave{position:fixed;z-index:3;top:75px;left:50%;transform:translateX(-50%);color:#ffed85;font-size:11px;font-weight:1000;letter-spacing:2px;text-shadow:0 2px #000}.controls{position:fixed;z-index:4;bottom:17px;left:0;right:0;padding:0 14px;display:flex;justify-content:space-between;align-items:end}.pad{position:relative;width:130px;height:108px}.pad button,.fire{position:absolute;border:2px solid #fff9;color:#fff;font-weight:1000;box-shadow:0 4px 11px #0009;cursor:pointer}.pad button{width:42px;height:42px;border-radius:12px;background:#3539a5cc;font-size:18px}.u{top:0;left:44px}.d{bottom:0;left:44px}.l{top:33px;left:0}.rr{top:33px;right:0}.fire{position:relative;width:71px;height:71px;border-radius:50%;background:#df3c92d9;font-size:11px;letter-spacing:1px}.controls button:active{transform:scale(.94)}#overlay{position:fixed;z-index:8;inset:0;display:grid;place-items:center;text-align:center;padding:25px;color:#fff;background:radial-gradient(circle at 50% 15%,#6846cb88,transparent 33%),linear-gradient(155deg,#050519ed,#170d45e8 55%,#8f276fc6)}#card{max-width:325px}.tag{font-size:11px;letter-spacing:4px;font-weight:1000;color:#80f5ff}.title{font-size:54px;line-height:.8;font-weight:1000;letter-spacing:-4px;margin:18px;text-shadow:4px 4px #251044}.title span{color:#ff5ea6}.copy{font-size:16px;line-height:1.5}.start{border:3px solid #dff0ff;border-radius:6px;background:#7356e9;color:#fff;padding:15px 28px;font-weight:1000;cursor:pointer;box-shadow:0 5px #32176a}.tip{font-size:12px;color:#d8d5ff;margin-top:17px}
+</style></head><body><canvas id="c"></canvas><div class="hud"><div><div class="lab">SCORE</div><div id="score" class="num">0</div></div><div class="r"><div class="lab">LIVES</div><div id="lives" class="life">♥ ♥ ♥</div></div></div><div id="wave">WAVE 1</div><div class="controls"><div class="pad"><button id="up" class="u">▲</button><button id="down" class="d">▼</button><button id="left" class="l">◀</button><button id="right" class="rr">▶</button></div><button id="fire" class="fire">FIRE</button></div><div id="overlay"><div id="card"><div class="tag">NEON ARENA SURVIVAL</div><div class="title">VECTOR<br><span>VORTEX</span></div><p id="copy" class="copy">Drift through the neon arena, fire at incoming shapes, chain a combo, and collect weapon upgrades.</p><button id="start" class="start">ENTER ARENA</button><div class="tip">Move with WASD / arrows · Space fires toward your last direction</div></div></div>
+<script>
+const cv=document.getElementById("c"),x=cv.getContext("2d"),D={score:document.getElementById("score"),lives:document.getElementById("lives"),wave:document.getElementById("wave"),overlay:document.getElementById("overlay"),copy:document.getElementById("copy"),start:document.getElementById("start")};let W,H,stars=[],keys={u:false,d:false,l:false,r:false,fire:false},p,enemies,bullets,powers,run=false,last=0,score=0,lives=3,wave=1,toSpawn=0,nextSpawn=0,nextShot=0,combo=0,comboTimer=0;
+function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;stars=Array.from({length:100},()=>({x:Math.random()*W,y:Math.random()*H,s:Math.random()*2+1}))}addEventListener("resize",resize);resize();
+function reset(){p={x:W/2,y:H*.55,r:13,dir:-Math.PI/2,inv:0,power:1};enemies=[];bullets=[];powers=[];score=0;lives=3;wave=1;combo=0;toSpawn=5;nextSpawn=0;nextShot=0;run=true;D.score.textContent=0;D.lives.textContent="♥ ♥ ♥";D.wave.textContent="WAVE 1";D.overlay.style.display="none";last=0}
+function makeEnemy(){let type=Math.random()<.24?"square":Math.random()<.5?"triangle":"circle",a=Math.random()*Math.PI*2,rad=Math.max(W,H)*.62;enemies.push({type,x:W/2+Math.cos(a)*rad,y:H/2+Math.sin(a)*rad,r:type==="square"?17:14,hp:type==="square"?3:1,spd:type==="square"?1.15:1.55,rot:Math.random()*7,shot:0})}
+function fire(){for(let i=0;i<p.power;i++){let a=p.dir+(i-(p.power-1)/2)*.2;bullets.push({x:p.x+Math.cos(a)*18,y:p.y+Math.sin(a)*18,vx:Math.cos(a)*7,vy:Math.sin(a)*7,friend:true})}}
+function hurt(){if(p.inv>0)return;lives--;p.inv=1100;combo=0;D.lives.textContent=Array(lives).fill("♥").join(" ")||"—";if(lives<=0){run=false;D.copy.innerHTML="The shapes took over the arena.<br>Score: <b>"+score+"</b>";D.start.textContent="TRY AGAIN";D.overlay.style.display="grid"}}
+function kill(i){let e=enemies[i];enemies.splice(i,1);combo=Math.min(9,combo+1);comboTimer=1800;score+=10*combo;D.score.textContent=score;if(Math.random()<.17)powers.push({x:e.x,y:e.y,r:10})}
+function addButtons(id,key){let b=document.getElementById(id);b.addEventListener("pointerdown",e=>{e.preventDefault();keys[key]=true});["pointerup","pointerleave","pointercancel"].forEach(t=>b.addEventListener(t,()=>keys[key]=false))}addButtons("up","u");addButtons("down","d");addButtons("left","l");addButtons("right","r");addButtons("fire","fire");
+D.start.addEventListener("click",reset);addEventListener("keydown",e=>{let k=e.key.toLowerCase();if(k==="w"||k==="arrowup")keys.u=true;if(k==="s"||k==="arrowdown")keys.d=true;if(k==="a"||k==="arrowleft")keys.l=true;if(k==="d"||k==="arrowright")keys.r=true;if(k===" ")keys.fire=true;if(k==="enter"&&!run)reset()});addEventListener("keyup",e=>{let k=e.key.toLowerCase();if(k==="w"||k==="arrowup")keys.u=false;if(k==="s"||k==="arrowdown")keys.d=false;if(k==="a"||k==="arrowleft")keys.l=false;if(k==="d"||k==="arrowright")keys.r=false;if(k===" ")keys.fire=false});
+function polygon(cx,cy,r,n,a,col,fill=false){x.save();x.translate(cx,cy);x.rotate(a);x.beginPath();for(let i=0;i<n;i++){let q=i/n*Math.PI*2;x.lineTo(Math.cos(q)*r,Math.sin(q)*r)}x.closePath();x.strokeStyle=col;x.lineWidth=2;fill?(x.fillStyle=col,x.fill()):x.stroke();x.restore()}
+function loop(t){requestAnimationFrame(loop);let dt=Math.min(35,last?t-last:16);last=t;x.fillStyle="#050517";x.fillRect(0,0,W,H);for(let s of stars){s.y+=s.s*dt*.025;if(s.y>H)s.y=0;x.fillStyle="#6f79d9";x.fillRect(s.x,s.y,s.s,s.s)}x.strokeStyle="#293069";x.lineWidth=1;for(let a=0;a<W;a+=36){x.beginPath();x.moveTo(a,0);x.lineTo(a,H);x.stroke()}for(let a=0;a<H;a+=36){x.beginPath();x.moveTo(0,a);x.lineTo(W,a);x.stroke()}
+if(run){let dx=(keys.r?1:0)-(keys.l?1:0),dy=(keys.d?1:0)-(keys.u?1:0);if(dx||dy)p.dir=Math.atan2(dy,dx);p.x=Math.max(17,Math.min(W-17,p.x+dx*dt*.22));p.y=Math.max(85,Math.min(H-25,p.y+dy*dt*.22));p.inv=Math.max(0,p.inv-dt);if(keys.fire&&t>nextShot){fire();nextShot=t+170}if(toSpawn>0&&t>nextSpawn){makeEnemy();toSpawn--;nextSpawn=t+330}if(toSpawn===0&&enemies.length===0){wave++;toSpawn=4+wave*2;D.wave.textContent="WAVE "+wave;nextSpawn=t+900}comboTimer-=dt;if(comboTimer<0)combo=0;
+for(let i=enemies.length-1;i>=0;i--){let e=enemies[i],a=Math.atan2(p.y-e.y,p.x-e.x);e.x+=Math.cos(a)*e.spd*dt*.045;e.y+=Math.sin(a)*e.spd*dt*.045;e.rot+=dt*.005;if(Math.hypot(e.x-p.x,e.y-p.y)<e.r+p.r){enemies.splice(i,1);hurt()}}
+for(let i=bullets.length-1;i>=0;i--){let b=bullets[i];b.x+=b.vx*dt*.06;b.y+=b.vy*dt*.06;let gone=b.x<-20||b.x>W+20||b.y<60||b.y>H+20;for(let j=enemies.length-1;j>=0;j--)if(Math.hypot(b.x-enemies[j].x,b.y-enemies[j].y)<enemies[j].r+4){enemies[j].hp--;gone=true;if(enemies[j].hp<=0)kill(j);break}if(gone)bullets.splice(i,1)}
+for(let i=powers.length-1;i>=0;i--){let q=powers[i];q.y+=Math.sin(t*.006+i)*.4;if(Math.hypot(q.x-p.x,q.y-p.y)<24){p.power=Math.min(3,p.power+1);powers.splice(i,1)}}
+}for(let q of powers){x.fillStyle="#ffe667";x.beginPath();x.arc(q.x,q.y,9,0,7);x.fill();x.fillStyle="#5c3bdc";x.fillRect(q.x-2,q.y-6,4,12)}for(let e of enemies){let col=e.type==="square"?"#ff5a91":e.type==="triangle"?"#7df4ef":"#b770ff";polygon(e.x,e.y,e.r,e.type==="square"?4:e.type==="triangle"?3:10,e.rot,col,false)}for(let b of bullets){x.fillStyle="#fff1a0";x.beginPath();x.arc(b.x,b.y,3,0,7);x.fill()}if(p&&(p.inv<=0||Math.floor(t/90)%2)){x.save();x.translate(p.x,p.y);x.rotate(p.dir);x.fillStyle="#5de9e6";x.beginPath();x.moveTo(18,0);x.lineTo(-12,11);x.lineTo(-6,0);x.lineTo(-12,-11);x.closePath();x.fill();x.fillStyle="#ffffff";x.fillRect(-4,-3,8,6);x.restore()}if(run&&combo>1){x.fillStyle="#ffdf72";x.font="900 14px system-ui";x.fillText("×"+combo+" COMBO",W/2-39,104)}}
+loop(0);
+</script></body></html>

v1Atual

@joaobarrosfranca · 8/12/2026, 4:18:50 PM

Versão inicial — todas as linhas são novas.

+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><style>
+*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#050517;font-family:system-ui,sans-serif;touch-action:none}canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}.hud{position:fixed;z-index:3;top:0;left:0;right:0;padding:17px;display:flex;justify-content:space-between;color:#fff;pointer-events:none;text-shadow:0 2px 5px #000}.lab{font-size:10px;letter-spacing:1.7px;font-weight:950;color:#b9ceff}.num{font-size:28px;line-height:1;font-weight:1000}.r{text-align:right}.life{font-size:18px;color:#ff628e;letter-spacing:2px}#wave{position:fixed;z-index:3;top:75px;left:50%;transform:translateX(-50%);color:#ffed85;font-size:11px;font-weight:1000;letter-spacing:2px;text-shadow:0 2px #000}.controls{position:fixed;z-index:4;bottom:17px;left:0;right:0;padding:0 14px;display:flex;justify-content:space-between;align-items:end}.pad{position:relative;width:130px;height:108px}.pad button,.fire{position:absolute;border:2px solid #fff9;color:#fff;font-weight:1000;box-shadow:0 4px 11px #0009;cursor:pointer}.pad button{width:42px;height:42px;border-radius:12px;background:#3539a5cc;font-size:18px}.u{top:0;left:44px}.d{bottom:0;left:44px}.l{top:33px;left:0}.rr{top:33px;right:0}.fire{position:relative;width:71px;height:71px;border-radius:50%;background:#df3c92d9;font-size:11px;letter-spacing:1px}.controls button:active{transform:scale(.94)}#overlay{position:fixed;z-index:8;inset:0;display:grid;place-items:center;text-align:center;padding:25px;color:#fff;background:radial-gradient(circle at 50% 15%,#6846cb88,transparent 33%),linear-gradient(155deg,#050519ed,#170d45e8 55%,#8f276fc6)}#card{max-width:325px}.tag{font-size:11px;letter-spacing:4px;font-weight:1000;color:#80f5ff}.title{font-size:54px;line-height:.8;font-weight:1000;letter-spacing:-4px;margin:18px;text-shadow:4px 4px #251044}.title span{color:#ff5ea6}.copy{font-size:16px;line-height:1.5}.start{border:3px solid #dff0ff;border-radius:6px;background:#7356e9;color:#fff;padding:15px 28px;font-weight:1000;cursor:pointer;box-shadow:0 5px #32176a}.tip{font-size:12px;color:#d8d5ff;margin-top:17px}
+</style></head><body><canvas id="c"></canvas><div class="hud"><div><div class="lab">SCORE</div><div id="score" class="num">0</div></div><div class="r"><div class="lab">LIVES</div><div id="lives" class="life">♥ ♥ ♥</div></div></div><div id="wave">WAVE 1</div><div class="controls"><div class="pad"><button id="up" class="u">▲</button><button id="down" class="d">▼</button><button id="left" class="l">◀</button><button id="right" class="rr">▶</button></div><button id="fire" class="fire">FIRE</button></div><div id="overlay"><div id="card"><div class="tag">NEON ARENA SURVIVAL</div><div class="title">VECTOR<br><span>VORTEX</span></div><p id="copy" class="copy">Drift through the neon arena, fire at incoming shapes, chain a combo, and collect weapon upgrades.</p><button id="start" class="start">ENTER ARENA</button><div class="tip">Move with WASD / arrows · Space fires toward your last direction</div></div></div>
+<script>
+const cv=document.getElementById("c"),x=cv.getContext("2d"),D={score:document.getElementById("score"),lives:document.getElementById("lives"),wave:document.getElementById("wave"),overlay:document.getElementById("overlay"),copy:document.getElementById("copy"),start:document.getElementById("start")};let W,H,stars=[],keys={u:false,d:false,l:false,r:false,fire:false},p,enemies,bullets,powers,run=false,last=0,score=0,lives=3,wave=1,toSpawn=0,nextSpawn=0,nextShot=0,combo=0,comboTimer=0;
+function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;stars=Array.from({length:100},()=>({x:Math.random()*W,y:Math.random()*H,s:Math.random()*2+1}))}addEventListener("resize",resize);resize();
+function reset(){p={x:W/2,y:H*.55,r:13,dir:-Math.PI/2,inv:0,power:1};enemies=[];bullets=[];powers=[];score=0;lives=3;wave=1;combo=0;toSpawn=5;nextSpawn=0;nextShot=0;run=true;D.score.textContent=0;D.lives.textContent="♥ ♥ ♥";D.wave.textContent="WAVE 1";D.overlay.style.display="none";last=0}
+function makeEnemy(){let type=Math.random()<.24?"square":Math.random()<.5?"triangle":"circle",a=Math.random()*Math.PI*2,rad=Math.max(W,H)*.62;enemies.push({type,x:W/2+Math.cos(a)*rad,y:H/2+Math.sin(a)*rad,r:type==="square"?17:14,hp:type==="square"?3:1,spd:type==="square"?1.15:1.55,rot:Math.random()*7,shot:0})}
+function fire(){for(let i=0;i<p.power;i++){let a=p.dir+(i-(p.power-1)/2)*.2;bullets.push({x:p.x+Math.cos(a)*18,y:p.y+Math.sin(a)*18,vx:Math.cos(a)*7,vy:Math.sin(a)*7,friend:true})}}
+function hurt(){if(p.inv>0)return;lives--;p.inv=1100;combo=0;D.lives.textContent=Array(lives).fill("♥").join(" ")||"—";if(lives<=0){run=false;D.copy.innerHTML="The shapes took over the arena.<br>Score: <b>"+score+"</b>";D.start.textContent="TRY AGAIN";D.overlay.style.display="grid"}}
+function kill(i){let e=enemies[i];enemies.splice(i,1);combo=Math.min(9,combo+1);comboTimer=1800;score+=10*combo;D.score.textContent=score;if(Math.random()<.17)powers.push({x:e.x,y:e.y,r:10})}
+function addButtons(id,key){let b=document.getElementById(id);b.addEventListener("pointerdown",e=>{e.preventDefault();keys[key]=true});["pointerup","pointerleave","pointercancel"].forEach(t=>b.addEventListener(t,()=>keys[key]=false))}addButtons("up","u");addButtons("down","d");addButtons("left","l");addButtons("right","r");addButtons("fire","fire");
+D.start.addEventListener("click",reset);addEventListener("keydown",e=>{let k=e.key.toLowerCase();if(k==="w"||k==="arrowup")keys.u=true;if(k==="s"||k==="arrowdown")keys.d=true;if(k==="a"||k==="arrowleft")keys.l=true;if(k==="d"||k==="arrowright")keys.r=true;if(k===" ")keys.fire=true;if(k==="enter"&&!run)reset()});addEventListener("keyup",e=>{let k=e.key.toLowerCase();if(k==="w"||k==="arrowup")keys.u=false;if(k==="s"||k==="arrowdown")keys.d=false;if(k==="a"||k==="arrowleft")keys.l=false;if(k==="d"||k==="arrowright")keys.r=false;if(k===" ")keys.fire=false});
+function polygon(cx,cy,r,n,a,col,fill=false){x.save();x.translate(cx,cy);x.rotate(a);x.beginPath();for(let i=0;i<n;i++){let q=i/n*Math.PI*2;x.lineTo(Math.cos(q)*r,Math.sin(q)*r)}x.closePath();x.strokeStyle=col;x.lineWidth=2;fill?(x.fillStyle=col,x.fill()):x.stroke();x.restore()}
+function loop(t){requestAnimationFrame(loop);let dt=Math.min(35,last?t-last:16);last=t;x.fillStyle="#050517";x.fillRect(0,0,W,H);for(let s of stars){s.y+=s.s*dt*.025;if(s.y>H)s.y=0;x.fillStyle="#6f79d9";x.fillRect(s.x,s.y,s.s,s.s)}x.strokeStyle="#293069";x.lineWidth=1;for(let a=0;a<W;a+=36){x.beginPath();x.moveTo(a,0);x.lineTo(a,H);x.stroke()}for(let a=0;a<H;a+=36){x.beginPath();x.moveTo(0,a);x.lineTo(W,a);x.stroke()}
+if(run){let dx=(keys.r?1:0)-(keys.l?1:0),dy=(keys.d?1:0)-(keys.u?1:0);if(dx||dy)p.dir=Math.atan2(dy,dx);p.x=Math.max(17,Math.min(W-17,p.x+dx*dt*.22));p.y=Math.max(85,Math.min(H-25,p.y+dy*dt*.22));p.inv=Math.max(0,p.inv-dt);if(keys.fire&&t>nextShot){fire();nextShot=t+170}if(toSpawn>0&&t>nextSpawn){makeEnemy();toSpawn--;nextSpawn=t+330}if(toSpawn===0&&enemies.length===0){wave++;toSpawn=4+wave*2;D.wave.textContent="WAVE "+wave;nextSpawn=t+900}comboTimer-=dt;if(comboTimer<0)combo=0;
+for(let i=enemies.length-1;i>=0;i--){let e=enemies[i],a=Math.atan2(p.y-e.y,p.x-e.x);e.x+=Math.cos(a)*e.spd*dt*.045;e.y+=Math.sin(a)*e.spd*dt*.045;e.rot+=dt*.005;if(Math.hypot(e.x-p.x,e.y-p.y)<e.r+p.r){enemies.splice(i,1);hurt()}}
+for(let i=bullets.length-1;i>=0;i--){let b=bullets[i];b.x+=b.vx*dt*.06;b.y+=b.vy*dt*.06;let gone=b.x<-20||b.x>W+20||b.y<60||b.y>H+20;for(let j=enemies.length-1;j>=0;j--)if(Math.hypot(b.x-enemies[j].x,b.y-enemies[j].y)<enemies[j].r+4){enemies[j].hp--;gone=true;if(enemies[j].hp<=0)kill(j);break}if(gone)bullets.splice(i,1)}
+for(let i=powers.length-1;i>=0;i--){let q=powers[i];q.y+=Math.sin(t*.006+i)*.4;if(Math.hypot(q.x-p.x,q.y-p.y)<24){p.power=Math.min(3,p.power+1);powers.splice(i,1)}}
+}for(let q of powers){x.fillStyle="#ffe667";x.beginPath();x.arc(q.x,q.y,9,0,7);x.fill();x.fillStyle="#5c3bdc";x.fillRect(q.x-2,q.y-6,4,12)}for(let e of enemies){let col=e.type==="square"?"#ff5a91":e.type==="triangle"?"#7df4ef":"#b770ff";polygon(e.x,e.y,e.r,e.type==="square"?4:e.type==="triangle"?3:10,e.rot,col,false)}for(let b of bullets){x.fillStyle="#fff1a0";x.beginPath();x.arc(b.x,b.y,3,0,7);x.fill()}if(p&&(p.inv<=0||Math.floor(t/90)%2)){x.save();x.translate(p.x,p.y);x.rotate(p.dir);x.fillStyle="#5de9e6";x.beginPath();x.moveTo(18,0);x.lineTo(-12,11);x.lineTo(-6,0);x.lineTo(-12,-11);x.closePath();x.fill();x.fillStyle="#ffffff";x.fillRect(-4,-3,8,6);x.restore()}if(run&&combo>1){x.fillStyle="#ffdf72";x.font="900 14px system-ui";x.fillText("×"+combo+" COMBO",W/2-39,104)}}
+loop(0);
+</script></body></html>