Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an exhilarating journey through the cosmos in Hyperdrive Adventure! Navigate your ship through vibrant galaxies, dodge asteroids, and collect stars while racing against time. With engaging controls and dynamic gameplay, it's an interstellar experience that will test your skills and reflexes!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-12-23T18:05:32.953826Z","updated_at":"2024-12-23T18:05:32.953829Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":5288,"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 = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n\nfunction draw() {\n background(0); // Set background to black for a space-like effect\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n\nclass Star {\n constructor() {\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n this.z = random(windowWidth);\n }\n\n update() {\n this.z -= 10; // Speed of the star moving towards the screen\n if (this.z < 1) {\n this.z = windowWidth;\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n let sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n let sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n let r = map(this.z, 0, windowWidth, 12, 0);\n ellipse(sx, sy, r, r);\n }\n}\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 hyperdfive","project_id":5288,"created_at":"2024-12-23T18:05:32.968092Z","output_tokens":null,"code_id":195767,"input_tokens":null,"id":98252},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":5288,"created_at":"2024-12-23T18:05:35.672488Z","output_tokens":null,"code_id":195767,"input_tokens":null,"id":98253},{"deleted":0,"sender":"ai","message":"Great! Could you tell me a bit more about your hyperdrive project? Are you thinking of creating a game, a simulation, or something else? What kind of features or elements would you like to include in it?","project_id":5288,"created_at":"2024-12-23T18:05:35.678589Z","output_tokens":50,"code_id":195767,"input_tokens":2362,"id":98254},{"deleted":0,"sender":"human","message":"white dots that zoom at me fast like star wars","project_id":5288,"created_at":"2024-12-23T18:05:40.428366Z","output_tokens":null,"code_id":195768,"input_tokens":null,"id":98255},{"deleted":0,"sender":"ai","message":"That sounds like a cool effect to add to your project! We can create a starfield effect where white dots zoom towards the screen, similar to what you see in Star Wars when a ship enters hyperdrive. \n\nLet's start by adding some stars to your canvas and make them move towards you. \n\nWould you like the stars to have a specific speed, or should they vary in speed to make it more dynamic?","project_id":5288,"created_at":"2024-12-23T18:05:40.435276Z","output_tokens":96,"code_id":195768,"input_tokens":2367,"id":98256},{"deleted":0,"sender":"human","message":"lets go1","project_id":5288,"created_at":"2024-12-23T18:05:50.657014Z","output_tokens":null,"code_id":195768,"input_tokens":null,"id":98257},{"deleted":0,"sender":"ai","message":"Excellent! Let's create that starfield effect by making white dots move towards the viewer, giving the impression of entering hyperdrive. We'll begin by setting up some stars and then make them move.\n\nHere's how we can start:\n\n1. Define a `Star` class to manage each star's position and movement.\n2. Create an array to store multiple stars.\n3. Update the `draw` function to make the stars move towards the center of the screen.\n\nLet's implement these features step by step. \n\nFirst, we'll create the `Star` class. Add the following code to your `script.js` file:\n\n```javascript\nclass Star {\n constructor() {\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n this.z = random(windowWidth);\n }\n\n update() {\n this.z -= 10; // Speed of the star moving towards the screen\n if (this.z < 1) {\n this.z = windowWidth;\n this.x = random(-windowWidth, windowWidth);\n this.y = random(-windowHeight, windowHeight);\n }\n }\n\n show() {\n fill(255);\n noStroke();\n let sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n let sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n let r = map(this.z, 0, windowWidth, 12, 0);\n ellipse(sx, sy, r, r);\n }\n}\n```\n\nNext, create an array to store the stars and initialize them in the `setup` function:\n\n```javascript\nlet stars = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) {\n stars[i] = new Star();\n }\n}\n```\n\nFinally, update the `draw` function to animate the stars:\n\n```javascript\nfunction draw() {\n background(0); // Set background to black for a space-like effect\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n- We define a `Star` class with properties for position and depth (`z`).\n- The `update` method decreases `z` to move the star towards the viewer.\n- The `show` method calculates the screen position of the star and draws it.\n- We initialize multiple stars in the `setup` function.\n- In `draw`, we update and display each star, creating the zooming effect.\n\nTry these changes out and see how the starfield looks! Let me know if you'd like to make any adjustments.","project_id":5288,"created_at":"2024-12-23T18:05:50.663875Z","output_tokens":579,"code_id":195768,"input_tokens":2360,"id":98258}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}