Space Shooter Adventure

{"name":"Space Shooting Game","description":null,"photo":null,"view_count":8,"fork_count":0,"expires_at":null,"created_at":"2024-12-10T22:50:13.877627Z","updated_at":"2024-12-10T22:50:13.877629Z","user_id":14,"status":"PRIVATE","parent_id":null,"id":4472,"user":{"username":"lemonsarecool","id":14,"password_hash":"$2b$12$fiGY3tGGyHz6d8u/bsXIY.eGGFMpgKjFPhgdsoTZQ4DTnLohYNhFi","updated_at":"2023-12-12T21:13:30.547318Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"howardthomasclaire@gmail.com","recess_id":"7c8ecf78-a75e-15ec-b11f-b7d4661ff838","created_at":"2023-12-12T21:13:30.547316Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let spaceship;\nlet asteroids = []; // Array to store asteroid objects\nlet maxHealth = 5;\nlet collisionCooldown = 0; // Cooldown timer for collision\nlet projectiles = []; // Array to store projectiles\nlet shootCooldown = 0; // Cooldown timer for shooting\nlet SHOOT_COOLDOWN_TIME = 15; // Cooldown duration in frames\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n\n spaceship = {\n x: width / 2,\n y: height / 2,\n angle: 0,\n vx: 0,\n vy: 0,\n angularVelocity: 0,\n health: maxHealth,\n collisionCooldown: 0 // Initialize collision cooldown\n };\n\n // Initialize asteroids\n for (let i = 0; i < 20; i++) {\n asteroids.push(createAsteroid());\n }\n\n angleMode(DEGREES)\n}\n\nfunction draw() {\n background(0);\n noStroke();\n drawSpaceship();\n drawAsteroids();\n drawProjectiles(); // Call to draw projectiles\n if (spaceship.health > 0) {\n moveSpaceship();\n updateAsteroids();\n updateProjectiles(); // Call to update projectiles\n checkCollision(); // Check for collisions with asteroids\n checkAsteroidCollisions(); // Check for collisions between asteroids\n drawHealthBar(); // Draw the health bar\n // Update cooldown timer for shooting\n if (shootCooldown > 0) {\n shootCooldown--; // Decrease cooldown time\n }\n // Check if DOWN_ARROW is pressed and shoot\n if (keyIsDown(DOWN_ARROW) && shootCooldown <= 0) {\n shootProjectile();\n shootCooldown = SHOOT_COOLDOWN_TIME; // Reset cooldown timer\n }\n if (!keyIsDown(DOWN_ARROW)) {\n shootCooldown = 0\n }\n // Update cooldown timer for spaceship collision\n if (spaceship.collisionCooldown > 0) {\n spaceship.collisionCooldown--; // Decrease cooldown time\n }\n } else {\n displayGameOver(); // Show game over message\n }\n}\n\nfunction moveSpaceship() {\n if (keyIsDown(LEFT_ARROW)) {\n spaceship.angularVelocity -= 0.1; // Increase angular velocity left\n }\n if (keyIsDown(RIGHT_ARROW)) {\n spaceship.angularVelocity += 0.1; // Increase angular velocity right\n }\n\n // Apply friction to reduce angular velocity over time\n spaceship.angularVelocity *= 0.99; // Friction factor for angular velocity\n\n // Update the spaceship's angle\n spaceship.angle += spaceship.angularVelocity;\n\n if (keyIsDown(UP_ARROW)) {\n // Accelerate in the direction the spaceship is facing\n spaceship.vx += 0.1 * cos(spaceship.angle);\n spaceship.vy += 0.1 * sin(spaceship.angle);\n }\n\n // Apply friction to reduce velocity over time\n spaceship.vx *= 0.995; // Friction factor for x-velocity\n spaceship.vy *= 0.995; // Friction factor for y-velocity\n\n // Update the spaceship's position\n spaceship.x += spaceship.vx;\n spaceship.y += spaceship.vy;\n\n // Wrap around the edges of the canvas\n spaceship.x = (spaceship.x + width) % width;\n spaceship.y = (spaceship.y + height) % height;\n}\n\nfunction drawSpaceship() {\n push();\n translate(spaceship.x, spaceship.y);\n rotate(spaceship.angle + 90);\n fill(255);\n triangle(-10, 10, 10, 10, 0, -15); // Draw a simple triangle as the spaceship\n pop();\n}\n\nfunction shootProjectile() {\n // Create a new projectile at the spaceship's position\n let projectile = {\n x: spaceship.x, // Position at the center of the ship\n y: spaceship.y, // Position at the center of the ship\n vx: 5 * cos(spaceship.angle), // Velocity based on spaceship's angle\n vy: 5 * sin(spaceship.angle) // Velocity based on spaceship's angle\n };\n projectiles.push(projectile); // Add to projectiles array\n}\n\nfunction updateProjectiles() {\n // Iterate over projectiles array\n for (let i = projectiles.length - 1; i >= 0; i--) {\n let projectile = projectiles[i];\n projectile.x += projectile.vx;\n projectile.y += projectile.vy;\n\n // Remove projectile if it goes off screen\n if (projectile.x < 0 || projectile.x > width || projectile.y < 0 || projectile.y > height) {\n projectiles.splice(i, 1);\n } else {\n // Check for collision with asteroids\n for (let j = asteroids.length - 1; j >= 0; j--) {\n let asteroid = asteroids[j];\n if (dist(projectile.x, projectile.y, asteroid.x, asteroid.y) < asteroid.size / 2) {\n // Split asteroid if it's large enough\n if (asteroid.size > 40) {\n splitAsteroid(asteroid, projectile);\n }\n // Remove both the asteroid and the projectile\n asteroids.splice(j, 1); // Remove asteroid\n projectiles.splice(i, 1); // Remove projectile\n break; // Exit the loop once a collision is detected\n }\n }\n }\n }\n}\n\nfunction drawProjectiles() {\n stroke(255);\n strokeWeight(2);\n for (let projectile of projectiles) {\n line(projectile.x, projectile.y, projectile.x - projectile.vx * 2, projectile.y - projectile.vy * 2);\n }\n noStroke();\n}\n\nfunction createAsteroid() {\n // Function to create an asteroid with random position and velocity\n return {\n x: random(width),\n y: random(height),\n vx: random(-1, 1),\n vy: random(-1, 1),\n size: random(20, 50) // Random size for the asteroid\n };\n}\n\nfunction updateAsteroids() {\n // Update position of each asteroid\n for (let asteroid of asteroids) {\n asteroid.x += asteroid.vx;\n asteroid.y += asteroid.vy;\n\n // Wrap around the edges of the canvas\n asteroid.x = (asteroid.x + width) % width;\n asteroid.y = (asteroid.y + height) % height;\n }\n}\n\nfunction drawAsteroids() {\n fill(150);\n for (let asteroid of asteroids) {\n ellipse(asteroid.x, asteroid.y, asteroid.size); // Draw each asteroid as a circle\n }\n}\n\nfunction splitAsteroid(asteroid, projectile) {\n // Calculate the new size for the split asteroids\n let newSize = asteroid.size / 2;\n\n // Create two new asteroids at 90-degree angles from the original asteroid's angle\n let angleOffset1 = projectile.angle + 90; // 90 degrees clockwise from the original angle\n let angleOffset2 = projectile.angle - 90; // 90 degrees counterclockwise from the original angle\n\n // Create the first new asteroid\n let newAsteroid1 = {\n x: asteroid.x,\n y: asteroid.y,\n vx: asteroid.vx + cos(angleOffset1), // Add velocity based on the new angle\n vy: asteroid.vy + sin(angleOffset1), // Add velocity based on the new angle\n size: newSize\n };\n\n // Create the second new asteroid\n let newAsteroid2 = {\n x: asteroid.x,\n y: asteroid.y,\n vx: asteroid.vx + cos(angleOffset2), // Add velocity based on the new angle\n vy: asteroid.vy + sin(angleOffset2), // Add velocity based on the new angle\n size: newSize\n };\n\n // Add new asteroids to the array\n asteroids.push(newAsteroid1);\n asteroids.push(newAsteroid2);\n}\n\nfunction drawHealthBar() {\n fill(255, 0, 0); // Red color for the health bar\n rect(10, 10, 100, 20); // Background health bar\n fill(0, 255, 0); // Green color for remaining health\n rect(10, 10, spaceship.health * 100 / maxHealth, 20); // Health portion\n}\n\nfunction checkCollision() {\n for (let asteroid of asteroids) {\n let d = dist(spaceship.x, spaceship.y, asteroid.x, asteroid.y);\n\n // Use a consistent hitbox size for collision detection.\n let hitboxSize = 10; // Fixed hitbox size\n\n if (d < (asteroid.size / 2 + hitboxSize)) { // Adjusted hitbox size\n // Calculate the normal vector for collision response\n let normalX = spaceship.x - asteroid.x; // Normal vector x-component\n let normalY = spaceship.y - asteroid.y; // Normal vector y-component\n let magnitude = sqrt(normalX * normalX + normalY * normalY);\n\n if (magnitude > 0) {\n normalX /= magnitude; // Normalize the normal vector\n normalY /= magnitude;\n\n // Calculate the relative velocity\n let relativeVx = spaceship.vx - asteroid.vx;\n let relativeVy = spaceship.vy - asteroid.vy;\n\n // Only respond if moving towards each other\n if (relativeVx * normalX + relativeVy * normalY < 0) {\n // Calculate the total velocity along the normal\n let velocityAlongNormal = (relativeVx * normalX + relativeVy * normalY);\n\n // Small energy loss factor\n let energyLossFactor = 0.9;\n\n // New velocities after collision\n spaceship.vx -= energyLossFactor * velocityAlongNormal * normalX;\n spaceship.vy -= energyLossFactor * velocityAlongNormal * normalY;\n asteroid.vx += energyLossFactor * velocityAlongNormal * normalX;\n asteroid.vy += energyLossFactor * velocityAlongNormal * normalY;\n\n // Calculate angular velocity impact\n let impactAngle = atan2(relativeVy, relativeVx); // Angle of impact\n let angularImpact = sin(impactAngle - spaceship.angle) * velocityAlongNormal / 15; // Influence on angular velocity\n spaceship.angularVelocity += angularImpact; // Adjust angular velocity\n\n // Reduce health based on the speed of the collision\n let speed = sqrt(relativeVx * relativeVx + relativeVy * relativeVy);\n let healthReduction = map(speed, 0, 5, 0, 1); // Map speed to health reduction\n spaceship.health -= healthReduction; // Reduce health\n spaceship.health = max(spaceship.health, 0); // Ensure health doesn't go below 0\n }\n }\n }\n }\n}\n\nfunction checkAsteroidCollisions() {\n for (let i = 0; i < asteroids.length; i++) {\n for (let j = i + 1; j < asteroids.length; j++) {\n let asteroidA = asteroids[i];\n let asteroidB = asteroids[j];\n\n let d = dist(asteroidA.x, asteroidA.y, asteroidB.x, asteroidB.y);\n\n if (d < (asteroidA.size / 2 + asteroidB.size / 2)) {\n let normalX = asteroidA.x - asteroidB.x;\n let normalY = asteroidA.y - asteroidB.y;\n let magnitude = sqrt(normalX * normalX + normalY * normalY);\n\n if (magnitude > 0) {\n normalX /= magnitude;\n normalY /= magnitude;\n\n let relativeVx = asteroidA.vx - asteroidB.vx;\n let relativeVy = asteroidA.vy - asteroidB.vy;\n\n if (relativeVx * normalX + relativeVy * normalY < 0) {\n let velocityAlongNormal = (relativeVx * normalX + relativeVy * normalY);\n let energyLossFactor = 0.9;\n\n asteroidA.vx -= energyLossFactor * velocityAlongNormal * normalX;\n asteroidA.vy -= energyLossFactor * velocityAlongNormal * normalY;\n asteroidB.vx += energyLossFactor * velocityAlongNormal * normalX;\n asteroidB.vy += energyLossFactor * velocityAlongNormal * normalY;\n }\n }\n }\n }\n }\n}\n\nfunction displayGameOver() {\n stroke(255, 0, 0)\n strokeWeight(4)\n fill(255); // White color for the text\n textSize(32); // Set text size\n textAlign(CENTER, CENTER); // Center the text\n text(\"YOU. LOSE.\", width / 2, height / 2); // Display the message at the center of the canvas\n}","style.css":"body { margin: 0; font-family: Arial, sans-serif; background-color: black; color: white; }\ncanvas { display: block; }","index.html":"\n\n\n \n \n Space Shooter Adventure\n \n \n \n\n\n\n"},"chat_history":[{"project_id":4472,"message":"The projectile is not removed when we hit an asteroid with it. Please fix that.","created_at":"2024-12-19T23:58:48.599186Z","output_tokens":null,"deleted":0,"code_id":193960,"sender":"human","input_tokens":null,"id":97290},{"project_id":4472,"message":"

\n# Reasoning\nThe issue is likely due to the projectile not being removed from the array after it successfully hits an asteroid. We need to ensure that the projectile is removed correctly when a collision occurs.\n

\n\n

\n# Answer: \n

\n\nWe can fix this issue by ensuring the projectile is removed from the `projectiles` array immediately after colliding with an asteroid.\n\nLet's update the `updateProjectiles` function to resolve this:\n\n```javascript\nfunction updateProjectiles() {\n // Move each projectile and check for collisions with asteroids\n for (let i = projectiles.length - 1; i >= 0; i--) {\n let projectile = projectiles[i];\n projectile.x += projectile.vx;\n projectile.y += projectile.vy;\n\n // Remove projectile if it goes off screen\n if (projectile.x < 0 || projectile.x > width || projectile.y < 0 || projectile.y > height) {\n projectiles.splice(i, 1); // Delete the projectile from the array\n } else {\n // Check for collision with asteroids\n for (let j = asteroids.length - 1; j >= 0; j--) {\n let asteroid = asteroids[j];\n if (dist(projectile.x, projectile.y, asteroid.x, asteroid.y) < asteroid.size / 2) {\n // Split asteroid if large enough\n if (asteroid.size > 20) {\n splitAsteroid(asteroid, projectile);\n }\n // Remove the asteroid and projectile\n asteroids.splice(j, 1); // Delete the asteroid from the array\n projectiles.splice(i, 1); // Delete the projectile from the array\n break; // Exit the inner loop after collision\n }\n }\n }\n }\n}\n```\n\n- The function iterates through each projectile and updates its position.\n- If a projectile collides with an asteroid, both the asteroid and the projectile are removed from their respective arrays.\n- The check for collision with asteroids ensures that the projectile is removed immediately after a successful hit.\n- We use `splice` to remove elements from the arrays, ensuring no lingering projectiles remain.","created_at":"2024-12-19T23:58:48.606283Z","output_tokens":557,"deleted":0,"code_id":193960,"sender":"ai","input_tokens":5087,"id":97291},{"project_id":4472,"message":"Ok it now removes after it hits a few asteroids but still not intstantly. I think the problem might be the splicing? I'm not really sure.","created_at":"2024-12-19T23:59:53.733032Z","output_tokens":null,"deleted":0,"code_id":193960,"sender":"human","input_tokens":null,"id":97292},{"project_id":4472,"message":"Let's ensure that the projectile is removed immediately after it hits an asteroid by adjusting the logic within the loop. The key is to break out of the outer loop immediately when a collision is detected and processed. \n\nLet's update the `updateProjectiles` function:\n\n```javascript\nfunction updateProjectiles() {\n // Move each projectile and check for collisions with asteroids\n for (let i = projectiles.length - 1; i >= 0; i--) {\n let projectile = projectiles[i];\n projectile.x += projectile.vx;\n projectile.y += projectile.vy;\n\n // Remove projectile if it goes off screen\n if (projectile.x < 0 || projectile.x > width || projectile.y < 0 || projectile.y > height) {\n projectiles.splice(i, 1); // Delete the projectile from the array\n } else {\n // Check for collision with asteroids\n let hit = false; // Track if a projectile hits an asteroid\n for (let j = asteroids.length - 1; j >= 0; j--) {\n let asteroid = asteroids[j];\n if (dist(projectile.x, projectile.y, asteroid.x, asteroid.y) < asteroid.size / 2) {\n // Split asteroid if large enough\n if (asteroid.size > 20) {\n splitAsteroid(asteroid, projectile);\n }\n // Remove the asteroid\n asteroids.splice(j, 1); // Delete the asteroid from the array\n hit = true; // Mark that a hit occurred\n break; // Exit the inner loop after collision\n }\n }\n if (hit) {\n projectiles.splice(i, 1); // Remove the projectile after collision\n break; // Exit the outer loop after collision\n }\n }\n }\n}\n```\n\n- The function iterates through each projectile and updates its position.\n- When a collision between a projectile and an asteroid is detected, the asteroid is removed.\n- A `hit` flag is used to track whether a collision occurred. If a collision happens, the projectile is removed, and the outer loop exits immediately, ensuring it does not interact with other asteroids.\n- This should ensure that the projectile is removed immediately upon collision.","created_at":"2024-12-19T23:59:53.741095Z","output_tokens":563,"deleted":0,"code_id":193960,"sender":"ai","input_tokens":5103,"id":97293},{"project_id":4472,"message":"This is just a different way of doing what we did before. It still doesn't work. Nice try though.","created_at":"2024-12-20T00:01:00.578522Z","output_tokens":null,"deleted":0,"code_id":193961,"sender":"human","input_tokens":null,"id":97294},{"project_id":4472,"message":"Let's take a closer look at the logic to ensure that the projectile is removed immediately after a hit. The issue might be the order of operations or an overlooked condition.\n\nWe'll make sure the projectile removal is handled correctly. Here's an updated version of the `updateProjectiles` function:\n\n```javascript\nfunction updateProjectiles() {\n // Iterate over projectiles array\n for (let i = projectiles.length - 1; i >= 0; i--) {\n let projectile = projectiles[i];\n projectile.x += projectile.vx;\n projectile.y += projectile.vy;\n\n // Remove projectile if it goes off screen\n if (projectile.x < 0 || projectile.x > width || projectile.y < 0 || projectile.y > height) {\n projectiles.splice(i, 1);\n } else {\n // Check for collision with asteroids\n for (let j = asteroids.length - 1; j >= 0; j--) {\n let asteroid = asteroids[j];\n if (dist(projectile.x, projectile.y, asteroid.x, asteroid.y) < asteroid.size / 2) {\n // Split asteroid if it's large enough\n if (asteroid.size > 20) {\n splitAsteroid(asteroid, projectile);\n }\n // Remove both the asteroid and the projectile\n asteroids.splice(j, 1); // Remove asteroid\n projectiles.splice(i, 1); // Remove projectile\n break; // Exit the loop once a collision is detected\n }\n }\n }\n }\n}\n```\n\n- The function iterates over each projectile and updates its position.\n- The projectile is removed if it goes off-screen.\n- The loop checks for collisions with asteroids. If a collision is detected, both the asteroid and the projectile are removed.\n- The `break` statement ensures that once a collision is processed, the loop exits immediately, ensuring instant removal of both the asteroid and the projectile. \n\nPlease replace the existing `updateProjectiles` function with this one and let me know if it resolves the issue.","created_at":"2024-12-20T00:01:00.584808Z","output_tokens":515,"deleted":0,"code_id":193961,"sender":"ai","input_tokens":5136,"id":97295}],"assets":[],"messages_sent":86,"comments":[],"steps":[]}