Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an exhilarating journey through space with Hyperdrive Adventure! Navigate your spacecraft using simple controls and dodge asteroids while collecting stars to boost your score. With vibrant visuals and engaging mechanics, this project will not only teach you programming fundamentals but also let your creativity soar as you build your very own interstellar experience!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-19T23:25:45.758698Z","updated_at":"2024-11-19T23:25:45.758701Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4676,"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 background(135, 206, 235); // Sky blue background\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 stars\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\n const sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n const sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n\n const r = map(this.z, 0, windowWidth, 8, 0);\n ellipse(sx, sy, r, r);\n }\n}\n\nfunction draw() {\n background(0); // Black background for space\n\n translate(width / 2, height / 2);\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 wanna make a hyperdrive","project_id":4676,"created_at":"2024-11-19T23:25:45.781461Z","output_tokens":null,"code_id":184718,"input_tokens":null,"id":90542},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4676,"created_at":"2024-11-19T23:25:48.414060Z","output_tokens":null,"code_id":184718,"input_tokens":null,"id":90543},{"deleted":0,"sender":"ai","message":"Great! It's exciting to start building your hyperdrive project. Could you tell me a bit more about your idea? Are you thinking of creating a game, a simulation, or something else entirely? What features would you like to include?","project_id":4676,"created_at":"2024-11-19T23:25:48.420182Z","output_tokens":null,"code_id":184718,"input_tokens":null,"id":90544},{"deleted":0,"sender":"human","message":"Lets make stars zoom at me like star wars","project_id":4676,"created_at":"2024-11-19T23:25:57.787051Z","output_tokens":null,"code_id":184719,"input_tokens":null,"id":90545},{"deleted":0,"sender":"ai","message":"That sounds like a fun feature to add! Creating a starfield effect where stars zoom towards the viewer can give a great sense of speed. Let's go ahead and implement this feature.\n\nFirst, we'll need to create a set of stars and animate them to move towards the screen. Here's how you can start:\n\n1. **Define a Star Class**: This will hold the properties and behavior of each star.\n2. **Create an Array of Stars**: Initialize multiple stars at random positions.\n3. **Animate the Stars**: Update their positions to simulate the zoom effect.\n\nLet's add each part step by step.\n\n### Step 1: Define a Star Class\n\nAdd the following class 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 stars\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\n const sx = map(this.x / this.z, 0, 1, 0, windowWidth);\n const sy = map(this.y / this.z, 0, 1, 0, windowHeight);\n\n const r = map(this.z, 0, windowWidth, 8, 0);\n ellipse(sx, sy, r, r);\n }\n}\n```\n\n- **Class Star**: Holds the position and depth of each star.\n- **update()**: Moves stars closer, resetting them when they reach the viewer.\n- **show()**: Calculates the position and size of the star on the screen.\n\n### Step 2: Create an Array of Stars\n\nAdd these lines at the beginning of your `script.js` file to initialize and store stars:\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 background(135, 206, 235); // Sky blue background\n}\n```\n\n- **stars**: An array to store star objects.\n- **setup()**: Fills the array with star objects.\n\n### Step 3: Animate the Stars\n\nUpdate the `draw` function in your `script.js` file to animate the stars:\n\n```javascript\nfunction draw() {\n background(0); // Black background for space\n\n translate(width / 2, height / 2);\n for (let star of stars) {\n star.update();\n star.show();\n }\n}\n```\n\n- **draw()**: Clears the screen each frame and updates the position and display of stars.\n- **translate()**: Moves the origin to the center for a better effect.\n\nThis should give you a nice starfield effect like the one you see in space scenes in movies. Let me know how it looks and if you want to tweak or add anything else!","project_id":4676,"created_at":"2024-11-19T23:25:57.794768Z","output_tokens":null,"code_id":184719,"input_tokens":null,"id":90546}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}