Wikiprompt
토론

3D 키네틱 바운스 아레나 게임 프롬프트

Wikiprompt, 무료 프롬프트 백과사전에서

loshu2000
기여자loshu2000출처

2026년 5월 17일

3D 키네틱 바운스 아레나 게임 프롬프트 Here is a comprehensive prompt for an AI to generate a single-file HTML5 3D game with physics, neon aesthetics, and interactive mouse tilt controls: --- **Prompt:** Create a single, self-contained HTML5 file (no external dependencies, CDNs, or libraries) that implements a fully playable 3D game with the following specifications: **Core Requirements:** 1. **Physics Engine**: Implement a simple custom physics engine (gravity, collision detection, and response) for 3D objects. No external physics libraries allowed. 2. **Neon Aesthetics**: Use a dark background (e.g., #0a0a1a) with vibrant neon colors (cyan #00ffff, magenta #ff00ff, yellow #ffff00, green #00ff00) for all objects, edges, and particles. Add a subtle glow effect (using CSS `box-shadow` or canvas `shadowBlur`). 3. **Interactive Mouse Tilt Controls**: The entire 3D scene should tilt and rotate based on mouse position. Moving the mouse left/right rotates the camera around the Y-axis, and up/down tilts around the X-axis. The tilt should be smooth (lerp/interpolation) and have a maximum angle of ±30 degrees. 4. **Gameplay**: - A player-controlled paddle (or platform) at the bottom of the screen that moves horizontally (X-axis) and vertically (Z-axis) based on mouse movement. - A ball that bounces off the paddle and walls, with gravity pulling it down. - Breakable neon blocks arranged in a grid at the top of the scene. - The goal is to destroy all blocks. If the ball falls below the paddle, the player loses a life (start with 3 lives). Game over when lives reach 0, and a "You Win" screen when all blocks are destroyed. 5. **Visual Effects**: - Particle explosion when a block is hit (neon-colored particles that fade out). - Ball trail effect (fading afterimages). - Paddle and blocks should have a wireframe or semi-transparent neon look with glowing edges. 6. **Technical Implementation**: - Use HTML5 Canvas with WebGL (via raw WebGL API, not Three.js) OR use Canvas 2D with a custom 3D projection (perspective projection). Choose the simpler approach that still looks 3D. - Implement a simple 3D-to-2D projection: `project(x, y, z)` that returns `{x, y, scale}` based on camera position and field of view. - Handle window resize and maintain aspect ratio. - Use `requestAnimationFrame` for the game loop with delta time for physics. - All code must be in a single `<script>` tag inside the HTML file. 7. **User Interface**: - Display score, lives, and game state (playing, win, lose) as neon text overlays. - Add a "Click to Start" screen and a "Restart" button on game over/win. 8. **Performance**: Keep the frame rate at 60 FPS. Use efficient rendering (batch draw calls, minimal state changes). **Additional Details:** - The scene should have a grid floor (neon wireframe) for depth perception. - The ball should have a constant horizontal speed and bounce off walls at an angle. - Blocks should have different colors (cycling through neon palette) and give different points (e.g., 10, 20, 30 based on row). - Add a subtle starfield background (randomly placed points that twinkle). - The paddle should have a slight tilt effect based on its velocity for visual feedback. **Output Format**: Provide the complete HTML code in a single code block, with comments explaining key sections (physics, rendering, input, game logic). The code must be fully functional when saved as `.html` and opened in a modern browser (Chrome, Firefox, Edge). **Constraints**: - No external assets (images, fonts, sounds). Use only procedural generation. - No use of `eval()`, `Function()`, or any code obfuscation. - The code should be well-structured and readable. --- This prompt is designed to push the AI to create a complete, polished game with all the requested features while keeping it self-contained and performant. It emphasizes creativity in implementing 3D graphics and physics from scratch.

프롬프트 내용저장

🌐
<!doctype html> <html lang="ko"> <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.3), 0 0 80px rgba(255, 0, 128, 0.2); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> <script> // [X] placeholder for potential future expansion let mainSphere; let particles = []; const NUM_PARTICLES = 25; let containerRadius = 200; let containerHeight = 300; let tiltX = 0; let tiltY = 0; let targetTiltX = 0; let targetTiltY = 0; let camZoom = 1; let trailFrames = []; function setup() { createCanvas(600, 600, WEBGL); // Initialize main sphere mainSphere = { pos: createVector(0, 0, 0), vel: createVector(3, 5, 2), radius: 18, color: [0, 255, 255] }; // Initialize particles for (let i = 0; i < NUM_PARTICLES; i++) { particles.push({ pos: createVector( random(-containerRadius * 0.7, containerRadius * 0.7), random(-containerHeight * 0.4, containerHeight * 0.4), random(-containerRadius * 0.7, containerRadius * 0.7) ), vel: createVector(random(-2, 2), random(-2, 2), random(-2, 2)), radius: random(3, 7), color: [random(255), random(150, 255), random(200, 255)], trail: [] }); } // Set camera initial position camera(0, 0, 500, 0, 0, 0, 0, 1, 0); } function draw() { background(10, 10, 18, 50); // Mouse tilt control targetTiltX = map(mouseY, 0, height, 0.3, -0.3); targetTiltY = map(mouseX, 0, width, -0.3, 0.3); tiltX = lerp(tiltX, targetTiltX, 0.05); tiltY = lerp(tiltY, targetTiltY, 0.05); // Auto camera zoom based on main sphere speed let speed = mainSphere.vel.mag(); let targetZoom = map(speed, 0, 10, 1.2, 0.8); camZoom = lerp(camZoom, targetZoom, 0.02); // Apply transformations push(); rotateX(tiltX); rotateY(tiltY); scale(camZoom); // Draw container (cylinder) drawContainer(); // Update and draw main sphere updateMainSphere(); drawMainSphere(); // Update and draw particles for (let p of particles) { updateParticle(p); drawParticle(p); } pop(); // Draw HUD drawHUD(); } function drawContainer() { // Cylinder walls push(); noFill(); stroke(0, 255, 255, 80); strokeWeight(2); // Top and bottom rings ellipse(0, -containerHeight/2, containerRadius * 2); ellipse(0, containerHeight/2, containerRadius * 2); // Vertical lines for (let i = 0; i < 12; i++) { let angle = (TWO_PI / 12) * i; let x = cos(angle) * containerRadius; let z = sin(angle) * containerRadius; line(x, -containerHeight/2, z, x, containerHeight/2, z); } // Horizontal rings for (let i = -2; i <= 2; i++) { let y = (containerHeight/2) * (i/2); push(); translate(0, y, 0); ellipse(0, 0, containerRadius * 2); pop(); } // Glowing edges stroke(255, 0, 128, 150); strokeWeight(3); ellipse(0, -containerHeight/2, containerRadius * 2); ellipse(0, containerHeight/2, containerRadius * 2); pop(); } function updateMainSphere() { // Gravity effect based on tilt mainSphere.vel.x += tiltY * 0.5; mainSphere.vel.z -= tiltX * 0.5; mainSphere.vel.y += 0.1; // slight upward bias // Update position mainSphere.pos.add(mainSphere.vel); // Cylinder wall collision let horizDist = sqrt(mainSphere.pos.x * mainSphere.pos.x + mainSphere.pos.z * mainSphere.pos.z); if (horizDist > containerRadius - mainSphere.radius) { // Normalize and reflect let nx = mainSphere.pos.x / horizDist; let nz = mainSphere.pos.z / horizDist; mainSphere.pos.x = nx * (containerRadius - mainSphere.radius); mainSphere.pos.z = nz * (containerRadius - mainSphere.radius); // Reflect velocity let dot = mainSphere.vel.x * nx + mainSphere.vel.z * nz; mainSphere.vel.x -= 2 * dot * nx; mainSphere.vel.z -= 2 * dot * nz; mainSphere.vel.mult(0.95); // energy loss } // Top and bottom collision if (mainSphere.pos.y > containerHeight/2 - mainSphere.radius) { mainSphere.pos.y = containerHeight/2 - mainSphere.radius; mainSphere.vel.y *= -0.9; } if (mainSphere.pos.y < -containerHeight/2 + mainSphere.radius) { mainSphere.pos.y = -containerHeight/2 + mainSphere.radius; mainSphere.vel.y *= -0.9; } // Particle collision and momentum transfer for (let p of particles) { let d = p5.Vector.dist(mainSphere.pos, p.pos); if (d < mainSphere.radius + p.radius) { // Collision response let normal = p5.Vector.sub(p.pos, mainSphere.pos).normalize(); let relVel = p5.Vector.sub(p.vel, mainSphere.vel); let velAlongNormal = relVel.dot(normal); if (velAlongNormal < 0) { // Transfer momentum let impulse = velAlongNormal * 0.8; p.vel.add(p5.Vector.mult(normal, -impulse)); mainSphere.vel.add(p5.Vector.mult(normal, impulse * 0.3)); // Separate particles p.pos.add(p5.Vector.mult(normal, mainSphere.radius + p.radius - d)); } } } } function drawMainSphere() { push(); translate(mainSphere.pos.x, mainSphere.pos.y, mainSphere.pos.z); // Glow effect push(); noStroke(); fill(0, 255, 255, 30); sphere(mainSphere.radius * 1.5); pop(); // Main sphere push(); noStroke(); fill(0, 255, 255); specularMaterial(255); shininess(100); sphere(mainSphere.radius); pop(); // Trail push(); stroke(0, 255, 255, 100); strokeWeight(2); noFill(); beginShape(); for (let i = 0; i < trailFrames.length; i++) { vertex(trailFrames[i].x, trailFrames[i].y, trailFrames[i].z); } endShape(); pop(); pop(); // Store trail trailFrames.push(mainSphere.pos.copy()); if (trailFrames.length > 20) { trailFrames.shift(); } } function updateParticle(p) { // Apply gravity based on tilt p.vel.x += tiltY * 0.2; p.vel.z -= tiltX * 0.2; // Update position p.pos.add(p.vel); // Cylinder collision let horizDist = sqrt(p.pos.x * p.pos.x + p.pos.z * p.pos.z); if (horizDist > containerRadius - p.radius) { let nx = p.pos.x / horizDist; let nz = p.pos.z / horizDist; p.pos.x = nx * (containerRadius - p.radius); p.pos.z = nz * (containerRadius - p.radius); let dot = p.vel.x * nx + p.vel.z * nz; p.vel.x -= 2 * dot * nx; p.vel.z -= 2 * dot * nz; p.vel.mult(0.9); } // Top and bottom collision if (p.pos.y > containerHeight/2 - p.radius) { p.pos.y = containerHeight/2 - p.radius; p.vel.y *= -0.8; } if (p.pos.y < -containerHeight/2 + p.radius) { p.pos.y = -containerHeight/2 + p.radius; p.vel.y *= -0.8; } // Store trail p.trail.push(p.pos.copy()); if (p.trail.length > 15) { p.trail.shift(); } } function drawParticle(p) { // Draw trail push(); noFill(); for (let i = 0; i < p.trail.length; i++) { let alpha = map(i, 0, p.trail.length, 0, 150); stroke(p.color[0], p.color[1], p.color[2], alpha); strokeWeight(map(i, 0, p.trail.length, 1, 3)); point(p.trail[i].x, p.trail[i].y, p.trail[i].z); } pop(); // Draw particle push(); translate(p.pos.x, p.pos.y, p.pos.z); noStroke(); fill(p.color[0], p.color[1], p.color[2]); specularMaterial(255); shininess(50); sphere(p.radius); pop(); } function drawHUD() { push(); resetMatrix(); fill(0, 255, 255, 200); noStroke(); textSize(14); textAlign(LEFT, TOP); text("Kinetic Bounce Arena", -width/2 + 20, -height/2 + 20); textSize(10); fill(255, 255, 255, 150); text("Move mouse to tilt container", -width/2 + 20, -height/2 + 40); pop(); } </script> </head> <body> </body> </html>

전체 프롬프트를 보려면 로그인하세요

Continue with:

By logging in, you agree to our Terms of Use and Privacy Policy

사용법

이 프롬프트는 coding와 함께 사용하도록 설계되었습니다. 위의 프롬프트 내용을 복사하여 원하는 AI 도구에 붙여넣으세요.

최상의 결과를 얻으려면 자리 표시자(대괄호 또는 대문자로 표시)를 특정 요구 사항으로 사용자 지정할 수 있습니다.

참고 자료

분류:coding| prompts.chat| html5-game| p5js

토론