Prompt pour jeu d’arène de rebond cinétique en 3D

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinetic Bounce Arena</title> <style> body { margin: 0; padding: 0; background: #0a0a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Courier New', monospace; overflow: hidden; } 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); } #info { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #00ffff; font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 10px #00ffff; opacity: 0.7; 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="info">MOVE MOUSE TO TILT ARENA</div> <script> // ============================================================ // KINETIC BOUNCE ARENA - Single File HTML5 Game // Dark Synthwave Aesthetic with WebGL // ============================================================ // --- Global State --- let mainSphere; let particles = []; let cylinderRadius = 180; let cylinderHeight = 300; let tiltX = 0; let tiltY = 0; let targetTiltX = 0; let targetTiltY = 0; let camZoom = 1.0; let targetZoom = 1.0; // --- Particle Trail System --- class Trail { constructor() { this.points = []; this.maxLength = 12; this.color = [random(100, 255), random(100, 255), random(100, 255)]; } add(pos) { this.points.push(pos.copy()); if (this.points.length > this.maxLength) { this.points.shift(); } } display() { noFill(); for (let i = 0; i < this.points.length - 1; i++) { let alpha = map(i, 0, this.points.length, 0, 150); stroke(this.color[0], this.color[1], this.color[2], alpha); strokeWeight(map(i, 0, this.points.length, 1, 4)); line(this.points[i].x, this.points[i].y, this.points[i].z, this.points[i + 1].x, this.points[i + 1].y, this.points[i + 1].z); } } } // --- Particle Class --- class Particle { constructor(x, y, z) { this.pos = createVector(x, y, z); this.vel = p5.Vector.random3D().mult(random(2, 5)); this.radius = random(4, 8); this.trail = new Trail(); this.color = [random(100, 255), random(100, 255), random(100, 255)]; this.glow = random(0.5, 1.0); } update() { // Apply gravity (slight downward pull) this.vel.y += 0.05; // Update position this.pos.add(this.vel); // Collision with cylinder walls let horizDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizDist > cylinderRadius - this.radius) { // Normalize horizontal direction let nx = this.pos.x / horizDist; let nz = this.pos.z / horizDist; // Reflect velocity let dot = this.vel.x * nx + this.vel.z * nz; this.vel.x -= 2 * dot * nx; this.vel.z -= 2 * dot * nz; // Push back inside this.pos.x = nx * (cylinderRadius - this.radius); this.pos.z = nz * (cylinderRadius - this.radius); // Damping this.vel.mult(0.95); } // Collision with top and bottom if (this.pos.y > cylinderHeight / 2 - this.radius) { this.pos.y = cylinderHeight / 2 - this.radius; this.vel.y *= -0.9; } if (this.pos.y < -cylinderHeight / 2 + this.radius) { this.pos.y = -cylinderHeight / 2 + this.radius; this.vel.y *= -0.9; } // Add trail point this.trail.add(this.pos); } display() { // Draw trail this.trail.display(); // Draw particle with glow effect push(); translate(this.pos.x, this.pos.y, this.pos.z); // Outer glow ambientMaterial(0); emissiveMaterial(this.color[0] * 0.3, this.color[1] * 0.3, this.color[2] * 0.3); sphere(this.radius * 1.5); // Core emissiveMaterial(this.color[0], this.color[1], this.color[2]); sphere(this.radius); pop(); } // Collision with main sphere collideWithMain(main) { let dist = p5.Vector.dist(this.pos, main.pos); let minDist = this.radius + main.radius; if (dist < minDist && dist > 0) { // Normalize direction let dir = p5.Vector.sub(this.pos, main.pos).normalize(); // Transfer momentum let speed = main.vel.mag(); this.vel.add(dir.mult(speed * 0.8)); // Push particle away this.pos.add(dir.mult(minDist - dist)); // Add extra energy this.vel.mult(1.1); } } } // --- Main Sphere Class --- class MainSphere { constructor() { this.pos = createVector(0, 0, 0); this.vel = createVector(0, 0, 0); this.radius = 20; this.color = [0, 255, 255]; // Cyan neon } update() { // Apply gravity this.vel.y += 0.08; // Apply tilt influence (gravity direction changes) this.vel.x += tiltX * 0.1; this.vel.z += tiltY * 0.1; // Update position this.pos.add(this.vel); // Collision with cylinder walls let horizDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizDist > cylinderRadius - 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; this.pos.x = nx * (cylinderRadius - this.radius); this.pos.z = nz * (cylinderRadius - this.radius); this.vel.mult(0.98); } // Collision with top and bottom if (this.pos.y > cylinderHeight / 2 - this.radius) { this.pos.y = cylinderHeight / 2 - this.radius; this.vel.y *= -0.95; } if (this.pos.y < -cylinderHeight / 2 + this.radius) { this.pos.y = -cylinderHeight / 2 + this.radius; this.vel.y *= -0.95; } // Keep some minimum energy if (this.vel.mag() < 2) { this.vel.add(p5.Vector.random3D().mult(0.5)); } } display() { push(); translate(this.pos.x, this.pos.y, this.pos.z); // Outer glow ambientMaterial(0); emissiveMaterial(0, 100, 100); sphere(this.radius * 2); // Core emissiveMaterial(this.color[0], this.color[1], this.color[2]); sphere(this.radius); // Inner bright core emissiveMaterial(255, 255, 255); sphere(this.radius * 0.5); pop(); } } // --- Setup --- function setup() { createCanvas(600, 600, WEBGL); pixelDensity(1); // Initialize main sphere mainSphere = new MainSphere(); mainSphere.vel = createVector(random(-3, 3), random(-3, 3), random(-3, 3)); // Initialize particles for (let i = 0; i < 25; i++) { let x = random(-cylinderRadius * 0.7, cylinderRadius * 0.7); let y = random(-cylinderHeight * 0.4, cylinderHeight * 0.4); let z = random(-cylinderRadius * 0.7, cylinderRadius * 0.7); particles.push(new Particle(x, y, z)); } // Set initial camera camera(0, 0, 500, 0, 0, 0, 0, 1, 0); } // --- Draw Loop --- function draw() { // Background with synthwave gradient background(10, 10, 30); // Smooth tilt interpolation targetTiltX = map(mouseX, 0, width, -0.5, 0.5); targetTiltY = map(mouseY, 0, height, -0.5, 0.5); tiltX = lerp(tiltX, targetTiltX, 0.05); tiltY = lerp(tiltY, targetTiltY, 0.05); // Camera zoom based on main sphere speed targetZoom = map(mainSphere.vel.mag(), 0, 10, 0.8, 1.2); camZoom = lerp(camZoom, targetZoom, 0.05); // Apply transformations push(); scale(camZoom); rotateX(tiltX); rotateZ(tiltY); // Draw cylinder container drawCylinder(); // Update and draw main sphere mainSphere.update(); mainSphere.display(); // Update and draw particles for (let p of particles) { p.update(); p.collideWithMain(mainSphere); p.display(); } // Check particle-particle collisions (simple) for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { let dist = p5.Vector.dist(particles[i].pos, particles[j].pos); if (dist < particles[i].radius + particles[j].radius) { // Simple elastic collision let dir = p5.Vector.sub(particles[j].pos, particles[i].pos).normalize(); particles[i].vel.add(dir.mult(0.5)); particles[j].vel.sub(dir.mult(0.5)); } } } pop(); // Draw grid floor (synthwave style) drawGrid(); } // --- Draw Cylinder Container --- function drawCylinder() { push(); // Wireframe cylinder stroke(0, 255, 255, 80); strokeWeight(1); noFill(); // Draw circles at top and bottom circle(0, -cylinderHeight / 2, cylinderRadius * 2); circle(0, cylinderHeight / 2, cylinderRadius * 2); // Draw vertical lines for (let i = 0; i < 12; i++) { let angle = (TWO_PI / 12) * i; let x = cos(angle) * cylinderRadius; let z = sin(angle) * cylinderRadius; line(x, -cylinderHeight / 2, z, x, cylinderHeight / 2, z); } // Draw horizontal rings for (let i = 1; i < 4; i++) { let y = -cylinderHeight / 2 + (cylinderHeight / 4) * i; circle(0, y, cylinderRadius * 2); } // Add glowing edges stroke(255, 0, 255, 150); strokeWeight(2); circle(0, -cylinderHeight / 2, cylinderRadius * 2); circle(0, cylinderHeight / 2, cylinderRadius * 2); pop(); } // --- Draw Synthwave Grid --- function drawGrid() { push(); translate(0, 250, 0); rotateX(HALF_PI); stroke(255, 0, 255, 30); strokeWeight(1); for (let i = -300; i <= 300; i += 30) { line(i, -300, i, 300); line(-300, i, 300, i); } pop(); } // --- Window Resize --- function windowResized() { resizeCanvas(600, 600); } </script> </body> </html>