Galaga-like Space Shooter

{"name":"Galaga-like Space Shooter","description":"Embark on a cosmic adventure with this Galaga-inspired game! Navigate through waves of alien enemies, dodge their attacks, and strategically shoot them down to earn points. With simple controls and exciting gameplay, this project is perfect for learning the basics of game development with p5.js. Get ready to unleash your inner space hero and save the galaxy!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-04-03T17:54:43.149857Z","updated_at":"2025-04-03T17:54:43.149858Z","user_id":359,"status":"PRIVATE","parent_id":null,"id":7086,"user":{"username":"testuser4","id":359,"password_hash":"$2b$12$1bfbXAx/wNDtiX3B7pP00OoFloL6RnEtNDLYjtXDiFCYu.bwxiVSe","updated_at":"2025-03-02T04:54:01.926097Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"uobdfu+8sr00o67mwooc@sharklasers.com","recess_id":null,"created_at":"2025-03-02T04:54:01.926092Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"script.js":"const ENEMY_COUNT = 5;\n\nlet playerX;\n\nlet playerY;\n\nlet enemies = [];\n\nlet projectiles = [];\n\nlet lastShotTime = 0;\n\nlet playerHits = 0;\n\nconst MAX_HITS = 3;\n\nconst MAX_ENEMIES = 20;\n\nlet score = 0;\n\nconst WINNING_SCORE = 20;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // This creates a canvas that fills the window\n playerX = width / 2; // Start player in the middle\n playerY = height - 50; // Set initial vertical position of player\n background(0); // Set background to black\n}\n\nfunction draw() {\n background(0); // Clear the screen to black each frame\n drawPlayer();\n handlePlayerMovement();\n checkPlayerCollision(); // Check for player collisions with enemies\n drawEnemies(); // Draw enemies\n spawnEnemies(); // Continuously spawn enemies\n updateProjectiles(); // Update and draw projectiles\n}\n\nclass Enemy {\n constructor(x, y) {\n this.x = x; // X position\n this.y = y; // Y position\n this.size = 32; // Size of the enemy\n this.emoji = this.getRandomEmoji(); // Get a random colorful emoji for the enemy\n }\n\n getRandomEmoji() {\n const emojis = ['👤', '👨', '👩', '🧑', '👵', '👴'];\n return random(emojis); // Choose a random emoji from the array\n }\n\n update() {\n this.y += 2; // Move down the screen\n }\n\n draw() {\n textSize(this.size);\n textAlign(CENTER, CENTER);\n text(this.emoji, this.x, this.y); // Draw the enemy as a colorful head-and-shoulders emoji\n }\n}\n\nclass Projectile {\n constructor(x, y) {\n this.x = x; // X position\n this.y = y; // Y position\n this.size = 32; // Size of the projectile\n }\n\n update() {\n this.y -= 5; // Move up the screen\n }\n\n draw() {\n textSize(this.size);\n textAlign(CENTER, CENTER);\n text('💩', this.x, this.y); // Draw the projectile as a poop emoji\n }\n\n isOffScreen() {\n return this.y < 0; // Check if the projectile has moved off the top of the screen\n }\n\n hits(enemy) {\n // Collision detection\n return (\n this.x > enemy.x - enemy.size / 2 &&\n this.x < enemy.x + enemy.size / 2 &&\n this.y > enemy.y - enemy.size / 2 &&\n this.y < enemy.y + enemy.size / 2\n );\n }\n}\n\nfunction drawPlayer() {\n textSize(32);\n textAlign(CENTER, CENTER);\n text('🤮', playerX, playerY); // Draw the player as a vomiting emoji\n}\n\nfunction drawEnemies() {\n for (let enemy of enemies) {\n enemy.update(); // Update enemy position\n enemy.draw(); // Draw enemy\n }\n}\n\nfunction spawnEnemies() {\n if (enemies.length < MAX_ENEMIES) {\n let enemyX = random(width); // Random x position\n enemies.push(new Enemy(enemyX, 0)); // Create new enemy at the top\n }\n\n enemies = enemies.filter(enemy => enemy.y < height); // Remove off-screen enemies\n}\n\nfunction handlePlayerMovement() {\n if (keyIsDown(LEFT_ARROW) && playerX > 0) {\n playerX -= 5; // Move left\n console.log(\"Moving left\");\n }\n if (keyIsDown(RIGHT_ARROW) && playerX < width) {\n playerX += 5; // Move right\n console.log(\"Moving right\");\n }\n if (keyIsDown(UP_ARROW) && playerY > 0) {\n playerY -= 5; // Move up\n console.log(\"Moving up\");\n }\n if (keyIsDown(DOWN_ARROW) && playerY < height) {\n playerY += 5; // Move down\n console.log(\"Moving down\");\n }\n\n // Shoot a projectile when the spacebar is pressed\n if (keyIsDown(32)) { // Spacebar key\n shootProjectile();\n }\n}\n\nfunction shootProjectile() {\n let currentTime = millis(); // Get current time in milliseconds\n if (currentTime - lastShotTime > 1000) { // Check if 1 second has passed\n projectiles.push(new Projectile(playerX, playerY)); // Create a new projectile at the player's position\n lastShotTime = currentTime; // Update the last shot time\n }\n}\n\nfunction checkPlayerCollision() {\n for (let i = enemies.length - 1; i >= 0; i--) {\n // Check if the enemy overlaps with the player\n if (\n enemies[i].x > playerX - 16 && // Half of player's width\n enemies[i].x < playerX + 16 && // Half of player's width\n enemies[i].y > playerY - 16 && // Half of player's height\n enemies[i].y < playerY + 16 // Half of player's height\n ) {\n playerHits++; // Increment the hit count\n enemies.splice(i, 1); // Remove the enemy when it hits the player\n\n // Check if player has reached the maximum hits\n if (playerHits >= MAX_HITS) {\n gameOver(); // Call game over function if hits exceed limit\n }\n break; // Exit loop after removing the enemy\n }\n }\n}\n\nfunction gameOver() {\n noLoop(); // Stop the draw loop\n background(0); // Clear the screen to black\n textSize(64);\n textAlign(CENTER, CENTER);\n fill(255, 0, 0); // Set text color to red\n text('Game Over!', width / 2, height / 2); // Display game over message\n}\n\nfunction winGame() {\n noLoop(); // Stop the draw loop\n background(0); // Clear the screen to black\n textSize(64);\n textAlign(CENTER, CENTER);\n fill(0, 255, 0); // Set text color to green\n text('You Win!', width / 2, height / 2); // Display win message\n}\n\nfunction updateProjectiles() {\n for (let i = projectiles.length - 1; i >= 0; i--) {\n projectiles[i].update(); // Update projectile position\n projectiles[i].draw(); // Draw projectile\n\n // Check for collisions with enemies\n for (let j = enemies.length - 1; j >= 0; j--) {\n if (projectiles[i].hits(enemies[j])) {\n // Remove both the projectile and the enemy\n projectiles.splice(i, 1); // Remove the projectile\n enemies.splice(j, 1); // Remove the enemy\n score++; // Increment score for hitting an enemy\n\n // Check for win condition\n if (score >= WINNING_SCORE) {\n winGame(); // Call win game function if score reaches winning score\n }\n break; // Break out of the loop to avoid errors\n }\n }\n\n // Remove projectile if it's off the screen\n if (projectiles[i] && projectiles[i].isOffScreen()) {\n projectiles.splice(i, 1); // Remove the projectile from the array\n }\n }\n}\n\n","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n\n \n \n Galaga-like Space Shooter\n \n \n\n\n\n \n\n\n"},"chat_history":[{"code_id":228682,"deleted":0,"input_tokens":null,"id":129698,"project_id":7086,"sender":"human","message":"Can I make it to when an enemy hits me they explode?","created_at":"2025-04-03T18:20:43.203410Z","output_tokens":null},{"code_id":228682,"deleted":0,"input_tokens":3765,"id":129699,"project_id":7086,"sender":"ai","message":"It's definitely possible to add an explosion effect when an enemy hits the player! \n\nCould you tell me a bit more about how you envision the explosion? For example, do you want a visual effect like an emoji or a simple shape to represent the explosion? Or do you have another idea in mind?","created_at":"2025-04-03T18:20:43.342972Z","output_tokens":72},{"code_id":228682,"deleted":0,"input_tokens":null,"id":129701,"project_id":7086,"sender":"human","message":"no they just disapear","created_at":"2025-04-03T18:21:05.836595Z","output_tokens":null},{"code_id":228682,"deleted":0,"input_tokens":3758,"id":129702,"project_id":7086,"sender":"ai","message":"Got it! We can create a simple explosion effect using an emoji or a shape to make it look like the enemy explodes before disappearing. \n\nWould you like to use an emoji for the explosion, or would you prefer a simple shape like a circle expanding and fading away?","created_at":"2025-04-03T18:21:05.843596Z","output_tokens":65},{"code_id":228682,"deleted":0,"input_tokens":null,"id":129711,"project_id":7086,"sender":"human","message":"no they just disapear","created_at":"2025-04-03T18:21:54.204273Z","output_tokens":null},{"code_id":228682,"deleted":0,"input_tokens":3758,"id":129712,"project_id":7086,"sender":"ai","message":"We can definitely add an explosion effect when an enemy hits the player before they disappear. Would you like to use a specific emoji for the explosion, or should we use a simple geometric shape like a circle?","created_at":"2025-04-03T18:21:54.350012Z","output_tokens":52},{"code_id":228682,"deleted":0,"input_tokens":null,"id":129716,"project_id":7086,"sender":"human","message":"no","created_at":"2025-04-03T18:22:04.520114Z","output_tokens":null},{"code_id":228682,"deleted":0,"input_tokens":3753,"id":129717,"project_id":7086,"sender":"ai","message":"Got it! Let's make it so the enemies just disappear when they contact the player. \n\nCan you tell me how you would like the game to detect when an enemy hits the player? Do you want it to happen when they overlap, or do you have another idea in mind?","created_at":"2025-04-03T18:22:04.619597Z","output_tokens":62},{"code_id":228682,"deleted":0,"input_tokens":null,"id":129720,"project_id":7086,"sender":"human","message":"when they overlap","created_at":"2025-04-03T18:22:24.664138Z","output_tokens":null},{"code_id":228682,"deleted":0,"input_tokens":3755,"id":129721,"project_id":7086,"sender":"ai","message":"Great! To make the enemies disappear when they overlap with the player, we need to add a collision detection check between the player and the enemies in the `draw` function.\n\nI'll add the necessary code to check for collisions and remove the enemy when they overlap with the player.\n\nHere's the code you need to add:\n\n```javascript \n// script.js\nfunction checkPlayerCollision() {\n for (let i = enemies.length - 1; i >= 0; i--) {\n // Check if the enemy overlaps with the player\n if (\n enemies[i].x > playerX - 16 && // Half of player's width\n enemies[i].x < playerX + 16 && // Half of player's width\n enemies[i].y > playerY - 16 && // Half of player's height\n enemies[i].y < playerY + 16 // Half of player's height\n ) {\n enemies.splice(i, 1); // Remove the enemy when it hits the player\n break; // Exit loop after removing the enemy\n }\n }\n}\n```\n\nYou will also need to call this new function in your `draw` function after calling `handlePlayerMovement()` to check for collisions:\n\n```javascript \n// script.js\nfunction draw() {\n background(0); // Clear the screen to black each frame\n drawPlayer();\n handlePlayerMovement();\n checkPlayerCollision(); // Check for player collisions with enemies\n drawEnemies(); // Draw enemies\n spawnEnemies(); // Continuously spawn enemies\n updateProjectiles(); // Update and draw projectiles\n}\n```\n\n### How it works:\n- **Collision Check**: The `checkPlayerCollision` function loops through all enemies and checks if any of them overlap with the player's position.\n- **Removing Enemies**: If an enemy overlaps with the player, it is removed from the `enemies` array.\n\nPlease replace or add the code as shown above, and let me know once you've done that!","created_at":"2025-04-03T18:22:24.724118Z","output_tokens":450},{"code_id":228742,"deleted":0,"input_tokens":null,"id":129731,"project_id":7086,"sender":"human","message":"can I make it if enemys hit me three times its game over?","created_at":"2025-04-03T18:23:25.351160Z","output_tokens":null},{"code_id":228742,"deleted":0,"input_tokens":3933,"id":129732,"project_id":7086,"sender":"ai","message":"Yes, you can definitely add a feature where the game ends after the player is hit by enemies three times. \n\nTo implement this, we need to keep track of the number of hits the player has taken and check if it reaches three. If it does, we can trigger a game over state.\n\nHere are the steps we'll take:\n\n1. **Add a variable to track the number of hits.**\n2. **Modify the collision detection to increment the hit counter and check for game over.**\n3. **Display a game over message when the player loses.**\n\nLet's start by adding a global variable to count hits and modify the `checkPlayerCollision` function.\n\nHere's the code to add:\n\n```javascript \n// script.js\nlet playerHits = 0; // Variable to keep track of player hits\nconst MAX_HITS = 3; // Maximum hits before game over\n\nfunction checkPlayerCollision() {\n for (let i = enemies.length - 1; i >= 0; i--) {\n // Check if the enemy overlaps with the player\n if (\n enemies[i].x > playerX - 16 && // Half of player's width\n enemies[i].x < playerX + 16 && // Half of player's width\n enemies[i].y > playerY - 16 && // Half of player's height\n enemies[i].y < playerY + 16 // Half of player's height\n ) {\n playerHits++; // Increment the hit count\n enemies.splice(i, 1); // Remove the enemy when it hits the player\n \n // Check if player has reached the maximum hits\n if (playerHits >= MAX_HITS) {\n gameOver(); // Call game over function if hits exceed limit\n }\n break; // Exit loop after removing the enemy\n }\n }\n}\n\nfunction gameOver() {\n noLoop(); // Stop the draw loop\n background(0); // Clear the screen to black\n textSize(64);\n textAlign(CENTER, CENTER);\n fill(255); // Set text color to white\n text('Game Over!', width / 2, height / 2); // Display game over message\n}\n```\n\n### How it works:\n- **Hit Counter**: The `playerHits` variable keeps track of how many times the player has been hit.\n- **Collision Logic**: When a collision is detected, the hit counter increments, and if it reaches three, the `gameOver` function is triggered.\n- **Game Over Function**: The `gameOver` function stops the game loop and displays a \"Game Over!\" message on the screen.\n\nPlease add this code to your project and let me know once you've done that!","created_at":"2025-04-03T18:23:25.499588Z","output_tokens":591},{"code_id":228753,"deleted":0,"input_tokens":null,"id":129736,"project_id":7086,"sender":"human","message":"make the game over red","created_at":"2025-04-03T18:24:07.572353Z","output_tokens":null},{"code_id":228753,"deleted":0,"input_tokens":4057,"id":129737,"project_id":7086,"sender":"ai","message":"To change the game over message color to red, we'll modify the `gameOver` function where the text color is set. \n\nHere's the updated code for the `gameOver` function:\n\n```javascript \n// script.js\nfunction gameOver() {\n noLoop(); // Stop the draw loop\n background(0); // Clear the screen to black\n textSize(64);\n textAlign(CENTER, CENTER);\n fill(255, 0, 0); // Set text color to red\n text('Game Over!', width / 2, height / 2); // Display game over message\n}\n```\n\n### How it works:\n- **Text Color**: The `fill(255, 0, 0);` line sets the text color to red using RGB values, where (255, 0, 0) represents red.\n\nPlease replace the existing `gameOver` function with this updated code and let me know once you've done that!","created_at":"2025-04-03T18:24:07.577726Z","output_tokens":183},{"code_id":228759,"deleted":0,"input_tokens":null,"id":129741,"project_id":7086,"sender":"human","message":"make the limit of enemies 10","created_at":"2025-04-03T18:25:00.979043Z","output_tokens":null},{"code_id":228759,"deleted":0,"input_tokens":4065,"id":129742,"project_id":7086,"sender":"ai","message":"To change the limit of enemies to 10, you just need to update the `MAX_ENEMIES` constant in your code.\n\nHere's the updated code for that:\n\n```javascript \n// script.js\nconst MAX_ENEMIES = 10; // Updated maximum number of enemies\n```\n\n### How it works:\n- **MAX_ENEMIES**: This constant now allows for up to 10 enemies to be present on the screen at any time.\n\nPlease replace the existing line for `MAX_ENEMIES` with this updated code, and let me know once you've done that!","created_at":"2025-04-03T18:25:00.986500Z","output_tokens":117},{"code_id":228761,"deleted":0,"input_tokens":null,"id":129745,"project_id":7086,"sender":"human","message":"make the limit of enemies 20","created_at":"2025-04-03T18:25:30.251954Z","output_tokens":null},{"code_id":228761,"deleted":0,"input_tokens":4065,"id":129746,"project_id":7086,"sender":"ai","message":"To change the limit of enemies to 20, you just need to update the `MAX_ENEMIES` constant in your code.\n\nHere's the updated code for that:\n\n```javascript \n// script.js\nconst MAX_ENEMIES = 20; // Updated maximum number of enemies\n```\n\n### How it works:\n- **MAX_ENEMIES**: This constant now allows for up to 20 enemies to be present on the screen at any time.\n\nPlease replace the existing line for `MAX_ENEMIES` with this updated code, and let me know once you've done that!","created_at":"2025-04-03T18:25:30.397942Z","output_tokens":117},{"code_id":228770,"deleted":0,"input_tokens":null,"id":129747,"project_id":7086,"sender":"human","message":"how are you today?","created_at":"2025-04-03T18:25:50.680701Z","output_tokens":null},{"code_id":228770,"deleted":0,"input_tokens":4063,"id":129748,"project_id":7086,"sender":"ai","message":"I'm here and ready to help you with your project! How's everything going on your end? Do you have any questions or features you'd like to work on for your game?","created_at":"2025-04-03T18:25:50.742121Z","output_tokens":40},{"code_id":228770,"deleted":0,"input_tokens":null,"id":129765,"project_id":7086,"sender":"human","message":"Can you make it when my projectile hits 20 enemies I win the game","created_at":"2025-04-03T18:27:07.324718Z","output_tokens":null},{"code_id":228770,"deleted":0,"input_tokens":4073,"id":129766,"project_id":7086,"sender":"ai","message":"Yes, we can definitely add a win condition where the player wins after hitting 20 enemies with projectiles!\n\nTo implement this, we will:\n\n1. **Add a variable to track the score (number of enemies hit).**\n2. **Modify the projectile collision logic to increment the score when an enemy is hit.**\n3. **Create a function to check for a win condition.**\n\nLet's start with the code updates.\n\n### 1. Add a score variable:\n\n```javascript \n// script.js\nlet score = 0; // Variable to keep track of the number of enemies hit\nconst WINNING_SCORE = 20; // Score needed to win the game\n```\n\n### 2. Modify the `updateProjectiles` function:\n\nWe'll update the projectile collision logic to increment the score.\n\n```javascript \n// script.js\nfunction updateProjectiles() {\n for (let i = projectiles.length - 1; i >= 0; i--) {\n projectiles[i].update(); // Update projectile position\n projectiles[i].draw(); // Draw projectile\n\n // Check for collisions with enemies\n for (let j = enemies.length - 1; j >= 0; j--) {\n if (projectiles[i].hits(enemies[j])) {\n // Remove both the projectile and the enemy\n projectiles.splice(i, 1); // Remove the projectile\n enemies.splice(j, 1); // Remove the enemy\n score++; // Increment score for hitting an enemy\n\n // Check for win condition\n if (score >= WINNING_SCORE) {\n winGame(); // Call win game function if score reaches winning score\n }\n break; // Break out of the loop to avoid errors\n }\n }\n\n // Remove projectile if it's off the screen\n if (projectiles[i] && projectiles[i].isOffScreen()) {\n projectiles.splice(i, 1); // Remove the projectile from the array\n }\n }\n}\n```\n\n### 3. Create the `winGame` function:\n\nThis function will stop the game and display a winning message.\n\n```javascript \n// script.js\nfunction winGame() {\n noLoop(); // Stop the draw loop\n background(0); // Clear the screen to black\n textSize(64);\n textAlign(CENTER, CENTER);\n fill(0, 255, 0); // Set text color to green\n text('You Win!', width / 2, height / 2); // Display win message\n}\n```\n\n### Summary of Changes:\n- **Score Tracking**: A new `score` variable keeps track of how many enemies have been hit.\n- **Collision Logic**: The projectile collision now increments the score when it hits an enemy.\n- **Win Condition**: When the score reaches 20, the game displays a \"You Win!\" message.\n\nPlease add this code to your project as described, and let me know once you've done that!","created_at":"2025-04-03T18:27:07.478789Z","output_tokens":656}],"assets":[],"messages_sent":34,"comments":[],"steps":[]}