Rocket Launch Adventure

{"name":"Rocket Launch Adventure","description":"Get ready to launch your very own cylindrical rocket into the sky! Experience the thrill of controlling your rocket as it soars higher and higher while dodging obstacles.","photo":null,"view_count":9,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:52:42.311821Z","updated_at":"2025-08-06T08:52:42.311823Z","user_id":246,"status":"DELETED","parent_id":null,"id":2859,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// Create the scene, camera, and renderer\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// Add lighting\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(5, 5, 5).normalize();\nscene.add(light);\n\n// Set camera position\ncamera.position.z = 5;\n\n// Create the rocket using a cylinder geometry\nconst rocketGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32); // radiusTop, radiusBottom, height, radialSegments\nconst rocketMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // Red color\nconst rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);\nscene.add(rocket);\n\n// Position the rocket\nrocket.position.y = -3; // Start below the camera view\n\n// Update animate function to include rocket movement\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Move the rocket upwards\n rocket.position.y += 0.01; // Adjust the speed of the rocket\n\n renderer.render(scene, camera);\n}\nanimate();","style.css":"","index.html":"\n\n\n \n \n Rocket Launch Adventure\n \n \n\n\n \n\n"},"chat_history":[{"message":"Let's get started!","project_id":2859,"created_at":"2024-08-19T21:40:44.726749Z","output_tokens":null,"sender":"human","code_id":137900,"deleted":0,"input_tokens":null,"id":67129},{"message":"Great! Let's dive into the exciting world of your rocket launch adventure. 🚀\n\nFirst, let's clarify a few things to make sure we have a solid plan.\n\n1. How do you envision the rocket looking? Would you like to use an emoji for the rocket or draw it using simple shapes?\n2. What kind of obstacles would you like the rocket to dodge? Maybe some clouds or birds?\n3. How would you like the player to control the rocket? Should we use arrow keys, WASD, or mouse input?\n4. Do you have any specific ideas for scoring or adding visual effects?\n\nOnce you confirm these features, we can start building them step-by-step!","project_id":2859,"created_at":"2024-08-19T21:40:44.736874Z","output_tokens":null,"sender":"ai","code_id":137900,"deleted":0,"input_tokens":null,"id":67130},{"message":"I want to use three.js to make a 3-D scene where the rocket is a cylinder that moves upwards","project_id":2859,"created_at":"2024-08-19T21:41:41.641389Z","output_tokens":null,"sender":"human","code_id":137906,"deleted":0,"input_tokens":null,"id":67133},{"message":"Awesome! Turning your rocket adventure into a 3D experience with Three.js will be super fun. Let's plan out the features we need to build this:\n\n### Features to Build\n\n1. **Create a Basic 3D Scene**: Set up a Three.js scene with a camera, lighting, and a canvas.\n2. **Create the Rocket**: Use a cylinder geometry to represent the rocket.\n3. **Rocket Movement**: Implement controls to move the rocket upwards and perhaps rotate it for dodging.\n4. **Add Obstacles**: Introduce obstacles like cubes or spheres that the rocket needs to dodge.\n5. **Collision Detection and Scoring**: Implement collision detection logic and a simple scoring system.\n\n### Let's Get Started\n\n**1. Create a Basic 3D Scene**\n\nFirst, we'll set up a basic Three.js scene with a camera, some lighting, and a canvas to render our 3D objects.\n\n### Update `index.html` to include Three.js\n\n```html\n\n\n\n \n \n Rocket Launch Adventure\n \n \n\n\n \n\n\n```\n\n### Set Up Basic Three.js Scene in `script.js`\n\nLet's add the basics for creating a Three.js scene:\n\n```javascript\n// Create the scene, camera, and renderer\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// Add lighting\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(5, 5, 5).normalize();\nscene.add(light);\n\n// Set camera position\ncamera.position.z = 5;\n\nfunction animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n}\nanimate();\n```\n\n### Explanation\n\n- **Scene**: Where all the 3D objects live.\n- **Camera**: The viewpoint from which we see the 3D scene.\n- **Renderer**: Renders the scene from the perspective of the camera.\n- **Lighting**: Adds light to the scene so objects can be seen.\n- **Animation Loop**: Continuously renders the scene.\n\nLet's get this part working first. Once you confirm it's set up, we can move on to creating the rocket! 🚀","project_id":2859,"created_at":"2024-08-19T21:41:41.667861Z","output_tokens":null,"sender":"ai","code_id":137906,"deleted":0,"input_tokens":null,"id":67134},{"message":"I don't see anything","project_id":2859,"created_at":"2024-08-19T21:42:58.256848Z","output_tokens":null,"sender":"human","code_id":137912,"deleted":0,"input_tokens":null,"id":67139},{"message":"It looks like you've already set up the basic Three.js scene! Now let's move on to the next step: creating the rocket.\n\n### Step 2: Create the Rocket\n\nWe'll use a cylinder geometry to represent the rocket. Let's add this to your `script.js`.\n\n### Add the Rocket to `script.js`\n\n```javascript\n// Create the rocket using a cylinder geometry\nconst rocketGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32); // radiusTop, radiusBottom, height, radialSegments\nconst rocketMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // Red color\nconst rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);\nscene.add(rocket);\n\n// Position the rocket\nrocket.position.y = -3; // Start below the camera view\n\n// Update animate function to include rocket movement\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Move the rocket upwards\n rocket.position.y += 0.01; // Adjust the speed of the rocket\n\n renderer.render(scene, camera);\n}\nanimate();\n```\n\n### Explanation\n\n- **Rocket Geometry**: Defines the shape of the rocket as a cylinder.\n- **Rocket Material**: Sets the color of the rocket to red.\n- **Rocket Mesh**: Combines the geometry and material into a single object that can be added to the scene.\n- **Rocket Positioning**: Places the rocket initially below the camera view.\n- **Rocket Movement**: Moves the rocket upwards in the `animate` function.\n\nLet's add this code to your `script.js` and see how it looks. Once you confirm it's working, we can move on to implementing more interactive controls and obstacles! 🚀","project_id":2859,"created_at":"2024-08-19T21:42:58.264203Z","output_tokens":null,"sender":"ai","code_id":137912,"deleted":0,"input_tokens":null,"id":67140},{"message":"ERROR: ReferenceError: Can't find variable: scene at 5:6 in script.js","project_id":2859,"created_at":"2024-08-19T21:43:20.164140Z","output_tokens":null,"sender":"human","code_id":137916,"deleted":0,"input_tokens":null,"id":67141},{"message":"It looks like the `scene` variable is missing from your `script.js`. Let's set up the basic Three.js scene first, which includes creating the `scene`, `camera`, and `renderer`.\n\nHere's the complete setup for the basic Three.js scene and adding the rocket:\n\n### Update `script.js`\n\n```javascript\n// Create the scene, camera, and renderer\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// Add lighting\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(5, 5, 5).normalize();\nscene.add(light);\n\n// Set camera position\ncamera.position.z = 5;\n\n// Create the rocket using a cylinder geometry\nconst rocketGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32); // radiusTop, radiusBottom, height, radialSegments\nconst rocketMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // Red color\nconst rocket = new THREE.Mesh(rocketGeometry, rocketMaterial);\nscene.add(rocket);\n\n// Position the rocket\nrocket.position.y = -3; // Start below the camera view\n\n// Update animate function to include rocket movement\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Move the rocket upwards\n rocket.position.y += 0.01; // Adjust the speed of the rocket\n\n renderer.render(scene, camera);\n}\nanimate();\n```\n\n### Explanation\n\n- **Scene**: Where all the 3D objects live.\n- **Camera**: The viewpoint from which we see the 3D scene.\n- **Renderer**: Renders the scene from the perspective of the camera.\n- **Lighting**: Adds light to the scene so objects can be seen.\n- **Rocket Geometry & Material**: Defines the shape and color of the rocket.\n- **Rocket Mesh**: Combines the geometry and material into a single object that can be added to the scene.\n- **Rocket Positioning**: Places the rocket initially below the camera view.\n- **Rocket Movement**: Moves the rocket upwards in the `animate` function.\n\nPlease replace your current `script.js` with this code. This should set up your basic scene and display the rocket moving upwards. Let me know once you have this working, and we can proceed with adding more features! 🚀","project_id":2859,"created_at":"2024-08-19T21:43:20.171995Z","output_tokens":null,"sender":"ai","code_id":137916,"deleted":0,"input_tokens":null,"id":67142}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}