@joaobarrosfranca · 8/12/2026, 3:28:49 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">+<title>Coral Current 3D</title>+<style>+*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#003c57;font-family:Georgia,serif;touch-action:none}canvas{display:block}#hud{position:fixed;z-index:4;top:0;left:0;right:0;padding:20px 22px;display:flex;justify-content:space-between;color:#fff8;pointer-events:none}.hud-label{font:700 10px system-ui,sans-serif;letter-spacing:1.7px}.hud-value{font:900 30px system-ui,sans-serif;line-height:1.1;color:#fff}.right{text-align:right}#cover{position:fixed;z-index:9;inset:0;display:grid;place-items:center;padding:28px;text-align:center;background:linear-gradient(155deg,#005471cf,#006f76b8 43%,#f07750b8);color:white}#card{max-width:315px}.wave{font:900 12px system-ui,sans-serif;letter-spacing:4px;color:#fff0af;text-transform:uppercase}.title{font-size:55px;line-height:.83;letter-spacing:-3px;font-weight:900;margin:17px 0 20px;text-shadow:0 4px 0 #a73f3b}.title span{color:#ffe27c}.text{font:16px/1.5 system-ui,sans-serif;margin:0 0 26px;color:#f5fff9}button{border:3px solid #fff4c8;border-radius:12px;padding:15px 29px;background:#ffca54;color:#884041;font:900 14px system-ui,sans-serif;letter-spacing:1px;box-shadow:0 5px 0 #b35444;cursor:pointer}button:active{transform:translateY(3px);box-shadow:0 2px 0 #b35444}.hint{margin-top:19px;font:12px system-ui,sans-serif;color:#fff8db}+</style>+</head>+<body>+<div id="hud"><div><div class="hud-label">SHELLS</div><div id="score" class="hud-value">0</div></div><div class="right"><div class="hud-label">HIGH TIDE</div><div id="best" class="hud-value">0</div></div></div>+<div id="cover"><div id="card"><div class="wave">A reef adventure</div><div class="title">CORAL<br><span>CURRENT</span></div><p id="text" class="text">Dive through the reef, dodge the rocks, and catch golden shells.</p><button id="start" type="button">DIVE IN</button><div class="hint">Swipe left / right · or use A / D</div></div></div>+<script type="module">+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";+const scene=new THREE.Scene();scene.background=new THREE.Color(0x006177);scene.fog=new THREE.Fog(0x006177,9,46);+const camera=new THREE.PerspectiveCamera(61,innerWidth/innerHeight,.1,100);camera.position.set(0,3.4,8.2);camera.lookAt(0,.4,-8);+const renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setSize(innerWidth,innerHeight);renderer.outputColorSpace=THREE.SRGBColorSpace;document.body.appendChild(renderer.domElement);+scene.add(new THREE.HemisphereLight(0xb8ffff,0x004056,2.6));+const sun=new THREE.DirectionalLight(0xffe8a5,2.6);sun.position.set(-3,8,5);scene.add(sun);+const glow=new THREE.PointLight(0xff8968,13,18);glow.position.set(3,1,0);scene.add(glow);+const floor=new THREE.Mesh(new THREE.PlaneGeometry(15,100),new THREE.MeshStandardMaterial({color:0x0b8190,roughness:.92,metalness:.02}));floor.rotation.x=-Math.PI/2;floor.position.z=-35;scene.add(floor);+const sand=new THREE.GridHelper(100,42,0x3ab0ad,0x14778b);sand.position.y=.02;sand.position.z=-35;sand.material.opacity=.28;sand.material.transparent=true;scene.add(sand);+const lanes=[-2,0,2],decor=new THREE.Group();scene.add(decor);+function coral(x,z,color){const g=new THREE.Group(),mat=new THREE.MeshStandardMaterial({color,roughness:.65,emissive:color,emissiveIntensity:.12});for(let n=0;n<4;n++){const stem=new THREE.Mesh(new THREE.CylinderGeometry(.1,.23,.7+Math.random()*.9,7),mat);stem.position.set((n-1.5)*.23,.4,Math.random()*.18);stem.rotation.z=(n-1.5)*.17;g.add(stem)}g.position.set(x,0,z);return g}+for(let i=0;i<48;i++){decor.add(coral((Math.random()<.5?-1:1)*(3.5+Math.random()*3),-Math.random()*58,Math.random()<.5?0xff7164:0xffb84e))}+const fishMat=new THREE.MeshBasicMaterial({color:0xffe47d});for(let i=0;i<19;i++){const fish=new THREE.Mesh(new THREE.ConeGeometry(.12,.46,7),fishMat);fish.rotation.z=Math.PI/2;fish.position.set((Math.random()-.5)*10,.7+Math.random()*4,-Math.random()*50);decor.add(fish)}+const diver=new THREE.Group();scene.add(diver);+const turtle=new THREE.Mesh(new THREE.SphereGeometry(.59,22,16),new THREE.MeshStandardMaterial({color:0x75d693,roughness:.5,metalness:.08}));turtle.scale.z=1.25;diver.add(turtle);+const shellTop=new THREE.Mesh(new THREE.SphereGeometry(.42,18,12),new THREE.MeshStandardMaterial({color:0xffd16b,roughness:.42}));shellTop.scale.set(1.1,.5,1.2);shellTop.position.y=.35;diver.add(shellTop);+const flipperMat=new THREE.MeshStandardMaterial({color:0x4da97e,roughness:.6});[-1,1].forEach(s=>{const f=new THREE.Mesh(new THREE.SphereGeometry(.22,10,8),flipperMat);f.scale.set(2,.3,.65);f.position.set(s*.68,-.05,.1);diver.add(f)});+const bubbleLight=new THREE.PointLight(0xa5fff5,5,5);diver.add(bubbleLight);diver.position.set(0,.72,1.9);+const scoreEl=document.querySelector("#score"),bestEl=document.querySelector("#best"),cover=document.querySelector("#cover"),start=document.querySelector("#start"),text=document.querySelector("#text");+let lane=1,running=false,score=0,best=0,entities=[],last=0,next=0,downX=0;+function move(d){if(running)lane=Math.max(0,Math.min(2,lane+d))}+function spawnRock(){const g=new THREE.Group(),rock=new THREE.Mesh(new THREE.DodecahedronGeometry(.72+Math.random()*.24,0),new THREE.MeshStandardMaterial({color:0x645b77,roughness:.95}));rock.scale.y=.8;g.add(rock);g.position.set(lanes[Math.floor(Math.random()*3)],.62,-39);scene.add(g);entities.push({g,kind:"rock"})}+function spawnShell(){const g=new THREE.Group(),gem=new THREE.Mesh(new THREE.SphereGeometry(.32,16,12),new THREE.MeshStandardMaterial({color:0xffdf69,emissive:0xe79718,emissiveIntensity:1.35,roughness:.26}));g.add(gem);const ring=new THREE.Mesh(new THREE.TorusGeometry(.48,.035,7,20),new THREE.MeshBasicMaterial({color:0xffffb0}));ring.rotation.x=Math.PI/2;g.add(ring);g.position.set(lanes[Math.floor(Math.random()*3)],1,-39);scene.add(g);entities.push({g,kind:"shell"})}+function clean(){entities.forEach(e=>scene.remove(e.g));entities=[]}+function finish(){running=false;if(score>best){best=score;bestEl.textContent=best}text.innerHTML="You caught <b>"+score+"</b> shells.<br>The reef is ready for another dive.";start.textContent="DIVE AGAIN";cover.style.display="grid";clean()}+function play(){clean();score=0;scoreEl.textContent=0;lane=1;running=true;last=0;next=0;cover.style.display="none"}+function tick(t){requestAnimationFrame(tick);const dt=Math.min(38,last?t-last:16);last=t;if(running){const pace=.034+Math.min(score,160)/7000;diver.position.x+=(lanes[lane]-diver.position.x)*.1;diver.rotation.z=(lanes[lane]-diver.position.x)*-.12;diver.rotation.y=Math.sin(t*.004)*.08;decor.children.forEach((d,i)=>{d.position.z+=pace*dt;if(d.position.z>12)d.position.z-=60;if(i%3===0)d.position.y+=Math.sin(t*.002+i)*.002});if(t>next){Math.random()<.35?spawnShell():spawnRock();next=t+Math.max(430,820-score*2)}for(let i=entities.length-1;i>=0;i--){const e=entities[i];e.g.position.z+=pace*dt;e.g.rotation.y+=dt*.003;if(e.kind==="shell")e.g.rotation.z+=dt*.006;if(e.g.position.z>1&&e.g.position.z<3&&Math.abs(e.g.position.x-diver.position.x)<.78){scene.remove(e.g);entities.splice(i,1);if(e.kind==="shell"){score+=10;scoreEl.textContent=score;continue}finish();break}if(e.g.position.z>10){scene.remove(e.g);entities.splice(i,1);if(e.kind==="rock"){score++;scoreEl.textContent=score}}}camera.position.x+=(diver.position.x*.16-camera.position.x)*.03;camera.lookAt(diver.position.x*.14,.65,-8)}renderer.render(scene,camera)}+start.addEventListener("click",e=>{e.stopPropagation();play()});+addEventListener("keydown",e=>{let k=e.key.toLowerCase();if(k==="arrowleft"||k==="a"){e.preventDefault();move(-1)}if(k==="arrowright"||k==="d"){e.preventDefault();move(1)}if((k===" "||k==="enter")&&!running){e.preventDefault();play()}});+renderer.domElement.addEventListener("pointerdown",e=>downX=e.clientX);renderer.domElement.addEventListener("pointerup",e=>{let d=e.clientX-downX;if(d>24)move(1);if(d<-24)move(-1)});+addEventListener("resize",()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});+tick(0);+</script></body></html>