Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on a thrilling journey through space with Hyperdrive Adventure! Control your spaceship as you navigate through cosmic obstacles and collect power-ups. With exciting gameplay mechanics and vibrant visuals, you'll learn programming while building a game that feels out of this world!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-11-21T16:52:12.435524Z","updated_at":"2024-11-21T16:52:12.435526Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4734,"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":"// JavaScript code here\nlet stars = [];\n\n// Star class to handle each star's properties and movement\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;\n }\n\n update() {\n this.z -= 10; // Speed at which stars move\n if (this.z < 1) {\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);\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);\n ellipse(sx, sy, r, r);\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);\n }\n}\n\n// JavaScript code here\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\n// JavaScript code here\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].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 wanna build a hyerdrive","project_id":4734,"created_at":"2024-11-21T16:52:12.461590Z","output_tokens":null,"code_id":185283,"input_tokens":null,"id":91172},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4734,"created_at":"2024-11-21T16:52:15.414942Z","output_tokens":null,"code_id":185283,"input_tokens":null,"id":91175},{"deleted":0,"sender":"ai","message":"Great! Could you tell me a bit more about your idea for the hyperdrive project? What kind of project are you envisioning? Is it a game, an animation, or something else? Also, what features would you like to include?","project_id":4734,"created_at":"2024-11-21T16:52:15.420755Z","output_tokens":null,"code_id":185283,"input_tokens":null,"id":91176},{"deleted":0,"sender":"human","message":"lets make stars zoom at me","project_id":4734,"created_at":"2024-11-21T16:52:32.431542Z","output_tokens":null,"code_id":185284,"input_tokens":null,"id":91177},{"deleted":0,"sender":"ai","message":"To create a starry background where stars zoom towards you, we can simulate this effect by drawing stars that move from the center of the canvas outwards. Let's add this feature to your project.\n\nFirst, let's define a Star class to handle the properties and movement of each star. We'll then create a list of stars and update their positions in the `draw` function to create the zooming effect.\n\nHere's how we can start:\n\n1. Create a Star class with properties for position and speed.\n2. Initialize a set of stars in the `setup` function.\n3. Update and draw the stars in the `draw` function.\n\nLet's add these steps.\n\n```javascript\n// JavaScript code here\nlet stars = [];\n\n// Star class to handle each star's properties and movement\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;\n }\n\n update() {\n this.z -= 10; // Speed at which stars move\n if (this.z < 1) {\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);\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);\n ellipse(sx, sy, r, r);\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);\n }\n}\n```\n\n```javascript\n// JavaScript code here\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n```\n\n```javascript\n// JavaScript code here\nfunction draw() {\n background(0); // Black background for space\n translate(width / 2, height / 2);\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].show();\n }\n}\n```\n\n- **Star Class**: Initializes each star with a random position and depth.\n- **Update Method**: Moves the stars towards the viewer by decreasing `z`.\n- **Show Method**: Draws each star as a white ellipse and connects it with a line to create a trail effect.\n- **Setup Function**: Creates 800 stars at random initial positions.\n- **Draw Function**: Updates and renders the starfield, creating the zoom effect.\n\nReplace your current `setup` and `draw` functions in `script.js` with the above code to see the stars zooming towards you. Let me know if you want to adjust any part of the effect!","project_id":4734,"created_at":"2024-11-21T16:52:32.437229Z","output_tokens":null,"code_id":185284,"input_tokens":null,"id":91178}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}