3D Kinetic Bounce Arena Game Prompt

<!doctype html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Kinetic Bounce Arena</title> <style> html, body { margin: 0; padding: 0; background: #0a0a12; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Courier New', monospace; } canvas { display: block; border-radius: 12px; box-shadow: 0 0 40px rgba(0, 255, 255, 0.2), 0 0 80px rgba(255, 0, 255, 0.1); } #hud { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #0ff; text-shadow: 0 0 10px #0ff, 0 0 20px #f0f; font-size: 14px; letter-spacing: 2px; text-align: center; pointer-events: none; z-index: 10; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> </head> <body> <div id="hud">KINETIC BOUNCE ARENA - MOVA O MOUSE PARA INCLINAR</div> <script> // ============================================================ // KINETIC BOUNCE ARENA - Single-file HTML5 game (p5.js WebGL) // ============================================================ let mainSphere; // esfera principal let particles = []; // 25 partículas let trails = []; // rastros de partículas let containerRadius = 180; let containerHeight = 300; let tiltX = 0, tiltY = 0; // inclinação do container let camZoom = 1.0; let time = 0; // ============================================================ // CLASSE PARTÍCULA // ============================================================ class Particle { constructor() { this.reset(true); } reset(initial = false) { // posição aleatória dentro do cilindro let angle = random(TWO_PI); let r = random(0, containerRadius * 0.8); this.pos = createVector( cos(angle) * r, random(-containerHeight/2 + 20, containerHeight/2 - 20), sin(angle) * r ); this.vel = p5.Vector.random3D().mult(random(1, 3)); this.radius = random(4, 10); this.hue = random(180, 320); // ciano a magenta this.trail = []; this.maxTrail = 12; } update() { // gravidade leve this.vel.y += 0.05; // movimento this.pos.add(this.vel); // colisão com paredes do cilindro let horizDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizDist > containerRadius - this.radius) { // normal apontando para dentro let nx = -this.pos.x / horizDist; let nz = -this.pos.z / horizDist; // refletir velocidade let dot = this.vel.x * nx + this.vel.z * nz; this.vel.x -= 2 * dot * nx; this.vel.z -= 2 * dot * nz; // reposicionar let scale = (containerRadius - this.radius) / horizDist; this.pos.x *= scale; this.pos.z *= scale; // amortecimento this.vel.mult(0.9); } // colisão com topo e fundo if (this.pos.y > containerHeight/2 - this.radius) { this.pos.y = containerHeight/2 - this.radius; this.vel.y *= -0.8; } if (this.pos.y < -containerHeight/2 + this.radius) { this.pos.y = -containerHeight/2 + this.radius; this.vel.y *= -0.8; } // rastro this.trail.push(this.pos.copy()); if (this.trail.length > this.maxTrail) { this.trail.shift(); } } draw() { // rastro noFill(); for (let i = 0; i < this.trail.length; i++) { let alpha = map(i, 0, this.trail.length, 0, 150); stroke(this.hue, 255, 255, alpha); strokeWeight(map(i, 0, this.trail.length, 1, 4)); let p = this.trail[i]; point(p.x, p.y, p.z); } // corpo push(); translate(this.pos.x, this.pos.y, this.pos.z); emissiveMaterial(this.hue, 255, 200); specularMaterial(255); shininess(80); sphere(this.radius); pop(); } // transferência de momentum com a esfera principal collideWithMain(mainPos, mainRadius, mainVel) { let d = p5.Vector.dist(this.pos, mainPos); let minDist = this.radius + mainRadius; if (d < minDist && d > 0) { // direção da colisão let normal = p5.Vector.sub(this.pos, mainPos).normalize(); // separar let overlap = minDist - d; this.pos.add(normal.copy().mult(overlap)); // transferir momentum let impact = mainVel.mag() * 0.6; this.vel.add(normal.copy().mult(impact)); this.vel.mult(1.2); // adicionar cor aleatória this.hue = random(180, 320); return true; } return false; } } // ============================================================ // CLASSE ESFERA PRINCIPAL // ============================================================ class MainSphere { constructor() { this.pos = createVector(0, 0, 0); this.vel = createVector(5, 8, 3); this.radius = 18; this.trail = []; this.maxTrail = 20; } update() { // gravidade this.vel.y += 0.2; // movimento this.pos.add(this.vel); // colisão com paredes do cilindro let horizDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizDist > containerRadius - this.radius) { let nx = -this.pos.x / horizDist; let nz = -this.pos.z / horizDist; let dot = this.vel.x * nx + this.vel.z * nz; this.vel.x -= 2 * dot * nx; this.vel.z -= 2 * dot * nz; let scale = (containerRadius - this.radius) / horizDist; this.pos.x *= scale; this.pos.z *= scale; this.vel.mult(0.95); } // topo e fundo if (this.pos.y > containerHeight/2 - this.radius) { this.pos.y = containerHeight/2 - this.radius; this.vel.y *= -0.85; } if (this.pos.y < -containerHeight/2 + this.radius) { this.pos.y = -containerHeight/2 + this.radius; this.vel.y *= -0.85; } // rastro this.trail.push(this.pos.copy()); if (this.trail.length > this.maxTrail) { this.trail.shift(); } } draw() { // rastro noFill(); for (let i = 0; i < this.trail.length; i++) { let alpha = map(i, 0, this.trail.length, 0, 200); stroke(0, 255, 255, alpha); strokeWeight(map(i, 0, this.trail.length, 2, 8)); let p = this.trail[i]; point(p.x, p.y, p.z); } // corpo push(); translate(this.pos.x, this.pos.y, this.pos.z); emissiveMaterial(0, 255, 255); specularMaterial(255); shininess(120); sphere(this.radius); pop(); } } // ============================================================ // SETUP // ============================================================ function setup() { createCanvas(600, 600, WEBGL); colorMode(HSB, 360, 255, 255, 255); noStroke(); // criar esfera principal mainSphere = new MainSphere(); // criar 25 partículas for (let i = 0; i < 25; i++) { particles.push(new Particle()); } // luzes ambientLight(60); directionalLight(255, 255, 255, 0.5, 0.5, 1); pointLight(0, 255, 255, 0, 0, 0); pointLight(255, 0, 255, 200, 200, 200); } // ============================================================ // DRAW // ============================================================ function draw() { time += 0.01; // fundo background(10, 10, 20); // inclinação baseada no mouse tiltX = map(mouseY, 0, height, -0.4, 0.4); tiltY = map(mouseX, 0, width, -0.4, 0.4); // zoom automático suave let targetZoom = 1.0 + sin(time * 0.5) * 0.08; camZoom = lerp(camZoom, targetZoom, 0.02); // aplicar transformações push(); scale(camZoom); rotateX(tiltX); rotateZ(tiltY); // desenhar container (cilindro) drawContainer(); // atualizar e desenhar partículas for (let p of particles) { p.update(); // colisão com esfera principal p.collideWithMain(mainSphere.pos, mainSphere.radius, mainSphere.vel); p.draw(); } // atualizar e desenhar esfera principal mainSphere.update(); mainSphere.draw(); pop(); // HUD push(); resetMatrix(); fill(0, 255, 255, 200); noStroke(); textAlign(CENTER); textSize(12); text("PARTÍCULAS: " + particles.length + " | VELOCIDADE: " + nf(mainSphere.vel.mag(), 1, 1), 0, height/2 - 20); pop(); } // ============================================================ // DESENHAR CONTAINER // ============================================================ function drawContainer() { push(); noFill(); stroke(0, 255, 255, 80); strokeWeight(2); // paredes do cilindro (linhas verticais) let segments = 24; for (let i = 0; i < segments; i++) { let angle = (TWO_PI / segments) * i; let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; line(x, -containerHeight/2, z, x, containerHeight/2, z); } // anéis horizontais for (let y = -containerHeight/2; y <= containerHeight/2; y += 50) { beginShape(); for (let i = 0; i <= segments; i++) { let angle = (TWO_PI / segments) * i; let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; vertex(x, y, z); } endShape(CLOSE); } // bordas superior e inferior stroke(255, 0, 255, 120); strokeWeight(3); beginShape(); for (let i = 0; i <= segments; i++) { let angle = (TWO_PI / segments) * i; let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; vertex(x, -containerHeight/2, z); } endShape(CLOSE); beginShape(); for (let i = 0; i <= segments; i++) { let angle = (TWO_PI / segments) * i; let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; vertex(x, containerHeight/2, z); } endShape(CLOSE); // brilho interno push(); translate(0, 0, 0); emissiveMaterial(0, 255, 255, 30); noStroke(); sphere(containerRadius * 0.95); pop(); pop(); } // ============================================================ // REINICIAR COM CLIQUE // ============================================================ function mousePressed() { // reiniciar esfera principal mainSphere.pos = createVector(0, 0, 0); mainSphere.vel = p5.Vector.random3D().mult(random(5, 10)); // reiniciar partículas for (let p of particles) { p.reset(); } } </script> </body> </html>