3D动态弹跳竞技场游戏提示

<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>动能弹跳竞技场</title> <style> body { margin: 0; padding: 0; background: #0a0a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Arial', sans-serif; overflow: hidden; } canvas { display: block; border-radius: 12px; box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), 0 0 80px rgba(255, 0, 200, 0.2); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> <script> // 全局变量 let containerRadius = 180; let containerHeight = 300; let mainSphere; let particles = []; let particleCount = 25; let tiltX = 0; let tiltY = 0; let targetTiltX = 0; let targetTiltY = 0; let camDist = 700; let targetCamDist = 700; let time = 0; // 粒子类 class Particle { constructor() { this.reset(); this.trail = []; this.maxTrail = 12; this.color = color(random(100, 255), random(100, 255), random(200, 255), 200); } reset() { let angle = random(TWO_PI); let r = random(0, containerRadius * 0.7); this.pos = createVector( cos(angle) * r, random(-containerHeight * 0.4, containerHeight * 0.4), sin(angle) * r ); this.vel = p5.Vector.random3D().mult(random(1, 4)); this.radius = random(4, 9); this.mass = this.radius * this.radius * 0.1; } update() { // 重力（受倾斜影响） let gravity = createVector(tiltX * 0.5, 0.3, tiltY * 0.5); this.vel.add(gravity); // 阻尼 this.vel.mult(0.995); // 位置更新 this.pos.add(this.vel); // 圆柱边界碰撞 let horizontalDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizontalDist > containerRadius - this.radius) { let normal = createVector(this.pos.x, 0, this.pos.z).normalize(); this.pos.x = normal.x * (containerRadius - this.radius); this.pos.z = normal.z * (containerRadius - this.radius); let velDot = this.vel.dot(normal); if (velDot > 0) { this.vel.sub(normal.mult(2 * velDot)); this.vel.mult(0.8); } } // 上下边界 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; } // 轨迹记录 this.trail.push(this.pos.copy()); if (this.trail.length > this.maxTrail) { this.trail.shift(); } } display() { // 绘制轨迹 noFill(); for (let i = 0; i < this.trail.length - 1; i++) { let alpha = map(i, 0, this.trail.length, 0, 150); stroke(red(this.color), green(this.color), blue(this.color), alpha); strokeWeight(map(i, 0, this.trail.length, 1, 4)); line(this.trail[i].x, this.trail[i].y, this.trail[i].z, this.trail[i + 1].x, this.trail[i + 1].y, this.trail[i + 1].z); } // 绘制粒子 push(); translate(this.pos.x, this.pos.y, this.pos.z); emissiveMaterial(red(this.color), green(this.color), blue(this.color), 100); noStroke(); sphere(this.radius); pop(); } } // 主球体类 class MainSphere { constructor() { this.pos = createVector(0, 0, 0); this.vel = createVector(5, 8, 3); this.radius = 18; this.mass = 50; this.trail = []; this.maxTrail = 20; this.color = color(0, 255, 255, 255); } update() { // 重力（受倾斜影响） let gravity = createVector(tiltX * 0.8, 0.5, tiltY * 0.8); this.vel.add(gravity); // 阻尼 this.vel.mult(0.998); // 位置更新 this.pos.add(this.vel); // 圆柱边界碰撞 let horizontalDist = sqrt(this.pos.x * this.pos.x + this.pos.z * this.pos.z); if (horizontalDist > containerRadius - this.radius) { let normal = createVector(this.pos.x, 0, this.pos.z).normalize(); this.pos.x = normal.x * (containerRadius - this.radius); this.pos.z = normal.z * (containerRadius - this.radius); let velDot = this.vel.dot(normal); if (velDot > 0) { this.vel.sub(normal.mult(2 * velDot)); this.vel.mult(0.9); } } // 上下边界 if (this.pos.y > containerHeight / 2 - this.radius) { this.pos.y = containerHeight / 2 - this.radius; this.vel.y *= -0.9; } if (this.pos.y < -containerHeight / 2 + this.radius) { this.pos.y = -containerHeight / 2 + this.radius; this.vel.y *= -0.9; } // 与粒子碰撞 for (let p of particles) { let dist = p5.Vector.dist(this.pos, p.pos); let minDist = this.radius + p.radius; if (dist < minDist && dist > 0) { let normal = p5.Vector.sub(p.pos, this.pos).normalize(); let relativeVel = p5.Vector.sub(p.vel, this.vel); let velAlongNormal = relativeVel.dot(normal); if (velAlongNormal < 0) { let restitution = 0.9; let impulse = (-(1 + restitution) * velAlongNormal) / (1 / this.mass + 1 / p.mass); let impulseVec = normal.copy().mult(impulse); this.vel.sub(impulseVec.copy().mult(1 / this.mass)); p.vel.add(impulseVec.copy().mult(1 / p.mass)); // 分离重叠 let overlap = minDist - dist; this.pos.sub(normal.copy().mult(overlap * 0.5)); p.pos.add(normal.copy().mult(overlap * 0.5)); } } } // 轨迹记录 this.trail.push(this.pos.copy()); if (this.trail.length > this.maxTrail) { this.trail.shift(); } } display() { // 绘制轨迹 noFill(); for (let i = 0; i < this.trail.length - 1; i++) { let alpha = map(i, 0, this.trail.length, 0, 200); stroke(0, 255, 255, alpha); strokeWeight(map(i, 0, this.trail.length, 2, 6)); line(this.trail[i].x, this.trail[i].y, this.trail[i].z, this.trail[i + 1].x, this.trail[i + 1].y, this.trail[i + 1].z); } // 绘制主球体 push(); translate(this.pos.x, this.pos.y, this.pos.z); emissiveMaterial(0, 255, 255, 150); noStroke(); sphere(this.radius); // 发光效果 pointLight(0, 255, 255, this.pos.x, this.pos.y, this.pos.z); pop(); } } // 绘制圆柱容器 function drawContainer() { push(); noFill(); stroke(0, 255, 255, 80); strokeWeight(2); // 底部圆环 beginShape(); for (let i = 0; i <= 60; i++) { let angle = map(i, 0, 60, 0, TWO_PI); let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; vertex(x, containerHeight / 2, z); } endShape(CLOSE); // 顶部圆环 beginShape(); for (let i = 0; i <= 60; i++) { let angle = map(i, 0, 60, 0, TWO_PI); let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; vertex(x, -containerHeight / 2, z); } endShape(CLOSE); // 垂直线条 for (let i = 0; i < 12; i++) { let angle = map(i, 0, 12, 0, TWO_PI); let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; line(x, containerHeight / 2, z, x, -containerHeight / 2, z); } // 半透明底面 push(); translate(0, containerHeight / 2, 0); rotateX(HALF_PI); fill(0, 255, 255, 20); noStroke(); circle(0, 0, containerRadius * 2); pop(); pop(); } // p5.js 设置 function setup() { createCanvas(600, 600, WEBGL); pixelDensity(1); // 初始化主球体 mainSphere = new MainSphere(); // 初始化粒子 for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } // 设置相机 camera(0, 0, camDist, 0, 0, 0, 0, 1, 0); } // p5.js 绘制循环 function draw() { // 背景 background(10, 10, 30); // 时间更新 time += 0.01; // 鼠标控制倾斜 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); // 相机自动缩放 let speed = mainSphere.vel.mag(); targetCamDist = map(speed, 0, 20, 700, 550); camDist = lerp(camDist, targetCamDist, 0.03); camera(0, 0, camDist, 0, 0, 0, 0, 1, 0); // 应用倾斜旋转 rotateX(tiltY); rotateZ(tiltX); // 环境光 ambientLight(60, 60, 100); directionalLight(255, 0, 200, 0, 1, 0); directionalLight(0, 255, 255, 0, -1, 0); // 绘制容器 drawContainer(); // 更新和绘制粒子 for (let p of particles) { p.update(); p.display(); } // 更新和绘制主球体 mainSphere.update(); mainSphere.display(); // 添加一些闪烁的星星效果 push(); translate(0, 0, -300); for (let i = 0; i < 50; i++) { let x = random(-400, 400); let y = random(-400, 400); let z = random(-200, 200); let alpha = 100 + 100 * sin(time * 2 + i); stroke(255, 255, 255, alpha); strokeWeight(1); point(x, y, z); } pop(); } </script> </head> <body> </body> </html>