Hyperdrive Adventure

{"name":"Hyperdrive Adventure","description":"Embark on an exhilarating journey through the cosmos with Hyperdrive Adventure! Navigate your spaceship through uncharted galaxies, dodge asteroids, and collect power-ups to enhance your speed. With easy-to-use controls and colorful graphics, this interactive experience will ignite your passion for programming while keeping you entertained!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-02-05T19:10:07.740245Z","updated_at":"2025-02-05T19:10:07.740249Z","user_id":181,"status":"PRIVATE","parent_id":null,"id":5754,"user":{"username":"godlover4sara_7230","id":181,"password_hash":"$2b$12$1DCv9y2okn6Vn33npwN79OworUFt5TD/AyKoWzGGVl0RFZXAbST2m","updated_at":"2024-08-19T18:23:01.459302Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"sara.saxon@alpha.school","recess_id":"77ec586b-018d-4064-a82e-4c2664d6a2c9","created_at":"2024-08-19T18:23:01.459298Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"// Global variables\nlet playerX = 50;\nlet playerY = 200;\nlet score = 0;\nlet obstacles = [300, 400, 500, 600, 700];\nlet obstacleColors = [];\nlet obstacleSpeed = 2;\nlet isActive = false;\nlet gravity = 1;\nlet yChange = 0;\n\n// Colors\nconst white = [255, 255, 255];\nconst black = [0, 0, 0];\nconst green = [0, 255, 0];\nconst orange = [255, 165, 0];\nconst yellow = [255, 255, 0];\nconst red = [255, 0, 0];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Create a canvas that fills the entire window\n textAlign(CENTER);\n for (let i = 0; i < obstacles.length; i++) {\n obstacleColors.push(random([orange, yellow, red]));\n }\n}\n\nfunction draw() {\n background(black);\n \n // Draw floor\n fill(white);\n rect(0, height - 20, width, 20); // Adjust floor position to be at the bottom of the canvas\n \n // Draw player\n fill(green);\n rect(playerX, playerY, 20, 20); // Player position\n \n // Draw obstacles\n for (let i = 0; i < obstacles.length; i++) {\n fill(obstacleColors[i]);\n rect(obstacles[i], height - 40, 20, 20); // Obstacle position\n if (isActive) {\n obstacles[i] -= obstacleSpeed;\n if (obstacles[i] < -20) {\n obstacles[i] = random(width + 20, width + 100); // Reset obstacle to the right of the canvas\n score++;\n }\n }\n \n // Check for collision with obstacles\n if (playerX < obstacles[i] + 20 && playerX + 20 > obstacles[i] && playerY + 20 > height - 40) {\n resetGame(); // Reset the game on collision\n }\n }\n\n // Display score\n fill(white);\n text(`Score: ${score}`, width / 2, height - 50); // Adjust score display position\n\n // Gravity effect on player\n if (playerY < height - 20) {\n playerY -= yChange;\n yChange -= gravity;\n }\n if (playerY > height - 20) {\n playerY = height - 20; // Keep player above the floor\n yChange = 0;\n }\n}\n\n// Key controls\nfunction keyPressed() {\n if (key === ' ' && !isActive) {\n isActive = true;\n yChange = 18; // Jump\n }\n if (keyCode === RIGHT_ARROW) {\n playerX += 2; // Move right\n }\n if (keyCode === LEFT_ARROW) {\n playerX -= 2; // Move left\n }\n}\n\n// Reset game function\nfunction resetGame() {\n playerX = 50; // Reset player position\n playerY = 200; // Reset player Y position\n score = 0; // Reset score\n isActive = false; // Reset game state\n obstacles = [300, 400, 500, 600, 700]; // Reset obstacles\n obstacleColors = []; // Clear obstacle colors\n for (let i = 0; i < obstacles.length; i++) {\n obstacleColors.push(random([orange, yellow, red])); // Reinitialize obstacle colors\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,"code_id":207405,"input_tokens":null,"id":107149,"project_id":5754,"sender":"human","message":"I want to create a hyperdrive","created_at":"2025-02-05T19:10:07.776516Z","output_tokens":null},{"deleted":0,"code_id":207406,"input_tokens":null,"id":107150,"project_id":5754,"sender":"client_script","message":"Errors:\nUncaught SyntaxError: Cannot use import statement outside a module at 1:1 in script.js\n Errors:\nUncaught SyntaxError: Cannot use import statement outside a module at 1:1 in script.js","created_at":"2025-02-05T19:10:37.990683Z","output_tokens":null},{"deleted":0,"code_id":207406,"input_tokens":1337,"id":107151,"project_id":5754,"sender":"ai","message":"The error you're seeing is because you're trying to use an `import` statement in a context where it's not allowed. The `import` statement is typically used in a module system like Node.js or when using a build tool like Webpack, which isn't the case here since you're directly running the JavaScript in the browser.\n\nTo fix this issue, you need to adjust your setup to ensure that the `import` statement is executed in an environment that supports it, or you need to refactor your code to not rely on `import`. \n\nHowever, since you are using JavaScript in a browser context with a `\n\n\n \n\n\n```\n\n### Summary of Changes:\n- The canvas now fills the entire window using `createCanvas(windowWidth, windowHeight)`.\n- Adjusted the positions of the floor, obstacles, and player to fit the new canvas size.\n\nPlease replace your existing files with the code above. If you have any further questions or need more adjustments, feel free to ask!","created_at":"2025-02-05T19:15:25.126534Z","output_tokens":751},{"deleted":0,"code_id":207414,"input_tokens":null,"id":107172,"project_id":5754,"sender":"human","message":"make it so the player is above the white space","created_at":"2025-02-05T19:16:42.671187Z","output_tokens":null},{"deleted":0,"code_id":207414,"input_tokens":3032,"id":107173,"project_id":5754,"sender":"ai","message":"To ensure that the player appears above the white space (the floor) in your game, you need to adjust the `playerY` position so that it is slightly above the floor. \n\nCurrently, the floor is drawn at `height - 20`, so you can set the player's `y` position to be slightly higher than that, for example at `height - 40`. Here’s how to make that adjustment:\n\n### Updated `draw` Function\n```javascript\nfunction draw() {\n background(black);\n \n // Draw floor\n fill(white);\n rect(0, height - 20, width, 20); // Floor position\n \n // Draw player\n fill(green);\n rect(playerX, height - 40, 20, 20); // Adjusted player position to be above the floor\n \n // Draw obstacles\n for (let i = 0; i < obstacles.length; i++) {\n fill(obstacleColors[i]);\n rect(obstacles[i], height - 40, 20, 20); // Obstacle position above the floor\n if (isActive) {\n obstacles[i] -= obstacleSpeed;\n if (obstacles[i] < -20) {\n obstacles[i] = random(width + 20, width + 100); // Reset obstacle to the right of the canvas\n score++;\n }\n }\n }\n\n // Display score\n fill(white);\n text(`Score: ${score}`, width / 2, height - 50); // Score display position\n\n // Gravity effect on player\n if (playerY < height - 20) {\n playerY -= yChange;\n yChange -= gravity;\n }\n if (playerY > height - 20) {\n playerY = height - 20; // Keep player on the floor\n yChange = 0;\n }\n}\n```\n\n### Summary of Changes:\n- **Player Position**: Changed the player's `y` position in the `draw` function to `height - 40`, which places the player above the floor.\n \nNow, the player character should appear clearly above the white floor space. Please replace the `draw` function in your `script.js` with the updated version provided above, and let me know if you need any further adjustments!","created_at":"2025-02-05T19:16:42.681042Z","output_tokens":472},{"deleted":0,"code_id":207414,"input_tokens":null,"id":107174,"project_id":5754,"sender":"human","message":"give me all the code please","created_at":"2025-02-05T19:17:02.719856Z","output_tokens":null},{"deleted":0,"code_id":207414,"input_tokens":3028,"id":107175,"project_id":5754,"sender":"ai","message":"Sure! Here’s the complete code for your hyperdrive game, ensuring that the player appears above the white floor and that the game fills the entire screen.\n\n### `script.js`\n```javascript\n// Global variables\nlet playerX = 50;\nlet playerY = 200;\nlet score = 0;\nlet obstacles = [300, 400, 500, 600, 700];\nlet obstacleColors = [];\nlet obstacleSpeed = 2;\nlet isActive = false;\nlet gravity = 1;\nlet yChange = 0;\n\n// Colors\nconst white = [255, 255, 255];\nconst black = [0, 0, 0];\nconst green = [0, 255, 0];\nconst orange = [255, 165, 0];\nconst yellow = [255, 255, 0];\nconst red = [255, 0, 0];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Create a canvas that fills the entire window\n textAlign(CENTER);\n for (let i = 0; i < obstacles.length; i++) {\n obstacleColors.push(random([orange, yellow, red]));\n }\n}\n\nfunction draw() {\n background(black);\n \n // Draw floor\n fill(white);\n rect(0, height - 20, width, 20); // Adjust floor position to be at the bottom of the canvas\n \n // Draw player\n fill(green);\n rect(playerX, height - 40, 20, 20); // Adjusted player position to be above the floor\n \n // Draw obstacles\n for (let i = 0; i < obstacles.length; i++) {\n fill(obstacleColors[i]);\n rect(obstacles[i], height - 40, 20, 20); // Adjust obstacle position to be above the floor\n if (isActive) {\n obstacles[i] -= obstacleSpeed;\n if (obstacles[i] < -20) {\n obstacles[i] = random(width + 20, width + 100); // Reset obstacle to the right of the canvas\n score++;\n }\n }\n }\n\n // Display score\n fill(white);\n text(`Score: ${score}`, width / 2, height - 50); // Adjust score display position\n\n // Gravity effect on player\n if (playerY < height - 20) {\n playerY -= yChange;\n yChange -= gravity;\n }\n if (playerY > height - 20) {\n playerY = height - 20; // Adjust player position to be above the floor\n yChange = 0;\n }\n}\n\n// Key controls\nfunction keyPressed() {\n if (key === ' ' && !isActive) {\n isActive = true;\n yChange = 18; // Jump\n }\n if (keyCode === RIGHT_ARROW) {\n playerX += 2;\n }\n if (keyCode === LEFT_ARROW) {\n playerX -= 2;\n }\n}\n```\n\n### `style.css`\n```css\nbody { margin: 0; }\ncanvas { display: block; }\n```\n\n### `index.html`\n```html\n\n\n\n \n \n Hyperdrive Adventure\n \n \n\n\n \n\n\n```\n\n### Summary of Adjustments:\n- The player is now positioned at `height - 40` to appear above the white floor.\n- The canvas fills the entire window, ensuring a better gameplay experience.\n\nFeel free to copy and paste this code into your project files, and let me know if you need any further changes or features!","created_at":"2025-02-05T19:17:02.746880Z","output_tokens":770},{"deleted":0,"code_id":207416,"input_tokens":null,"id":107176,"project_id":5754,"sender":"human","message":"make it so when you press space player will jump, if player touches the obstacles, game is started over","created_at":"2025-02-05T19:18:14.907454Z","output_tokens":null},{"deleted":0,"code_id":207416,"input_tokens":3055,"id":107177,"project_id":5754,"sender":"ai","message":"To implement the functionality where the player jumps when the space key is pressed, and the game restarts if the player touches an obstacle, you can modify your code as follows:\n\n1. **Add Collision Detection**: Check if the player is touching any obstacles.\n2. **Reset the Game**: If a collision is detected, reset the game state (score, player position, and obstacles).\n\nHere’s how to modify your existing code:\n\n### Updated `script.js`\n```javascript\n// Global variables\nlet playerX = 50;\nlet playerY = 200;\nlet score = 0;\nlet obstacles = [300, 400, 500, 600, 700];\nlet obstacleColors = [];\nlet obstacleSpeed = 2;\nlet isActive = false;\nlet gravity = 1;\nlet yChange = 0;\n\n// Colors\nconst white = [255, 255, 255];\nconst black = [0, 0, 0];\nconst green = [0, 255, 0];\nconst orange = [255, 165, 0];\nconst yellow = [255, 255, 0];\nconst red = [255, 0, 0];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Create a canvas that fills the entire window\n textAlign(CENTER);\n for (let i = 0; i < obstacles.length; i++) {\n obstacleColors.push(random([orange, yellow, red]));\n }\n}\n\nfunction draw() {\n background(black);\n \n // Draw floor\n fill(white);\n rect(0, height - 20, width, 20); // Adjust floor position to be at the bottom of the canvas\n \n // Draw player\n fill(green);\n rect(playerX, playerY, 20, 20); // Player position\n \n // Draw obstacles\n for (let i = 0; i < obstacles.length; i++) {\n fill(obstacleColors[i]);\n rect(obstacles[i], height - 40, 20, 20); // Obstacle position\n if (isActive) {\n obstacles[i] -= obstacleSpeed;\n if (obstacles[i] < -20) {\n obstacles[i] = random(width + 20, width + 100); // Reset obstacle to the right of the canvas\n score++;\n }\n }\n \n // Check for collision with obstacles\n if (playerX < obstacles[i] + 20 && playerX + 20 > obstacles[i] && playerY + 20 > height - 40) {\n resetGame(); // Reset the game on collision\n }\n }\n\n // Display score\n fill(white);\n text(`Score: ${score}`, width / 2, height - 50); // Adjust score display position\n\n // Gravity effect on player\n if (playerY < height - 20) {\n playerY -= yChange;\n yChange -= gravity;\n }\n if (playerY > height - 20) {\n playerY = height - 20; // Keep player above the floor\n yChange = 0;\n }\n}\n\n// Key controls\nfunction keyPressed() {\n if (key === ' ' && !isActive) {\n isActive = true;\n yChange = 18; // Jump\n }\n if (keyCode === RIGHT_ARROW) {\n playerX += 2; // Move right\n }\n if (keyCode === LEFT_ARROW) {\n playerX -= 2; // Move left\n }\n}\n\n// Reset game function\nfunction resetGame() {\n playerX = 50; // Reset player position\n playerY = 200; // Reset player Y position\n score = 0; // Reset score\n isActive = false; // Reset game state\n obstacles = [300, 400, 500, 600, 700]; // Reset obstacles\n obstacleColors = []; // Clear obstacle colors\n for (let i = 0; i < obstacles.length; i++) {\n obstacleColors.push(random([orange, yellow, red])); // Reinitialize obstacle colors\n }\n}\n```\n\n### Summary of Changes:\n- **Collision Detection**: Added a check to see if the player intersects with any obstacles. If so, the game resets.\n- **Reset Game Function**: Created a `resetGame` function that resets the player's position, score, and obstacles.\n\nPlease replace your existing `script.js` file with the updated code provided above. This will allow the player to jump and restart the game upon hitting an obstacle. Let me know if you need further adjustments!","created_at":"2025-02-05T19:18:14.929192Z","output_tokens":915}],"assets":[],"messages_sent":9,"comments":[],"steps":[]}