Turret Trouble: Base Defense

{"name":"Turret Trouble: Base Defense","description":"Defend your base in Turret Trouble: Base Defense! Strategically place turrets to fend off waves of enemies and protect your base from destruction.","photo":null,"view_count":7,"fork_count":0,"expires_at":null,"created_at":"2023-12-20T11:14:31.475393Z","updated_at":"2024-01-23T12:26:15.799529Z","user_id":6,"status":"PRIVATE","parent_id":null,"id":117,"user":{"photo":null,"email":null,"recess_id":"20ab99b4-695a-7e0a-5f98-3d3f0e1f0472","created_at":"2023-12-12T12:14:15.606329Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"jc","id":6,"password_hash":null,"updated_at":"2023-12-12T12:14:15.606332Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let grid;\nlet rows = 10;\nlet cols = 10;\nlet cellSize = 60;\nlet currentLevel = 1;\nlet frameCounter = 0; // Add this line at the top of your script\nlet turretCount = 0;\nlet turrets = [];\nlet particles = []; // Add this line at the top of your script.js file\nlet selectedTurret = 'basic';\n\nlet maze = [\n [0, 0, 1, 1, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n [1, 1, 1, 1, 1, 1, 1, 1, 0, 1],\n [1, 1, 1, 0, 0, 0, 0, 0, 0, 1],\n [1, 1, 1, 0, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 1, 1, 1, 1, 1, 1],\n [1, 0, 0, 0, 1, 1, 1, 1, 0, 1],\n [1, 1, 1, 0, 1, 1, 1, 1, 0, 1],\n [1, 1, 1, 0, 0, 0, 0, 0, 0, 1],\n [1, 1, 1, 1, 1, 1, 1, 1, 0, 1]\n];\n\nlet path = [\n { x: 0, y: 0 },\n { x: 1, y: 0 },\n { x: 1, y: 1 },\n { x: 2, y: 1 },\n { x: 3, y: 1 },\n { x: 4, y: 1 },\n { x: 5, y: 1 },\n { x: 6, y: 1 },\n { x: 7, y: 1 },\n { x: 8, y: 1 },\n { x: 8, y: 2 },\n { x: 8, y: 3 },\n { x: 7, y: 3 },\n { x: 6, y: 3 },\n { x: 5, y: 3 },\n { x: 4, y: 3 },\n { x: 3, y: 3 },\n { x: 3, y: 4 },\n { x: 3, y: 5 },\n { x: 3, y: 6 },\n { x: 3, y: 7 },\n { x: 3, y: 8 },\n { x: 4, y: 8 },\n { x: 5, y: 8 },\n { x: 6, y: 8 },\n { x: 7, y: 8 },\n { x: 8, y: 8 },\n { x: 8, y: 9 },\n { x: 9, y: 9 },\n\n];\n\n\nconst spawnPoint = { x: 0, y: 0 };\nconst basePoint = { x: cols - 1, y: rows - 1 }; // coordinates of the base\n\nfunction distanceToBase(point) {\n return Math.abs(point.x - basePoint.x) + Math.abs(point.y - basePoint.y);\n}\n\n\n\nclass Enemy {\n constructor() {\n this.pathPosition = 0; // Start at the beginning of the path\n this.x = path[this.pathPosition].x;\n this.y = path[this.pathPosition].y;\n this.speed = 0.05; // Change this value to control the speed of the enemy\n this.health = 100;\n }\n\n move() {\n // Get the next position in the path\n let nextPosition = path[this.pathPosition + 1];\n if (nextPosition) {\n // If the enemy is not at the next position, move towards it\n let dx = nextPosition.x - this.x;\n let dy = nextPosition.y - this.y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < this.speed) {\n this.pathPosition++;\n this.x = nextPosition.x;\n this.y = nextPosition.y;\n } else {\n this.x += this.speed * dx / dist;\n this.y += this.speed * dy / dist;\n }\n }\n }\n\n draw() {\n fill(255, 0, 0); // red\n ellipse(this.x * cellSize + cellSize / 2, this.y * cellSize + cellSize / 2, cellSize / 2, cellSize / 2);\n }\n}\n\nfunction spawnEnemy() {\n let enemy = new Enemy();\n enemies.push(enemy);\n}\n\n\nlet enemies = [];\n\nfunction selectTurret(turretType) {\n selectedTurret = turretType;\n}\n\nclass Turret {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.range = 3; // The range of the turret (in cells)\n this.target = null;\n this.shootInterval = 0;\n }\n\n findTarget() {\n let closest = null;\n let closestDist = Infinity;\n for (let enemy of enemies) {\n let dx = this.x - enemy.x;\n let dy = this.y - enemy.y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < this.range && dist < closestDist) {\n closest = enemy;\n closestDist = dist;\n }\n }\n this.target = closest;\n }\n\n shoot() {\n if (this.target && this.shootInterval >= 30) {\n this.target.health -= 10;\n particles.push(new Particle(this.x, this.y, this.target)); // Create a new Particle that targets the center of the enemy\n this.shootInterval = 0;\n }\n }\n\n\n draw() {\n fill(0, 0, 255); // blue\n ellipse(this.x * cellSize + cellSize / 2, this.y * cellSize + cellSize / 2, cellSize / 2, cellSize / 2);\n }\n}\nclass RicochetTurret extends Turret {\n constructor(x, y) {\n super(x, y);\n this.shootInterval = Math.floor(this.shootInterval * 1.3); // Shoots 30% slower\n }\n\n shoot() {\n if (this.target && this.shootInterval >= 30) {\n particles.push(new RicochetParticle(this.x, this.y, this.target));\n this.shootInterval = 0;\n }\n }\n}\n\n\n\n\n\nclass Particle {\n constructor(x, y, target) {\n this.x = x * cellSize + cellSize / 2; // Start at the center of the turret\n this.y = y * cellSize + cellSize / 2;\n this.target = { x: target.x * cellSize + cellSize / 2, y: target.y * cellSize + cellSize / 2 }; // Target the center of the enemy\n this.speed = 12; // Increase the speed to 1\n this.life = 60;\n }\n move() {\n let dx = this.target.x - this.x;\n let dy = this.target.y - this.y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < this.speed) { // If the particle is about to overshoot the target\n this.x = this.target.x; // Set the particle's position to the target's position\n this.y = this.target.y;\n this.target.health -= 10; // Decrease the enemy's health\n this.life = 0; // Set the particle's life to 0 to remove it immediately\n } else {\n this.x += this.speed * dx / dist;\n this.y += this.speed * dy / dist;\n this.life--;\n }\n }\n draw() {\n fill(255, 255, 0); // yellow\n stroke(255, 255, 0); // yellow stroke\n ellipse(this.x, this.y, 15, 15); // Draw the particle without multiplying by cellSize\n }\n}\n\nclass RicochetParticle extends Particle {\n constructor(x, y, target) {\n super(x, y, target);\n this.ricochets = 3; // The number of ricochets remaining\n this.damage = 10; // The starting damage\n }\n\n move() {\n let dx = this.target.x - this.x;\n let dy = this.target.y - this.y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < this.speed) {\n this.x = this.target.x;\n this.y = this.target.y;\n this.target.health -= this.damage;\n this.ricochets--;\n this.damage *= 0.8; // Each ricochet decreases the damage by 20%\n if (this.ricochets > 0) {\n this.target = this.findNewTarget();\n } else {\n this.life = 0;\n }\n } else {\n this.x += this.speed * dx / dist;\n this.y += this.speed * dy / dist;\n this.life--;\n }\n }\n\n findNewTarget() {\n let closest = null;\n let closestDist = Infinity;\n for (let enemy of enemies) {\n let dx = this.x - enemy.x;\n let dy = this.y - enemy.y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < closestDist && dist < 2) { // Only ricochet to targets less than 2 tiles away\n closest = enemy;\n closestDist = dist;\n }\n }\n return closest;\n }\n}\n\nlet levels = {\n 1: {\n waves: [\n {\n enemyType: \"basic\",\n spawnRate: 5, // enemies per second\n totalEnemies: 3\n },\n {\n enemyType: \"basic\",\n spawnRate: 5, // enemies per second\n totalEnemies: 3\n },\n {\n enemyType: \"basic\",\n spawnRate: 5, // enemies per second\n totalEnemies: 4\n },\n // add more waves for level 1 as needed\n ],\n turretLimit: 5\n },\n 2: {\n waves: [\n {\n enemyType: \"fast\",\n spawnRate: 2, // enemies per second\n totalEnemies: 30\n },\n // add more waves for level 2 as needed\n ],\n turretLimit: 10\n },\n 3: {\n waves: [\n {\n enemyType: \"boss\",\n spawnRate: 1, // enemies per second\n totalEnemies: 5\n },\n // add more waves for level 3 as needed\n ],\n turretLimit: 15\n },\n // add more levels as needed\n};\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n grid = maze;\n startLevel();\n}\n\nfunction make2DArray(rows, cols) {\n let arr = new Array(rows);\n for (let i = 0; i < arr.length; i++) {\n arr[i] = new Array(cols);\n }\n return arr;\n}\n\nfunction draw() {\n background(220); // Add this line to clear the canvas\n\n for (let i = 0; i < rows; i++) {\n for (let j = 0; j < cols; j++) {\n let x = j * cellSize;\n let y = i * cellSize;\n\n\n if (i === spawnPoint.x && j === spawnPoint.y) {\n fill(255, 0, 0); // red\n rect(x, y, cellSize, cellSize);\n } else if (i === cols - 1 && j === rows - 1) {\n fill(0, 255, 0); // green\n rect(x, y, cellSize, cellSize);\n } else if (grid[i][j] === 1) {\n fill(125); // gray\n rect(x, y, cellSize, cellSize);\n } else if (grid[i][j] === 2) {\n fill(255, 0, 0); // red\n ellipse(x + cellSize / 2, y + cellSize / 2, cellSize / 2, cellSize / 2);\n } else {\n stroke(0);\n noFill();\n rect(x, y, cellSize, cellSize);\n }\n }\n }\n // Only move and draw enemies every 10 frames\n\n for (let i = enemies.length - 1; i >= 0; i--) {\n if (enemies[i].health <= 0) {\n enemies.splice(i, 1); // Remove the enemy from the game\n } else {\n enemies[i].move();\n enemies[i].draw();\n }\n }\n for (let turret of turrets) {\n turret.findTarget();\n turret.shoot();\n turret.shootInterval++;\n turret.draw();\n }\n\n for (let i = particles.length - 1; i >= 0; i--) {\n particles[i].move();\n particles[i].draw();\n if (particles[i].life <= 0) {\n particles.splice(i, 1); // Remove the particle when its life reaches 0\n }\n }\n\n}\nfunction mousePressed() {\n let i = floor(mouseX / cellSize);\n let j = floor(mouseY / cellSize);\n let level = levels[currentLevel];\n if (i >= 0 && i < cols && j >= 0 && j < rows) {\n if (grid[j][i] !== 0 && turretCount < level.turretLimit) { // Check if the cell is a non-path cell and the turret limit has not been reached\n grid[j][i] = 2; // Place a turret\n if(selectedTurret === 'basic') {\n turrets.push(new Turret(i, j)); // Create a new Turret object\n } else if (selectedTurret === 'ricochet') {\n turrets.push(new RicochetTurret(i, j)); // Create a new RicochetTurret object\n }\n turretCount++; // Increment the turret count\n }\n }\n}\nfunction startLevel() {\n let level = levels[currentLevel];\n let spawnInterval;\n\n // Function to spawn a single enemy in a wave\n const spawnInWave = (wave) => {\n if (wave.totalEnemies > 0) {\n spawnEnemy();\n wave.totalEnemies--;\n } else {\n clearInterval(spawnInterval); // Stop the interval when all enemies in the wave have been spawned\n }\n }\n\n let currentWave = 0;\n\n // Function to start a wave\n const startWave = () => {\n if (level.waves[currentWave]) {\n spawnInterval = setInterval(() => spawnInWave(level.waves[currentWave]), 1000);\n currentWave++;\n }\n }\n\n // Start the first wave\n startWave();\n\n // Start a new wave every 10 seconds (after the last enemy of the previous wave has been spawned)\n let waveInterval = setInterval(() => {\n if (currentWave >= level.waves.length) {\n clearInterval(waveInterval); // Stop the interval when all waves have been started\n } else {\n startWave();\n }\n }, 10000);\n}\nfunction moveEnemy(enemy) {\n // Calculate the enemy's position in grid coordinates\n let gridX = enemy.x;\n let gridY = enemy.y;\n\n // Check if the enemy is exactly at a cell\n if (Number.isInteger(gridX) && Number.isInteger(gridY)) {\n // Check the next cell in a fixed order: down, right, left, up\n // Only update the direction if the next cell is a '0' tile\n if (gridY < rows - 1 && grid[gridY + 1][gridX] === 0 && distanceToBase({ x: gridX, y: gridY + 1 }) < distanceToBase(enemy)) {\n enemy.direction = 'down';\n } else if (gridX < cols - 1 && grid[gridY][gridX + 1] === 0 && distanceToBase({ x: gridX + 1, y: gridY }) < distanceToBase(enemy)) {\n enemy.direction = 'right';\n } else if (gridX > 0 && grid[gridY][gridX - 1] === 0 && distanceToBase({ x: gridX - 1, y: gridY }) < distanceToBase(enemy)) {\n enemy.direction = 'left';\n } else if (gridY > 0 && grid[gridY - 1][gridX] === 0 && distanceToBase({ x: gridX, y: gridY - 1 }) < distanceToBase(enemy)) {\n enemy.direction = 'up';\n }\n }\n\n // Move the enemy in the current direction only if the next cell in that direction is a '0' tile\n if (enemy.direction === 'down' && gridY < rows - 1 && grid[gridY + 1][gridX] === 0) {\n enemy.y++;\n return true;\n } else if (enemy.direction === 'right' && gridX < cols - 1 && grid[gridY][gridX + 1] === 0) {\n enemy.x++;\n return true;\n } else if (enemy.direction === 'left' && gridX > 0 && grid[gridY][gridX - 1] === 0) {\n enemy.x--;\n return true;\n } else if (enemy.direction === 'up' && gridY > 0 && grid[gridY - 1][gridX] === 0) {\n enemy.y--;\n return true;\n }\n\n return false;\n}","style.css":"#turret-menu {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #eee;\n padding: 10px;\n}\n\n#turret-menu button {\n margin: 0 10px;\n cursor: pointer;\n}","index.html":"\n\n\n\n \n \n Turret Trouble: Base Defense\n \n \n\n\n\n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":28181,"input_tokens":null,"id":16857,"project_id":117,"sender":"human","message":"continue changing the mousePressed function so that it takes into account which turret I want","created_at":"2024-01-23T12:26:36.532352Z","output_tokens":null},{"deleted":0,"code_id":28181,"input_tokens":null,"id":16858,"project_id":117,"sender":"ai","message":"```javascript\nfunction mousePressed() {\n let i = floor(mouseX / cellSize);\n let j = floor(mouseY / cellSize);\n let level = levels[currentLevel];\n if (i >= 0 && i < cols && j >= 0 && j < rows) {\n if (grid[j][i] !== 0 && turretCount < level.turretLimit) { // Check if the cell is a non-path cell and the turret limit has not been reached\n grid[j][i] = 2; // Place a turret\n if(selectedTurret === 'basic') {\n turrets.push(new Turret(i, j)); // Create a new Turret object\n } else if (selectedTurret === 'ricochet') {\n turrets.push(new RicochetTurret(i, j)); // Create a new RicochetTurret object\n }\n turretCount++; // Increment the turret count\n }\n }\n}\n```\n\n- First, the function checks if the cell that was clicked is within the grid boundaries and if it is an empty cell (not a path cell).\n- Next, the function checks if the limit for the number of turrets (defined in the level's configuration) has not been reached.\n- If all these conditions are met, the function changes the cell's state to `2` (which represents a cell with a turret) and creates a new Turret object at the cell's coordinates.\n- The type of turret that is created depends on the `selectedTurret` variable, which is set by the `selectTurret` function when a button in the turret selection menu is clicked.\n- Finally, the function increments the `turretCount` variable, which keeps track of the total number of turrets that have been placed.","created_at":"2024-01-23T12:26:36.538528Z","output_tokens":null},{"deleted":0,"code_id":28183,"input_tokens":null,"id":16859,"project_id":117,"sender":"human","message":"when I click on Ricochet turret it still gives me a basic turret","created_at":"2024-01-23T12:27:49.919353Z","output_tokens":null},{"deleted":0,"code_id":28183,"input_tokens":null,"id":16860,"project_id":117,"sender":"ai","message":"I think you may be missing the definition of the `selectedTurret` variable. This variable is used for keeping track of the currently selected turret. \n\nTry adding the following line at the beginning of your script:\n\n```javascript\nlet selectedTurret = 'basic';\n```\n\nThis line initializes `selectedTurret` to 'basic', so a basic turret will be selected by default when the game starts. Then, when you click on one of the buttons in the turret selection menu, the `selectTurret` function changes the value of `selectedTurret` to the type of the turret that corresponds to the button that was clicked.\n\nWithout this line, `selectedTurret` is `undefined` at the start of the game, so clicking on the 'Ricochet Turret' button will not have any effect because the `mousePressed` function will not be able to check if the value of `selectedTurret` is 'ricochet'.","created_at":"2024-01-23T12:27:49.926592Z","output_tokens":null},{"deleted":0,"code_id":28185,"input_tokens":null,"id":16861,"project_id":117,"sender":"human","message":"still nothing","created_at":"2024-01-23T12:28:17.240228Z","output_tokens":null},{"deleted":0,"code_id":28185,"input_tokens":null,"id":16862,"project_id":117,"sender":"ai","message":"It looks like your `selectTurret` function is defined correctly, but it's possible that the browser isn't recognizing the `onclick` attribute in your buttons. This could be due to a number of reasons, such as a misconfigured HTML file or a JavaScript error occurring before the onclick event is registered. \n\nAn alternate approach would be to use event listeners in your JavaScript code instead of the `onclick` attribute in your HTML. Here's how you can modify your JavaScript code to use event listeners:\n\n```javascript\n// Select the turret buttons\nlet basicTurretButton = document.getElementById('basic-turret');\nlet ricochetTurretButton = document.getElementById('ricochet-turret');\n\n// Add event listeners to the turret buttons\nbasicTurretButton.addEventListener('click', function() {\n selectedTurret = 'basic';\n});\n\nricochetTurretButton.addEventListener('click', function() {\n selectedTurret = 'ricochet';\n});\n```\n\n- The `getElementById` method selects an HTML element with the specified id.\n- The `addEventListener` method adds an event listener to the selected element. The first argument is the type of event to listen for ('click' in this case), and the second argument is a function that is executed when the event occurs.\n- Inside the functions, the `selectedTurret` variable is set to the type of the turret that corresponds to the button that was clicked.","created_at":"2024-01-23T12:28:17.247162Z","output_tokens":null}],"assets":[],"messages_sent":105,"comments":[],"steps":[{"step_number":1,"complete":false,"updated_at":"2023-12-20T11:14:31.483979","id":807,"title":"Turret Placement","instruction":"Allow players to strategically place turrets on the game board to defend their base.","created_at":"2023-12-20T11:14:31.483979","project_id":117},{"step_number":2,"complete":false,"updated_at":"2023-12-20T11:14:31.484024","id":808,"title":"Enemy Movement","instruction":"Implement enemy movement patterns or paths for them to follow as they advance towards the base.","created_at":"2023-12-20T11:14:31.484024","project_id":117},{"step_number":3,"complete":false,"updated_at":"2023-12-20T11:14:31.484066","id":809,"title":"Shooting Mechanics","instruction":"Calculate distances and simulate shooting actions for the turrets to take down enemies within range.","created_at":"2023-12-20T11:14:31.484065","project_id":117},{"step_number":4,"complete":false,"updated_at":"2023-12-20T11:14:31.484107","id":810,"title":"Scoring System","instruction":"Track and display the player's score based on the number of enemies defeated.","created_at":"2023-12-20T11:14:31.484106","project_id":117},{"step_number":5,"complete":false,"updated_at":"2023-12-20T11:14:31.484146","id":811,"title":"Game Over Condition","instruction":"Define conditions for the game to end, such as when the enemies breach the base's defenses, and display a game over message.","created_at":"2023-12-20T11:14:31.484146","project_id":117},{"step_number":0,"complete":true,"updated_at":"2023-12-20T11:14:31.483906","id":806,"title":"Canvas Grid","instruction":"Implement a grid-based game board using a canvas element in JavaScript to allow players to strategically place turrets.","created_at":"2023-12-20T11:14:31.483904","project_id":117}]}