Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on a thrilling journey through the cosmos with 'Hyperdrive Adventure'! This interactive game invites players to navigate their spacecraft at incredible speeds while dodging obstacles and collecting power-ups. With dynamic controls and engaging graphics, you'll learn programming while creating a stellar experience!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-11T16:50:27.309490Z","updated_at":"2024-11-11T16:50:27.309491Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4508,"user":{"photo":null,"email":null,"recess_id":"3c157d72-b311-5420-5811-b5ccb77b8bb9","created_at":"2023-12-11T21:38:41.147846Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters","id":1,"password_hash":null,"updated_at":"2023-12-11T21:38:41.147848Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let stars = []; // Array to hold star objects\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n for (let i = 0; i < 100; i++) { // Create 100 stars\n stars.push(new Star());\n }\n}\n\nclass Star {\n constructor() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n this.pz = this.z; // Previous z position\n }\n\n update() {\n this.z -= 10; // Move the star towards the viewer\n if (this.z < 1) { // Reset star when it reaches the viewer\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255); // White color for stars\n noStroke();\n\n let sx = map(this.x / this.z, 0, 1, 0, width);\n let sy = map(this.y / this.z, 0, 1, 0, height);\n\n let r = map(this.z, 0, width, 16, 0); // Size of the star\n ellipse(sx, sy, r, r); // Draw the star\n\n let px = map(this.x / this.pz, 0, 1, 0, width);\n let py = map(this.y / this.pz, 0, 1, 0, height);\n\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy); // Draw a line from previous position to current\n }\n}\n\nfunction draw() {\n background(0); // Black background to simulate space\n translate(width / 2, height / 2); // Center the origin\n for (let star of stars) {\n star.update();\n star.show();\n }\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Hyperdrive Adventure\n \n \n\n\n \n\n"},"chat_history":[{"deleted":0,"sender":"human","message":"I want to make a hyperdrive","project_id":4508,"created_at":"2024-11-11T16:50:27.325244Z","output_tokens":null,"code_id":181846,"input_tokens":null,"id":89088},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4508,"created_at":"2024-11-11T16:50:30.777689Z","output_tokens":null,"code_id":181846,"input_tokens":null,"id":89089},{"deleted":0,"sender":"ai","message":"That sounds exciting! Could you tell me a bit more about your idea for the hyperdrive? Are you thinking about creating a game, an animation, or something else? What do you imagine the hyperdrive will do in your project?","project_id":4508,"created_at":"2024-11-11T16:50:30.784793Z","output_tokens":null,"code_id":181846,"input_tokens":null,"id":89090},{"deleted":0,"sender":"human","message":"just make stars zoom at me like star wars","project_id":4508,"created_at":"2024-11-11T16:50:41.368165Z","output_tokens":null,"code_id":181847,"input_tokens":null,"id":89091},{"deleted":0,"sender":"ai","message":"Got it! We can create a starfield effect where stars zoom towards the viewer, similar to the hyperspace jump in Star Wars. Let's add this effect step by step. \n\nFirst, let's create an array to hold our stars and a function to generate them.\n\n```javascript\nlet stars = []; // Array to hold star objects\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n for (let i = 0; i < 100; i++) { // Create 100 stars\n stars.push(new Star());\n }\n}\n```\n\nNext, let's define the `Star` class to handle the behavior of each star, including its position and speed.\n\n```javascript\nclass Star {\n constructor() {\n this.x = random(-width, width); // Random x position\n this.y = random(-height, height); // Random y position\n this.z = random(width); // Distance from the viewer\n }\n}\n```\n\nNow, let's update the `draw` function to animate the stars.\n\n```javascript\nfunction draw() {\n background(0); // Black background to simulate space\n translate(width / 2, height / 2); // Center the origin\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\nFinally, we'll complete the `Star` class with methods to update and display the stars.\n\n```javascript\nclass Star {\n constructor() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n this.pz = this.z; // Previous z position\n }\n\n update() {\n this.z -= 10; // Move the star towards the viewer\n if (this.z < 1) { // Reset star when it reaches the viewer\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.pz = this.z;\n }\n }\n\n show() {\n fill(255); // White color for stars\n noStroke();\n\n let sx = map(this.x / this.z, 0, 1, 0, width);\n let sy = map(this.y / this.z, 0, 1, 0, height);\n\n let r = map(this.z, 0, width, 16, 0); // Size of the star\n ellipse(sx, sy, r, r); // Draw the star\n\n let px = map(this.x / this.pz, 0, 1, 0, width);\n let py = map(this.y / this.pz, 0, 1, 0, height);\n\n this.pz = this.z;\n\n stroke(255);\n line(px, py, sx, sy); // Draw a line from previous position to current\n }\n}\n```\n\n### Explanation:\n- **Star Creation**: We create stars with random positions and distances.\n- **Star Update**: Stars move towards the viewer, and reset when they pass the viewer.\n- **Star Display**: Stars are drawn as ellipses, with lines showing their motion trails.\n\nThis will create a starfield that gives the impression of stars zooming past the viewer like in a hyperdrive sequence. Let me know if you'd like to add or change anything!","project_id":4508,"created_at":"2024-11-11T16:50:41.373071Z","output_tokens":null,"code_id":181847,"input_tokens":null,"id":89092}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}