Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Buckle up for a thrilling journey through the cosmos with Hyperdrive Adventure! Navigate your spaceship through dazzling starfields and avoid cosmic obstacles. With exciting controls and engaging gameplay, you'll race against time to reach warp speed and rack up points. Are you ready to blast off into the unknown?","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-15T19:17:54.146298Z","updated_at":"2024-11-15T19:17:54.146302Z","user_id":1,"status":"PRIVATE","parent_id":null,"id":4602,"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 the stars\nlet speed = 10; // Speed at which stars zoom in\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) { // Create 800 stars\n stars[i] = new Star();\n }\n background(0); // Black background to represent space\n}\n\nclass Star {\n constructor() {\n this.x = random(-width, width);\n this.y = random(-height, height);\n this.z = random(width);\n }\n \n update() {\n this.z = this.z - speed;\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\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 let r = map(this.z, 0, width, 16, 0); // Size of the star\n ellipse(sx, sy, r, r);\n }\n}\n\nfunction draw() {\n background(0); // Clear the screen each frame\n translate(width / 2, height / 2); // Move origin to center of canvas\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 make a hyperdrive","project_id":4602,"created_at":"2024-11-15T19:17:54.327721Z","output_tokens":null,"code_id":183757,"input_tokens":null,"id":89999},{"deleted":0,"sender":"human","message":"Let's get started!","project_id":4602,"created_at":"2024-11-15T19:18:05.736565Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90000},{"deleted":0,"sender":"ai","message":"That sounds like a fun project! Could you tell me a bit more about what you're imagining for your hyperdrive? Are you thinking of making a game, an animation, or something else? What kind of features would you like to include?","project_id":4602,"created_at":"2024-11-15T19:18:05.743792Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90001},{"deleted":0,"sender":"human","message":"stars zoom at me like star wars","project_id":4602,"created_at":"2024-11-15T19:18:15.134249Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90002},{"deleted":0,"sender":"ai","message":"Great idea! We can create a starfield effect where stars zoom towards the viewer, similar to what you see in Star Wars when jumping to hyperspace. Let's start by setting up some stars that will move towards the center of the screen.\n\nHere are a couple of questions to get us started:\n1. How fast do you want the stars to move? Do you want them to accelerate over time, or stay at a constant speed?\n2. Do you want the stars to have any color, or should they just be white?","project_id":4602,"created_at":"2024-11-15T19:18:15.258661Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90003},{"deleted":0,"sender":"human","message":"tons of stars zoom at me","project_id":4602,"created_at":"2024-11-15T19:18:30.884282Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90004},{"deleted":0,"sender":"ai","message":"Got it! Let's create a starfield effect where stars zoom towards you, just like in a hyperdrive scene. We'll start by creating an array of stars and make them move towards the center of the screen.\n\nFirst, we'll need to set up some global variables and create the stars in the `setup` function.\n\n```javascript\nlet stars = []; // Array to hold the stars\nlet speed = 10; // Speed at which stars zoom in\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n for (let i = 0; i < 800; i++) { // Create 800 stars\n stars[i] = new Star();\n }\n background(0); // Black background to represent space\n}\n```\n\nNext, we'll create a `Star` class to handle each star's properties and behavior.\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 }\n}\n```\n\nNow, let's update the `draw` function to make the stars move towards the center of the screen.\n\n```javascript\nfunction draw() {\n background(0); // Clear the screen each frame\n translate(width / 2, height / 2); // Move origin to center of canvas\n for (let i = 0; i < stars.length; i++) {\n stars[i].update();\n stars[i].show();\n }\n}\n```\n\nFinally, let's update the `Star` class to include methods for updating and displaying 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 }\n \n update() {\n this.z = this.z - speed;\n if (this.z < 1) {\n this.z = width;\n this.x = random(-width, width);\n this.y = random(-height, height);\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 let r = map(this.z, 0, width, 16, 0); // Size of the star\n ellipse(sx, sy, r, r);\n }\n}\n```\n\n- We create an array of stars and update each star's position to make it appear like it's zooming towards the center.\n- The `Star` class handles the position and speed of each star.\n- The `update` method moves the stars towards the center and resets them once they reach the screen.\n- The `show` method calculates the star's current screen position and displays it as an ellipse.\n\nFeel free to try this out, and let me know if you'd like to make any adjustments or add more features!","project_id":4602,"created_at":"2024-11-15T19:18:30.892695Z","output_tokens":null,"code_id":183758,"input_tokens":null,"id":90005}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}