Retro Asteroids Game

{"name":"Retro Asteroids Game","description":"Dive into the nostalgia of classic arcade gaming by recreating the original Asteroids game using p5.js. This project will guide you through building a space adventure where you dodge and destroy asteroids while piloting a spaceship. Perfect for learning basic game development and having fun along the way! Get ready to code your way through the cosmos!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-06-03T18:36:12.076669Z","updated_at":"2025-06-03T18:36:12.076671Z","user_id":60,"status":"PRIVATE","parent_id":8089,"id":8143,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"code":{"script.js":"let shootSound;\n\nlet explosionSound;\n\nlet explosions = [];\n\nlet spaceship;\n\nlet asteroids = [];\n\nlet bullets = [];\n\nlet stars = [];\n\nlet score = 0;\n\nlet health = 3;\n\nlet gameOver = false;\n\nlet asteroidSpeed = 1;\n\nlet asteroidSize = 30;\n\nfunction preload() {\n explosionSound = loadSound(\"@asset('Explosion')\"); // Load explosion sound correctly\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0); // Black background\n\n // Create star positions and store them in the stars array\n for (let i = 0; i < 100; i++) {\n stars.push(createVector(random(width), random(height)));\n }\n\n spaceship = new Spaceship();\n for (let i = 0; i < 5; i++) {\n asteroids.push(new Asteroid());\n }\n}\n\nfunction draw() {\n background(0); // Black background\n\n // Draw the stars\n stroke(255);\n for (let star of stars) {\n point(star.x, star.y);\n }\n\n // Display score\n fill(255);\n textSize(24);\n text(`Score: ${score}`, 10, 30);\n\n // Display health bars\n for (let i = 0; i < health; i++) {\n fill(255, 0, 0);\n rect(10 + i * 30, 50, 20, 5); // Draw health bar\n }\n\n // Update and display explosions\n for (let i = explosions.length - 1; i >= 0; i--) {\n explosions[i].update();\n explosions[i].display();\n if (explosions[i].isFinished()) {\n explosions.splice(i, 1); // Remove finished explosions\n }\n }\n\n if (!gameOver) {\n spaceship.update();\n spaceship.display();\n\n for (let i = bullets.length - 1; i >= 0; i--) {\n const bullet = bullets[i];\n if (bullet) { // Check if the bullet is defined\n bullet.update();\n bullet.display();\n }\n }\n\n for (let i = asteroids.length - 1; i >= 0; i--) {\n asteroids[i].update();\n asteroids[i].display();\n\n // Check for collision with bullets\n for (let j = bullets.length - 1; j >= 0; j--) {\n const bullet = bullets[j];\n if (bullet && asteroids[i].isHit(bullet)) {\n score += 10; // Increase score\n bullets.splice(j, 1); // Remove bullet\n\n // Create explosion at asteroid position before removing it\n explosions.push(new Explosion(asteroids[i].position.x, asteroids[i].position.y));\n explosionSound.setVolume(0.5); // Set volume to half\n explosionSound.play(); // Play explosion sound\n\n asteroids.splice(i, 1); // Remove asteroid\n break; // Break to avoid modifying the array during iteration\n }\n }\n\n // Check for collision with spaceship\n if (asteroids[i] && spaceship.isHit(asteroids[i])) {\n health--; // Decrease health\n asteroids.splice(i, 1); // Remove asteroid\n if (health <= 0) {\n gameOver = true; // Set game over flag\n }\n }\n }\n } else {\n // Display game over message\n fill(255);\n textSize(48);\n textAlign(CENTER);\n text(\"Game Over\", width / 2, height / 2);\n textSize(24);\n text(\"Score: \" + score, width / 2, height / 2 + 40);\n }\n}\n\nclass Spaceship {\n constructor() {\n this.position = createVector(width / 2, height / 2);\n this.velocity = createVector(0, 0);\n this.angle = 0;\n }\n\n update() {\n // Movement controls\n if (keyIsDown(87)) { // W key\n this.velocity.add(p5.Vector.fromAngle(this.angle).mult(0.1));\n }\n if (keyIsDown(83)) { // S key\n this.velocity.sub(p5.Vector.fromAngle(this.angle).mult(0.1));\n }\n if (keyIsDown(65)) { // A key\n this.angle -= 0.1; // Increased rotation speed\n }\n if (keyIsDown(68)) { // D key\n this.angle += 0.1; // Increased rotation speed\n }\n\n this.position.add(this.velocity);\n this.velocity.mult(0.99); // Friction\n\n // Wrap around screen\n this.position.x = (this.position.x + width) % width;\n this.position.y = (this.position.y + height) % height;\n }\n\n display() {\n push();\n translate(this.position.x, this.position.y);\n rotate(this.angle + PI / 2);\n stroke(255); // Set stroke color to white\n strokeWeight(2); // Set stroke weight for line style\n noFill(); // Remove fill\n beginShape();\n vertex(0, -20); // Tip of the spaceship\n vertex(-10, 10); // Bottom left\n vertex(10, 10); // Bottom right\n endShape(CLOSE);\n pop();\n }\n\n isHit(asteroid) {\n // Check for collision with the asteroid\n let d = dist(this.position.x, this.position.y, asteroid.position.x, asteroid.position.y);\n return d < asteroid.size; // Collision if the distance is less than the asteroid's size\n }\n}\n\nclass Asteroid {\n constructor(size = asteroidSize) {\n // Randomly choose an edge of the screen\n let edge = floor(random(4));\n switch (edge) {\n case 0: // Top edge\n this.position = createVector(random(width), 0);\n break;\n case 1: // Bottom edge\n this.position = createVector(random(width), height);\n break;\n case 2: // Left edge\n this.position = createVector(0, random(height));\n break;\n case 3: // Right edge\n this.position = createVector(width, random(height));\n break;\n }\n this.velocity = p5.Vector.random2D().mult(asteroidSpeed);\n this.size = size;\n }\n\n update() {\n this.position.add(this.velocity);\n // Wrap around screen\n this.position.x = (this.position.x + width) % width;\n this.position.y = (this.position.y + height) % height;\n }\n\n display() {\n stroke(150); // Set stroke color for asteroids\n strokeWeight(2); // Set stroke weight for line style\n noFill(); // Remove fill\n beginShape();\n for (let i = 0; i < 10; i++) {\n let angle = map(i, 0, 10, 0, TWO_PI);\n let radius = this.size + random(-5, 5); // Irregular shape\n let x = this.position.x + cos(angle) * radius;\n let y = this.position.y + sin(angle) * radius;\n vertex(x, y);\n }\n endShape(CLOSE);\n }\n\n isHit(bullet) {\n // Check for collision with the bullet\n let d = dist(this.position.x, this.position.y, bullet.position.x, bullet.position.y);\n return d < this.size; // Collision if the distance is less than the asteroid's size\n }\n}\n\nclass Bullet {\n constructor(x, y, angle) {\n this.position = createVector(x, y);\n this.velocity = p5.Vector.fromAngle(angle).mult(10);\n }\n\n update() {\n this.position.add(this.velocity);\n }\n\n display() {\n stroke(255, 0, 0); // Set stroke color for bullets\n strokeWeight(2); // Set stroke weight\n noFill(); // Remove fill\n ellipse(this.position.x, this.position.y, 5, 5);\n }\n}\n\nfunction mousePressed() {\n bullets.push(new Bullet(spaceship.position.x, spaceship.position.y, spaceship.angle));\n}\n\nfunction keyPressed() {\n if (key === ' ') { // Space bar to shoot\n bullets.push(new Bullet(spaceship.position.x, spaceship.position.y, spaceship.angle));\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Retro Asteroids Game\n \n \n \n \n \n \n\n\n\n\n\n","Explosion.js":"class Explosion {\n constructor(x, y) {\n this.position = createVector(x, y);\n this.size = 30; // Size of the explosion\n this.lifespan = 30; // Duration of the explosion\n }\n\n update() {\n this.lifespan--;\n }\n\n display() {\n stroke(255, 255, 0);\n strokeWeight(3);\n noFill();\n ellipse(this.position.x, this.position.y, this.size, this.size);\n }\n\n isFinished() {\n return this.lifespan <= 0;\n }\n}"},"chat_history":[{"code_id":247708,"deleted":0,"input_tokens":null,"id":146048,"project_id":8143,"sender":"client_script","message":"Errors:\nUncaught TypeError: Cannot read properties of undefined (reading 'position') at 172:65 in script.js\n Errors:\nUncaught TypeError: Cannot read properties of undefined (reading 'position') at 172:65 in script.js","created_at":"2025-06-03T18:36:28.221206Z","output_tokens":null},{"code_id":247708,"deleted":0,"input_tokens":4738,"id":146049,"project_id":8143,"sender":"ai","message":"It looks like there's an error occurring because the code is trying to access the `position` property of something that is `undefined`. This is happening in the bullet collision detection part of your `draw` function.\n\nTo fix this, we need to make sure that the bullet exists before trying to access its properties. Let's address this error by ensuring that each bullet is defined before checking for a collision with the asteroids.\n\nHere's how you can modify the code to handle this:\n\n```javascript\n// script.js\nfunction draw() {\n background(0); // Black background\n\n // Draw the stars\n stroke(255);\n for (let star of stars) {\n point(star.x, star.y);\n }\n\n // Display score\n fill(255);\n textSize(24);\n text(`Score: ${score}`, 10, 30);\n\n // Display health bars\n for (let i = 0; i < health; i++) {\n fill(255, 0, 0);\n rect(10 + i * 30, 50, 20, 5); // Draw health bar\n }\n\n // Update and display explosions\n for (let i = explosions.length - 1; i >= 0; i--) {\n explosions[i].update();\n explosions[i].display();\n if (explosions[i].isFinished()) {\n explosions.splice(i, 1); // Remove finished explosions\n }\n }\n\n if (!gameOver) {\n spaceship.update();\n spaceship.display();\n\n for (let i = bullets.length - 1; i >= 0; i--) {\n const bullet = bullets[i];\n if (bullet) { // Check if the bullet is defined\n bullet.update();\n bullet.display();\n }\n }\n\n for (let i = asteroids.length - 1; i >= 0; i--) {\n asteroids[i].update();\n asteroids[i].display();\n\n // Check for collision with bullets\n for (let j = bullets.length - 1; j >= 0; j--) {\n const bullet = bullets[j];\n if (bullet && asteroids[i].isHit(bullet)) {\n score += 10; // Increase score\n bullets.splice(j, 1); // Remove bullet\n\n // Create explosion at asteroid position before removing it\n explosions.push(new Explosion(asteroids[i].position.x, asteroids[i].position.y));\n explosionSound.setVolume(0.5); // Set volume to half\n explosionSound.play(); // Play explosion sound\n\n asteroids.splice(i, 1); // Remove asteroid\n break; // Break to avoid modifying the array during iteration\n }\n }\n\n // Check for collision with spaceship\n if (spaceship.isHit(asteroids[i])) {\n health--; // Decrease health\n asteroids.splice(i, 1); // Remove asteroid\n if (health <= 0) {\n gameOver = true; // Set game over flag\n }\n }\n }\n } else {\n // Display game over message\n fill(255);\n textSize(48);\n textAlign(CENTER);\n text(\"Game Over\", width / 2, height / 2);\n textSize(24);\n text(\"Score: \" + score, width / 2, height / 2 + 40);\n }\n}\n```\n\n- This code modification checks if each bullet is defined before trying to update or display it.\n- Similarly, it ensures the bullet exists before checking for a collision with an asteroid.\n- This should prevent the `TypeError` you encountered by avoiding dereferencing `undefined` objects.\n\nTry these changes and let me know if it resolves the error!","created_at":"2025-06-03T18:36:28.382733Z","output_tokens":860},{"code_id":247708,"deleted":0,"input_tokens":null,"id":146053,"project_id":8143,"sender":"client_script","message":"","created_at":"2025-06-03T18:37:46.072921Z","output_tokens":null},{"code_id":247712,"deleted":0,"input_tokens":null,"id":146057,"project_id":8143,"sender":"client_script","message":"","created_at":"2025-06-03T18:40:01.421417Z","output_tokens":null},{"code_id":247712,"deleted":0,"input_tokens":null,"id":146059,"project_id":8143,"sender":"client_script","message":"ERROR: Uncaught TypeError: Cannot read properties of undefined (reading 'position') at 173:65 in script.js\n Errors:\n","created_at":"2025-06-03T18:40:04.872587Z","output_tokens":null},{"code_id":247712,"deleted":0,"input_tokens":4742,"id":146060,"project_id":8143,"sender":"ai","message":"It seems like you're experiencing an error due to trying to access the `position` property of an `undefined` object. This likely occurs when bullets or asteroids are removed from their respective arrays, but the loop continues to access them. We can fix this by ensuring we only access objects that are defined.\n\nTo address this, let's make sure we're checking if the bullets and asteroids exist before accessing their properties. Here's how you can modify your code to handle this error:\n\n```javascript\n// script.js\nfunction draw() {\n background(0); // Black background\n\n // Draw the stars\n stroke(255);\n for (let star of stars) {\n point(star.x, star.y);\n }\n\n // Display score\n fill(255);\n textSize(24);\n text(`Score: ${score}`, 10, 30);\n\n // Display health bars\n for (let i = 0; i < health; i++) {\n fill(255, 0, 0);\n rect(10 + i * 30, 50, 20, 5); // Draw health bar\n }\n\n // Update and display explosions\n for (let i = explosions.length - 1; i >= 0; i--) {\n explosions[i].update();\n explosions[i].display();\n if (explosions[i].isFinished()) {\n explosions.splice(i, 1); // Remove finished explosions\n }\n }\n\n if (!gameOver) {\n spaceship.update();\n spaceship.display();\n\n for (let i = bullets.length - 1; i >= 0; i--) {\n const bullet = bullets[i];\n if (bullet) { // Check if the bullet is defined\n bullet.update();\n bullet.display();\n }\n }\n\n for (let i = asteroids.length - 1; i >= 0; i--) {\n const asteroid = asteroids[i];\n if (asteroid) { // Check if the asteroid is defined\n asteroid.update();\n asteroid.display();\n\n // Check for collision with bullets\n for (let j = bullets.length - 1; j >= 0; j--) {\n const bullet = bullets[j];\n if (bullet && asteroid.isHit(bullet)) {\n score += 10; // Increase score\n bullets.splice(j, 1); // Remove bullet\n\n // Create explosion at asteroid position before removing it\n explosions.push(new Explosion(asteroid.position.x, asteroid.position.y));\n explosionSound.setVolume(0.5); // Set volume to half\n explosionSound.play(); // Play explosion sound\n\n asteroids.splice(i, 1); // Remove asteroid\n break; // Break to avoid modifying the array during iteration\n }\n }\n\n // Check for collision with spaceship\n if (spaceship.isHit(asteroid)) {\n health--; // Decrease health\n asteroids.splice(i, 1); // Remove asteroid\n if (health <= 0) {\n gameOver = true; // Set game over flag\n }\n }\n }\n }\n } else {\n // Display game over message\n fill(255);\n textSize(48);\n textAlign(CENTER);\n text(\"Game Over\", width / 2, height / 2);\n textSize(24);\n text(\"Score: \" + score, width / 2, height / 2 + 40);\n }\n}\n```\n\n- Added checks to ensure that bullets and asteroids are defined before accessing their properties.\n- This prevents trying to read properties from `undefined` objects, thus avoiding the `TypeError`.\n- The logic for handling collisions and updating game state remains the same but now includes these additional checks.\n\nTry these changes and let me know if the issue is resolved!","created_at":"2025-06-03T18:40:04.964066Z","output_tokens":916}],"assets":[{"project_id":8143,"created_at":"2025-06-03T18:36:12.080743Z","resource_type":"video","id":75196,"cloudinary_id":"ljj96wg0gy7ge5bziyx7","name":"Explosion","deleted":false}],"messages_sent":0,"comments":[],"steps":[]}