Ricochet Target

{"name":"Ricochet Target","description":"Experience the thrill of precision shooting and ricocheting bullets in this exciting target-hitting game!","photo":null,"view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-04-04T21:15:06.309377Z","updated_at":"2024-04-04T21:15:06.309380Z","user_id":12,"status":"PUBLIC","parent_id":1030,"id":1048,"user":{"photo":null,"email":null,"recess_id":"32aa3e07-937d-225e-b221-f81281b70bf6","created_at":"2023-12-12T19:27:18.949816Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"blink","id":12,"password_hash":null,"updated_at":"2023-12-12T19:27:18.949818Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let dude; // Variable to hold the character image\nlet enemy; // Variable to hold the enemy sprite\nlet sauceGif; // Variable to hold the sauce GIF\nlet bullets = []; // Array to hold bullets\nlet target; // Target position and size will be determined based on platform\nlet walls = []; // Array to hold static platforms\nlet hasWon = false; // Flag to check if the player has won\nlet winTimerStarted = false; // Flag to prevent multiple win timers\nlet showSauce = false; // Flag to control the display of the sauce GIF\n\nfunction preload() {\n dude = loadImage(\"@asset('Dude2')\");\n enemy = loadImage(\"@asset('Enemy2')\");\n sauceGif = loadImage(\"@asset('Sauce3')\"); // Preload the sauce GIF\n}\nfunction updateAndDrawBullets() {\n for (let i = bullets.length - 1; i >= 0; i--) {\n let b = bullets[i];\n b.x += b.dx * 5;\n b.y += b.dy * 5;\n\n bulletWallCollision(b);\n\n // Calculate the angle of bullet movement\n let angle = atan2(b.dy, b.dx);\n\n // Set the size of the bullet triangle\n let size = 10;\n\n // Calculate the vertices of the triangle\n let frontX = b.x + cos(angle) * size;\n let frontY = b.y + sin(angle) * size;\n let backLeftX = b.x + cos(angle + PI / 3) * size / 2;\n let backLeftY = b.y + sin(angle + PI / 3) * size / 2;\n let backRightX = b.x + cos(angle - PI / 3) * size / 2;\n let backRightY = b.y + sin(angle - PI / 3) * size / 2;\n\n // Draw the bullet as a triangle\n fill(0);\n noStroke();\n triangle(frontX, frontY, backLeftX, backLeftY, backRightX, backRightY);\n\n // Check for hitting the target\n let distance = dist(b.x, b.y, target.x, target.y - enemy.height / 8);\n if (distance < target.size / 2 + 5 && !winTimerStarted) {\n winTimerStarted = true;\n setTimeout(() => { hasWon = true; }, 1000);\n showSauce = true;\n bullets.splice(i, 1); // Remove the bullet if it hits the target\n break;\n }\n\n // Check and remove the bullet if it has bounced 5 times\n if (b.bounce >= 5) {\n bullets.splice(i, 1); // Remove the bullet on the 5th bounce\n }\n }\n}\nfunction setup() {\n createCanvas(800, 600);\n walls = [\n { x: 100, y: 100, width: 100, height: 20 },\n { x: 200, y: 300, width: 150, height: 20 },\n { x: 500, y: 200, width: 100, height: 20 },\n // Adding a new vertical platform blocking the direct shot\n { x: 400, y: 250, width: 20, height: 100 } // Adjust the position and size as needed\n ];\n // Placing the enemy on the first platform for demonstration\n let enemyPlatform = walls[1]; // Choose a platform for the enemy to stand on\n target = {\n x: enemyPlatform.x + enemyPlatform.width / 2,\n y: enemyPlatform.y,\n size: 50\n };\n}\n\nfunction mousePressed() {\n if (!hasWon) {\n let dx = mouseX - (width - dude.width / 4 - 50);\n let dy = mouseY - (height - dude.height / 4 - 50);\n let mag = sqrt(dx * dx + dy * dy);\n dx /= mag;\n dy /= mag;\n\n bullets.push({\n x: width - dude.width / 4 - 50,\n y: height - dude.height / 4 - 50,\n dx: dx,\n dy: dy,\n bounce: 0\n });\n }\n}\n\nfunction bulletWallCollision(bullet) {\n // Check collision with the game area boundaries\n if (bullet.x <= 0 || bullet.x >= width) bullet.dx *= -1;\n if (bullet.y <= 0 || bullet.y >= height) bullet.dy *= -1;\n\n // Check collision with walls/platforms\n for (const wall of walls) {\n if (\n bullet.x > wall.x - 5 && bullet.x < wall.x + wall.width + 5 &&\n bullet.y > wall.y - 5 && bullet.y < wall.y + wall.height + 5\n ) {\n const bulletCenter = { x: bullet.x, y: bullet.y };\n const wallCenter = { x: wall.x + wall.width / 2, y: wall.y + wall.height / 2 };\n\n const dx = bulletCenter.x - wallCenter.x;\n const dy = bulletCenter.y - wallCenter.y;\n const widthHalfTotal = (5 + wall.width) / 2;\n const heightHalfTotal = (5 + wall.height) / 2;\n\n const overlapX = widthHalfTotal - Math.abs(dx);\n const overlapY = heightHalfTotal - Math.abs(dy);\n\n if (overlapX >= overlapY) {\n bullet.dy *= -1;\n } else {\n bullet.dx *= -1;\n }\n bullet.bounce++;\n break;\n }\n }\n}\n\nfunction updateAndDrawBullets() {\n for (let i = bullets.length - 1; i >= 0; i--) {\n let b = bullets[i];\n b.x += b.dx * 5;\n b.y += b.dy * 5;\n\n bulletWallCollision(b);\n\n // Calculate the angle of bullet movement\n let angle = atan2(b.dy, b.dx);\n\n // Set the size of the bullet triangle\n let size = 10;\n\n // Calculate the vertices of the triangle\n let frontX = b.x + cos(angle) * size;\n let frontY = b.y + sin(angle) * size;\n let backLeftX = b.x + cos(angle + PI / 3) * size / 2;\n let backLeftY = b.y + sin(angle + PI / 3) * size / 2;\n let backRightX = b.x + cos(angle - PI / 3) * size / 2;\n let backRightY = b.y + sin(angle - PI / 3) * size / 2;\n\n // Draw the bullet as a triangle\n fill(0);\n noStroke();\n triangle(frontX, frontY, backLeftX, backLeftY, backRightX, backRightY);\n\n // Check for hitting the target\n let distance = dist(b.x, b.y, target.x, target.y - enemy.height / 8);\n if (distance < target.size / 2 + 5 && !winTimerStarted) {\n winTimerStarted = true;\n setTimeout(() => { hasWon = true; }, 1000);\n showSauce = true;\n bullets.splice(i, 1); // Remove the bullet if it hits the target\n break;\n }\n\n // Check and remove the bullet if it has bounced 5 times\n // Check and remove the bullet if it has bounced 5 times\n if (b.bounce >= 5) {\n bullets.splice(i, 1); // Correctly remove the bullet on the 6th bounce\n } \n }\n}\n\nfunction drawWalls() {\n fill(150);\n for (let wall of walls) {\n rect(wall.x, wall.y, wall.width, wall.height);\n }\n}\n\nfunction draw() {\n if (hasWon) {\n background(0, 255, 0);\n fill(255);\n textSize(32);\n textAlign(CENTER, CENTER);\n text(\"You Win!\", width / 2, height / 2);\n return;\n }\n\n background(220);\n let scaledEnemyWidth = enemy.width / 4;\n let scaledEnemyHeight = enemy.height / 4;\n let enemyX = target.x - scaledEnemyWidth / 2;\n let enemyY = target.y - scaledEnemyHeight;\n\n // Drawing the enemy\n image(enemy, enemyX, enemyY, scaledEnemyWidth, scaledEnemyHeight);\n\n // Adjust sauceGif dimensions to make it twice as big and move it slightly up\n if (showSauce) {\n let sauceScaleFactor = 1; // Making the sauce twice as big\n let sauceWidth = sauceGif.width * sauceScaleFactor;\n let sauceHeight = sauceGif.height * sauceScaleFactor;\n let sauceX = enemyX + (scaledEnemyWidth - sauceWidth * sauceScaleFactor) / 2;\n let sauceY = enemyY + (scaledEnemyHeight - sauceHeight * sauceScaleFactor) / 2 - 7; // Moving the sauce up by 20 pixels\n\n image(sauceGif, sauceX, sauceY, sauceWidth, sauceHeight);\n }\n\n let scaledWidth = dude.width / 4;\n let scaledHeight = dude.height / 4;\n image(dude, width - scaledWidth - 50, height - scaledHeight - 50, scaledWidth, scaledHeight);\n\n updateAndDrawBullets();\n drawWalls();\n}","style.css":"","index.html":"\n\n\n\n \n \n Ricochet Target\n \n\n\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":1048,"created_at":"2024-04-04T21:15:48.112319Z","output_tokens":null,"sender":"human","code_id":60505,"deleted":0,"input_tokens":null,"id":33380},{"message":"","project_id":1048,"created_at":"2024-04-04T21:15:48.118645Z","output_tokens":null,"sender":"ai","code_id":60505,"deleted":0,"input_tokens":null,"id":33381},{"message":"make the bullet disappear when the bullet bounces 5 times ","project_id":1048,"created_at":"2024-04-04T21:16:55.328910Z","output_tokens":null,"sender":"human","code_id":60507,"deleted":0,"input_tokens":null,"id":33382},{"message":"```javascript\nfunction updateAndDrawBullets() {\n for (let i = bullets.length - 1; i >= 0; i--) {\n let b = bullets[i];\n b.x += b.dx * 5;\n b.y += b.dy * 5;\n\n bulletWallCollision(b);\n\n // Calculate the angle of bullet movement\n let angle = atan2(b.dy, b.dx);\n\n // Set the size of the bullet triangle\n let size = 10;\n\n // Calculate the vertices of the triangle\n let frontX = b.x + cos(angle) * size;\n let frontY = b.y + sin(angle) * size;\n let backLeftX = b.x + cos(angle + PI / 3) * size / 2;\n let backLeftY = b.y + sin(angle + PI / 3) * size / 2;\n let backRightX = b.x + cos(angle - PI / 3) * size / 2;\n let backRightY = b.y + sin(angle - PI / 3) * size / 2;\n\n // Draw the bullet as a triangle\n fill(0);\n noStroke();\n triangle(frontX, frontY, backLeftX, backLeftY, backRightX, backRightY);\n\n // Check for hitting the target\n let distance = dist(b.x, b.y, target.x, target.y - enemy.height / 8);\n if (distance < target.size / 2 + 5 && !winTimerStarted) {\n winTimerStarted = true;\n setTimeout(() => { hasWon = true; }, 1000);\n showSauce = true;\n bullets.splice(i, 1); // Remove the bullet if it hits the target\n break;\n }\n\n // Check and remove the bullet if it has bounced 5 times\n if (b.bounce >= 5) {\n bullets.splice(i, 1); // Remove the bullet on the 5th bounce\n }\n }\n}\n```\n\n- This updated `updateAndDrawBullets` function includes a check to remove a bullet after it has bounced 5 times.\n- The check is performed by examining the `bounce` property of each bullet. Once a bullet's `bounce` count reaches 5, it is removed from the `bullets` array using `splice`.\n- This removal is done in a loop iterating backwards through the `bullets` array to ensure that removing an item does not interfere with the iteration process.","project_id":1048,"created_at":"2024-04-04T21:16:55.334495Z","output_tokens":null,"sender":"ai","code_id":60507,"deleted":0,"input_tokens":null,"id":33383}],"assets":[{"project_id":1048,"creator":null,"cloudinary_id":"w5r31lj1z0fnjxeydzwc","deleted":false,"id":2913,"created_at":"2024-04-04T21:15:06.327093Z","name":"Dude","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"bekbim6uddyxao8l9ppf","deleted":false,"id":2912,"created_at":"2024-04-04T21:15:06.325812Z","name":"Wall.png","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"p4jedcavjsakccg8doro","deleted":false,"id":2911,"created_at":"2024-04-04T21:15:06.324576Z","name":"Enemy","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"vovlgid2w34m7qb6f4pj","deleted":false,"id":2910,"created_at":"2024-04-04T21:15:06.323358Z","name":"Sauce","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"azxx30y0rpvewbesjt6q","deleted":false,"id":2909,"created_at":"2024-04-04T21:15:06.322002Z","name":"Sauce2","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"qzind8pum5oyrxaicxqf","deleted":false,"id":2908,"created_at":"2024-04-04T21:15:06.320787Z","name":"Sauce3","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"mtxqi5mkvdtg9nifc1xn","deleted":false,"id":2907,"created_at":"2024-04-04T21:15:06.319398Z","name":"Enemy2","resource_type":"image","tags":null},{"project_id":1048,"creator":null,"cloudinary_id":"or7d14z6lozm1rwe6pbx","deleted":false,"id":2906,"created_at":"2024-04-04T21:15:06.317873Z","name":"Dude2","resource_type":"image","tags":null}],"messages_sent":2,"comments":[],"steps":[{"title":"Visible Obstacles","instruction":"Display walls and other obstacles on the game screen.","created_at":"2024-04-03T23:06:06.020131","project_id":1048,"complete":false,"step_number":0,"updated_at":"2024-04-04T21:15:06.312915","id":5289},{"title":"Health System","instruction":"Implement a health system for the player character.","created_at":"2024-04-03T23:06:06.020211","project_id":1048,"complete":false,"step_number":1,"updated_at":"2024-04-04T21:15:06.313020","id":5290},{"title":"Win/Lose States/Conditions","instruction":"Define conditions for winning and losing the game.","created_at":"2024-04-03T23:06:06.020257","project_id":1048,"complete":false,"step_number":2,"updated_at":"2024-04-04T21:15:06.313067","id":5291},{"title":"Hit Target to Win","instruction":"Set the win condition to hitting the target.","created_at":"2024-04-03T23:06:06.020301","project_id":1048,"complete":false,"step_number":3,"updated_at":"2024-04-04T21:15:06.313113","id":5292},{"title":"Player Spawn Position","instruction":"Fix the player's spawn position with no movement.","created_at":"2024-04-03T23:06:06.020343","project_id":1048,"complete":false,"step_number":4,"updated_at":"2024-04-04T21:15:06.313212","id":5293},{"title":"Bounce Max Times","instruction":"Limit the maximum number of bounces for each bullet.","created_at":"2024-04-03T23:06:06.020393","project_id":1048,"complete":false,"step_number":5,"updated_at":"2024-04-04T21:15:06.313294","id":5294},{"title":"Ammo Max based on level and/or difficulty","instruction":"Set varying limits on the maximum ammo based on the game's level or difficulty.","created_at":"2024-04-03T23:06:06.020467","project_id":1048,"complete":false,"step_number":6,"updated_at":"2024-04-04T21:15:06.313346","id":5295},{"title":"Ricochet Mechanics","instruction":"Implement ricochet mechanics for the bullet to bounce off surfaces.","created_at":"2024-04-03T23:06:06.020511","project_id":1048,"complete":false,"step_number":7,"updated_at":"2024-04-04T21:15:06.313389","id":5296}]}