[Template] Tower Defense

{"name":"Tower Defense 8-26-2025","description":"Build a tower defense game. Drag the map to pan around. Click to build/upgrade/sell. Customize the look, feel, and design of this game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/mcdyw5n3cnc35mfkvixv","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-08-26T23:47:46.831930Z","updated_at":"2025-08-26T23:47:46.831932Z","user_id":70,"status":"PRIVATE","parent_id":1409,"id":9749,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"Farm.js":"//Farm: generate money, take damage\nclass Farm {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.hp = 50;\n this.maxHP = this.hp;\n this.income = 1; // Amount of money generated per cycle\n this.cycleTime = 3; // Number of cycles to generate income\n this.lastIncomeTime = 0;\n this.color = 'purple';\n this.upgraded = false;\n this.originalCost = 5;\n }\n\n draw() {\n fill(this.color);\n ellipse(this.x + offsetX + cellSize / 2, this.y + offsetY + cellSize / 2, cellSize * 0.8);\n // Tint the icon yellow if the farm is upgraded\n if (this.upgraded && farmIcon) {\n tint(255, 255, 0);\n } else {\n noTint();\n }\n if (farmIcon) {\n image(farmIcon, this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n }\n this.drawHPBar();\n noTint();\n // this.drawIncomeIndicator;\n }\n\n\n drawHPBar() {\n const barWidth = 25;\n const barHeight = 5;\n const remainingHPPercentage = this.hp / this.maxHP;\n let hpColor = remainingHPPercentage < 0.25 ? 'red' : '#7FFF00';\n\n fill(128, 128, 128);\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - 10, barWidth, barHeight);\n\n fill(hpColor);\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - 10, barWidth * remainingHPPercentage, barHeight);\n }\n\n //Increase player's money on a timer\n generateIncome() {\n\n let adjustedCycleTime = this.cycleTime * enemyStepTime / (gameSpeed > 0 ? gameSpeed : 1); //careful not to divide by zero\n\n if (millis() - this.lastIncomeTime >= adjustedCycleTime && gameSpeed > 0) {\n money += this.income; // Increase money by the farm's income\n this.lastIncomeTime = millis(); // Reset the last income time\n }\n }\n\n //Here you could add a little symbol or animation for generating money.\n /*\n drawIncomeIndicator() {\n\n }\n */\n}","Wall.js":"/////////////////////CLASSES///////////////////////\n//Here we define unit and enemy behavior.\n//Balance the stats of game elements here.\n//You can also create new types and behaviors.\n\n//Wall: cannot attack, just takes damage.\nclass Wall {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.hp = 50;\n this.maxHP = this.hp;\n this.color = '#D2B48C'\n this.upgraded = false;\n this.originalCost = 1;\n }\n\n draw() {\n fill(this.color);\n rect(this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n if (this.upgraded && wallIcon) {\n tint(255, 255, 0); // Apply yellow tint if ugraded\n } else {\n noTint(); // Remove any tint if not\n }\n if (wallIcon) {\n image(wallIcon, this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n }\n this.drawHPBar();\n noTint();\n }\n\n drawHPBar() {\n const barWidth = 25;\n const barHeight = 5;\n const remainingHPPercentage = this.hp / this.maxHP;\n let hpColor = remainingHPPercentage < 0.25 ? 'red' : '#7FFF00';\n\n fill(128, 128, 128);\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - 10, barWidth, barHeight);\n\n fill(hpColor);\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - 10, barWidth * remainingHPPercentage, barHeight);\n }\n}","Enemy.js":"//The Enemy class is the most sophisticated class because of the moving/attacking behavior.\nclass Enemy {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.hp = 10;\n this.maxHP = this.hp;\n this.speed = 1;\n this.damage = 5;\n this.lastMoveTime = 0;\n this.attackCooldown = enemyStepTime / gameSpeed; // How long before enemy can attack again\n this.hasAttacked = false;\n this.currentTarget = null;\n this.img = enemyImg0;\n }\n\n //This moves enemies towards the main base.\n moveTowardsBase(mainBaseX, mainBaseY) {\n // Prevent movement if adjacent to a unit\n if (this.isAdjacentToUnit()) {\n this.findAndAttackStructure();\n return;\n } else {\n // Calculate direction towards the main base\n let directionX = mainBaseX > this.x ? 1 : (mainBaseX < this.x ? -1 : 0);\n let directionY = mainBaseY > this.y ? 1 : (mainBaseY < this.y ? -1 : 0);\n\n // Randomly choose one of the two cardinal directions that move it closer to the base\n if (directionX !== 0 && directionY !== 0) {\n if (Math.random() < 0.5) {\n directionX = 0; // Choose vertical movement\n } else {\n directionY = 0; // Choose horizontal movement\n }\n }\n\n // Attempt to move in the chosen direction\n this.attemptMove({ x: directionX, y: directionY });\n }\n }\n\n //Check if enemy is next to an occupied square\n isAdjacentToUnit() {\n // Check adjacent cells for any unit (excluding EnemyBases)\n const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];\n return directions.some(([dx, dy]) => {\n const x = Math.floor((this.x / cellSize) + dx);\n const y = Math.floor((this.y / cellSize) + dy);\n return grid[x] && grid[x][y] && !(grid[x][y] instanceof EnemyBase) && !(grid[x][y] instanceof Enemy);\n });\n }\n\n //Find direction towards a target.\n calculateDirection(targetX, targetY) {\n let direction = { x: 0, y: 0 };\n const dx = targetX - (this.x + cellSize / 2); // Adjusted to target from the center of the enemy\n const dy = targetY - (this.y + cellSize / 2);\n\n //Choose horizontal versus diagonal movement.\n if (Math.abs(dx) > Math.abs(dy)) {\n direction.x = dx > 0 ? 1 : -1; // Move right if dx is positive, left if negative\n } else if (dy !== 0) {\n direction.y = dy > 0 ? 1 : -1; // Move down if dy is positive, up if negative\n }\n\n return direction;\n }\n\n //Load a move to an adjacent square\n attemptMove(direction) {\n const newGridX = Math.floor(this.x / cellSize) + direction.x;\n const newGridY = Math.floor(this.y / cellSize) + direction.y;\n\n if (this.canMoveTo(newGridX, newGridY)) {\n this.x += direction.x * cellSize;\n this.y += direction.y * cellSize;\n this.lastMoveTime = millis(); // Update the last move time\n }\n }\n\n //Check if it's possible to move to a square.\n canMoveTo(gridX, gridY) {\n // Is the target square in bounds?\n if (gridX < 0 || gridX >= cols || gridY < 0 || gridY >= rows) return false;\n\n // Is the target square occupied?\n return !grid[gridX][gridY] && !this.isEnemyAt(gridX, gridY);\n }\n\n //Check if there's an enemy in a square (to avoid overlap)\n isEnemyAt(gridX, gridY) {\n return enemies.some(enemy => {\n const enemyGridX = Math.floor(enemy.x / cellSize);\n const enemyGridY = Math.floor(enemy.y / cellSize);\n return gridX === enemyGridX && gridY === enemyGridY;\n });\n }\n\n //Search for a player unit and attack it\n findAndAttackStructure() {\n if (millis() - this.lastAttackTime < this.attackCooldown) {\n return; // Not enough time has passed, skip attacking\n }\n\n // If enemy has a target already and it's still alive, keep attacking it.\n if (this.currentTarget && this.currentTarget.hp > 0) {\n this.attack(this.currentTarget);\n this.lastAttackTime = millis(); // Update last attack time\n return;\n } else if (this.currentTarget && this.currentTarget.hp <= 0) {\n // Clear target if it is destroyed and start moving again\n this.currentTarget = null;\n return;\n }\n\n //Otherwise, search for a target.\n\n //This is enemy's position.\n let gridX = floor(this.x / cellSize);\n let gridY = floor(this.y / cellSize);\n\n // Directions array to specify cardinal directions: up, right, down, left\n const directions = [[0, -1], [1, 0], [0, 1], [-1, 0]];\n\n //Now check in each direction...\n for (let i = 0; i < directions.length; i++) {\n let dir = directions[i];\n let checkX = gridX + dir[0];\n let checkY = gridY + dir[1];\n\n if (checkX >= 0 && checkX < cols && checkY >= 0 && checkY < rows) {\n let possibleTarget = grid[checkX][checkY];\n // Target any player structure\n if (possibleTarget && (possibleTarget instanceof Wall || possibleTarget instanceof Tower || possibleTarget instanceof Farm || possibleTarget instanceof MainBase)) {\n this.currentTarget = possibleTarget; // Set target\n this.attack(this.currentTarget); // Attack!\n this.lastAttackTime = millis(); // Update last attack time\n return; // Exit after finding and attacking a target\n }\n }\n }\n\n }\n\n //Attack a target.\n attack(target) {\n //Do nothing if there's no target\n if (!target) return;\n\n //Otherwise, subtract from target's HP\n target.hp -= this.damage;\n\n //And if HP goes to 0 or lower, destroy the target\n if (target.hp <= 0) {\n // Remove the target from the grid if it's destroyed\n let targetGridX = floor(target.x / cellSize);\n let targetGridY = floor(target.y / cellSize);\n grid[targetGridX][targetGridY] = undefined; //'undefined' clears the square\n }\n }\n\n //Display the enemy\n //Display the enemy\n draw() {\n push(); // Start a new drawing state\n\n // Check if the enemy is on the right half of the screen\n if (this.x + offsetX > width / 2) {\n translate(this.x + offsetX + cellSize, this.y + offsetY); // Move to the right edge of the sprite\n scale(-1, 1); // Flip horizontally\n } else {\n translate(this.x + offsetX, this.y + offsetY);\n }\n\n // Draw the enemy image\n if (this.img) {\n image(this.img, 0, 0, cellSize, cellSize);\n } else { //or default to a triangle\n fill('yellow');\n triangle(0, 0, cellSize / 2, cellSize, cellSize, 0);\n }\n\n pop(); // Restore original drawing state\n\n this.drawHPBar();\n }\n\n drawHPBar() {\n const barWidth = 25;\n const barHeight = 5;\n const remainingHPPercentage = this.hp / this.maxHP;\n let hpColor = remainingHPPercentage < 0.1 ? 'red' : '#7FFF00'; //green, then red when low\n\n fill(128, 128, 128); // Gray color for HP bar background\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - barHeight - 5, barWidth, barHeight);\n\n fill(hpColor); // Green/red bar\n rect(this.x + offsetX + (cellSize - barWidth) / 2, this.y + offsetY - barHeight - 5, barWidth * remainingHPPercentage, barHeight);\n }\n}\n\n\n\n///////Create Enemy types here. They can inherit properties and behavior from the Enemy class./////////\nclass BasicEnemy extends Enemy {\n constructor(x, y) {\n super(x, y); // Call the parent constructor with x and y\n this.hp = 10;\n this.speed = 1;\n }\n}\n\nclass FastEnemy extends Enemy {\n constructor() {\n super();\n this.hp = 50;\n this.speed = 2;\n }\n}\n\nclass StrongEnemy extends Enemy {\n constructor() {\n super();\n this.hp = 200;\n this.speed = 0.5;\n this.damage = 20;\n }\n}\n","Tower.js":"//Tower: shoots bullets at enemies and takes damage\nclass Tower {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.range = cellSize * 2;\n this.damage = 10;\n this.hp = 100;\n this.maxHP = this.hp;\n this.bullets = [];\n this.attackSpeed = 1000; // In ms\n this.lastAttackTime = 0;\n this.originalCost = 3;\n this.color = ('blue');\n }\n\n draw() {\n fill(this.color);\n // Make sure to include offsets for dragging\n //Draw a circle...\n ellipse(this.x + offsetX + cellSize / 2, this.y + offsetY + cellSize / 2, cellSize * 0.8);\n //..then an icon on top.\n if (towerIcon) {\n image(towerIcon, this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n }\n this.drawHPBar();\n }\n drawHPBar() {\n const barWidth = 25; // Fixed bar width for consistency across all tower types\n const barHeight = 5;\n const remainingHPPercentage = this.hp / this.maxHP; // Calculate HP percentage\n let hpColor = remainingHPPercentage < 0.25 ? 'red' : '#7FFF00'; // Light green or red\n\n // Center the HP bar over the tower\n let hpBarX = this.x + offsetX + (cellSize / 2) - (barWidth / 2);\n let hpBarY = this.y + offsetY - 10; // Position the HP bar slightly above the tower\n\n // Draw gray background for the HP bar\n fill(128, 128, 128); // Gray color\n rect(hpBarX, hpBarY, barWidth, barHeight);\n\n // Draw the remaining HP portion of the bar. Ensure the filled portion does not exceed the total bar width.\n fill(hpColor);\n rect(hpBarX, hpBarY, barWidth * remainingHPPercentage, barHeight);\n }\n\n attack() {\n // Adjust attack speed based on game speed. Careful not to divide by zero.\n let adjustedAttackSpeed = this.attackSpeed / (gameSpeed > 0 ? gameSpeed : 1);\n\n // Check if enough time has passed since the last attack, considering the adjusted attack speed\n if (millis() - this.lastAttackTime >= adjustedAttackSpeed) {\n // Find an enemy\n let target = enemies.find(enemy => {\n let d = dist(this.x + cellSize / 2, this.y + cellSize / 2, enemy.x + cellSize / 2, enemy.y + cellSize / 2);\n return d <= this.range; // Check if the enemy is within range\n });\n\n if (target) { //If Tower finds an enemy....\n // ...create a new bullet and add it to the bullets array\n this.bullets.push(new Bullet(this.x + cellSize / 2, this.y + cellSize / 2, target, this.damage));\n this.lastAttackTime = millis(); // Update the last attack time\n }\n }\n };\n\n //Move the bullets\n updateBullets() {\n for (let i = this.bullets.length - 1; i >= 0; i--) {\n let bullet = this.bullets[i];\n bullet.move();\n bullet.draw();\n if (bullet.hasHitTarget()) {\n bullet.target.hp -= bullet.damage; // Apply damage\n if (bullet.target.hp <= 0) {\n // Additional logic to remove the enemy if hp drops to 0 or below\n let index = enemies.indexOf(bullet.target);\n if (index > -1) {\n enemies.splice(index, 1);\n }\n }\n this.bullets.splice(i, 1); // Remove the bullet after hitting the target\n }\n }\n };\n}\n\n\n//// VARATIONS of the Tower:\n\n\n\n//MainBase *extends* Tower which means it inherits Tower's properties but can change them too.\nclass MainBase extends Tower {\n constructor(x, y) {\n super(x, y);\n this.hp = 1000; // More HP\n this.maxHP = this.hp;\n this.range = 0;\n this.damage = 0;\n }\n\n //Instead of a health bar, update the Base's color so that Blue is healthy and Red is dying.\n draw() {\n // Calculate HSL color based on HP\n let healthPercentage = this.hp / this.maxHP;\n let hue = healthPercentage * 240; // 240 for blue, 0 for red\n //Hue, Saturation, Lightness Color Mode\n colorMode(HSL);\n fill(hue, 100, 50);\n\n // Adjust positions to include offsets\n rect(this.x + offsetX, this.y + offsetY, cellSize, cellSize); // Draw a square for the base\n //Switch color mode back to RGB to not mess up later calculations.\n if (baseImg) {\n image(baseImg, this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n }\n colorMode(RGB);\n }\n}\n\n//Placeholder for a simple Basic Tower.\nclass BasicTower extends Tower {\n constructor(x, y) {\n super(x, y);\n this.range = cellSize * 2;\n this.damage = 10;\n }\n\n}\n\n//An upgraded Tower\nclass SuperTower extends Tower {\n constructor(x, y) {\n super(x, y);\n this.range = cellSize * 3;\n this.attackSpeed = 500; //500 ms = 1/2 of a second\n this.hp = 200;\n this.maxHP = this.hp;\n this.color = 'lightblue';\n this.upgraded = true; // Mark the Tower as upgraded\n }\n\n draw() {\n // Draw the light blue circle as the background\n fill(this.color);\n ellipse(this.x + offsetX + cellSize / 2, this.y + offsetY + cellSize / 2, cellSize * 0.8);\n\n // Tint the icon yellow\n if (towerIcon) {\n tint(255, 255, 0); // Apply yellow tint\n let iconSize = cellSize; // Adjust the size of the icon if necessary\n image(towerIcon, this.x + offsetX + (cellSize - iconSize) / 2, this.y + offsetY + (cellSize - iconSize) / 2, iconSize, iconSize);\n noTint(); // Remove the tint after drawing the icon\n }\n\n this.drawHPBar();\n }\n}\n","Bullet.js":"//These pop out of Towers and do damage when they hit enemies.\nclass Bullet {\n constructor(x, y, target, damage) {\n this.x = x;\n this.y = y;\n this.target = target;\n this.damage = damage;\n this.speed = 5;\n }\n\n move() {\n let dx = this.target.x + cellSize / 2 - this.x;\n let dy = this.target.y + cellSize / 2 - this.y;\n let distance = Math.sqrt(dx * dx + dy * dy); //Pythagoras' Theorem\n let moveX = (dx / distance) * this.speed;\n let moveY = (dy / distance) * this.speed;\n\n // Check that distance is less than one tick of speed so the bullet doesn't overshoot the target.\n if (distance > this.speed) {\n this.x += moveX;\n this.y += moveY;\n } else {\n // If bullet is really close to target, shift it to target's exact center to guarantee hit.\n this.x = this.target.x + cellSize / 2;\n this.y = this.target.y + cellSize / 2;\n }\n }\n\n draw() {\n fill(0); // Color (0 = black)\n //Draw a little circle\n ellipse(this.x + offsetX, this.y + offsetY, 10, 10);\n }\n\n //Check if bullet is within 5 px of target -- that counts as a 'hit'\n hasHitTarget() {\n const targetCenterX = this.target.x + cellSize / 2;\n const targetCenterY = this.target.y + cellSize / 2;\n // Consider the bullet has hit if it's within a small range of the target's center\n return dist(this.x, this.y, targetCenterX, targetCenterY) < 5;\n }\n}","script.js":"// NEXT STEPS:\n// Idea 1: Add more enemy types and abilities (can you make the enemies shoot?)\n// Idea 2: Add terrain that affects enemy movement\n// Idea 3: Create new unit types — can you make soldiers that move across the field on your side?\n// Idea 4: Add a \"wave\" system to how enemies spawn\n// Idea 5: Add win/lose conditions that pop up \"YOU WIN\" or \"GAME OVER\" messages.\n\n\n/*\n TOWER DEFENSE \n————— template by Jacob —————\n\nA 2-D grid-based tower defense game.\nBuild units to fend off enemies and protect your base.\n\nModify this template into your own game!\nBalance the integers, design new unit and enemy types and behaviors, adjust the flow of the game.\n\nDesign your own assets and visual style to give this dry template some personality!\n\nEmail questions or bugs to jacob@jippity.pro\n*/\n\n\n//Set up the grid\nlet grid;\nvar totalRowsOfGrid = 40;\nvar totalColumnsOfGrid = 30;\nlet cols, rows;\nvar cellSize = 40; //in pixels \nlet gridOwnership;\n\n//This is for dragging the map.\nlet offsetX = 0;\nlet offsetY = 0;\nlet isDragging = false;\nlet dragStartX, dragStartY;\n\n\nlet actions = ['Drag', 'Build', 'Upgrade', 'Sell'];\nlet currentAction;\n\nlet money = 100; //Starting money\n\nlet gameSpeed = 1;\nlet lastGameSpeed = 1; // Start w/ default\n\nlet enemyStepTime = 1500; // In ms\n\nlet lastSpawnTime = 0;\nlet spawnInterval = (20 / countEnemyBases()) * 1000 * gameSpeed; // Convert seconds to milliseconds\n\nlet enemies = [];\n\nlet showBuildMenu = false; // Flag to show/hide the build menu\nlet selectedBuildType = null; // Currently selected build type\n\n//For visual icons\nlet handIcon;\nlet towerIcon;\nlet wallIcon;\nlet farmIcon;\nlet baseImg;\nlet enemyBaseImg;\nlet enemyImg0;\n\nlet tile0;\nlet tile1;\nlet tileGrid;\n\n//Load assets (add your own!)\nfunction preload() {\n handIcon = loadImage(\"@asset('hand_icon')\");\n towerIcon = loadImage(\"@asset('tower')\")\n wallIcon = loadImage(\"@asset('wall_icon')\")\n farmIcon = loadImage(\"@asset('farm_icon')\")\n enemyImg0 = loadImage(\"@asset('enemy0')\")\n tile0 = loadImage(\"@asset('tile0')\")\n tile1 = loadImage(\"@asset('tile1')\")\n baseImg = loadImage(\"@asset('Base')\")\n enemyBaseImg = loadImage(\"@asset('enemyBaseImg')\")\n}\n\n// Check out the other .js files for class definitions of:\n // Bullet\n // Enemy\n // Enemy Base\n // Farm\n // Tower\n // Wall\n\n//Runs once on load\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n cols = totalRowsOfGrid;\n rows = totalColumnsOfGrid;\n grid = makeGrid(cols, rows);\n gridOwnership = makeGrid(cols, rows); // Initialize grid ownership\n\n tileGrid = makeGrid(cols, rows); // Initialize the tile grid\n\n // Initialize the tile grid with random tiles\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n tileGrid[i][j] = Math.random() < 0.6 ? tile0 : tile1;\n // Set initial ownership: center 5x5 belongs to player, rest to enemy\n gridOwnership[i][j] = (i >= cols / 2 - 2 && i <= cols / 2 + 2 && j >= rows / 2 - 2 && j <= rows / 2 + 2) ? 'player' : 'enemy';\n }\n }\n\n // Place Enemy Spawn Points in Corners.\n grid[0][0] = new EnemyBase(0 * cellSize, 0 * cellSize);\n grid[cols - 1][0] = new EnemyBase((cols - 1) * cellSize, 0 * cellSize);\n grid[0][rows - 1] = new EnemyBase(0 * cellSize, (rows - 1) * cellSize);\n grid[cols - 1][rows - 1] = new EnemyBase((cols - 1) * cellSize, (rows - 1) * cellSize);\n\n // Place four farms around the center, centered in the 5x5 grid.\n let baseX = floor(cols / 2);\n let baseY = floor(rows / 2);\n for (let dx = -1; dx <= 1; dx += 2) { // Loop for left and right positions\n grid[baseX + dx][baseY] = new Farm((baseX + dx) * cellSize, baseY * cellSize);\n }\n for (let dy = -1; dy <= 1; dy += 2) { // Loop for top and bottom positions\n grid[baseX][baseY + dy] = new Farm(baseX * cellSize, (baseY + dy) * cellSize);\n }\n\n // Place your main base in the center.\n setCurrentAction(actions[0]);\n grid[baseX][baseY] = new MainBase(baseX * cellSize, baseY * cellSize); // Main Base placement\n}\n//This runs every frame\nfunction draw() {\n noTint();\n background('#364d31'); // Background behind map.\n drawGrid();\n\n if (gameSpeed > 0) {\n captureTerritory(); // Check for territory capture\n\n // Dynamically calculate spawn interval based on the number of enemy bases\n spawnInterval = (20 / countEnemyBases()) * 1000 / gameSpeed; // Convert seconds to milliseconds\n\n if (millis() - lastSpawnTime > spawnInterval) {\n spawnEnemy();\n lastSpawnTime = millis(); // Reset the last spawn time\n }\n\n // Update Towers and Farms so they can shoot and generate income.\n grid.forEach(col => {\n col.forEach(cell => {\n if (cell instanceof Tower) {\n cell.attack();\n cell.updateBullets();\n }\n if (cell instanceof Farm) {\n cell.draw();\n cell.generateIncome();\n }\n });\n });\n\n // Update enemies\n drawEnemies();\n enemies.forEach(enemy => {\n enemy.findAndAttackStructure(); // Search and attack first\n });\n } else {\n // Even if the game is paused, we still need to draw the towers, farms, and enemies\n grid.forEach(col => {\n col.forEach(cell => {\n if (cell instanceof Tower || cell instanceof Farm) {\n cell.draw();\n }\n });\n });\n drawEnemies();\n }\n\n drawMainBase();\n // Draw the user interface bar at the bottom\n drawUI();\n}\n\n/////////////DRAWING AND PLACING ITEMS///////////////////\n\nfunction drawGrid() {\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n //If tiles are loaded, tile the grid\n if (tile0 && tile1) {\n let tile = tileGrid[i][j];\n image(tile, i * cellSize + offsetX, j * cellSize + offsetY, cellSize, cellSize);\n } else { //Otherwise, just draw squares\n fill('#98FB98');\n rect(i * cellSize + offsetX, j * cellSize + offsetY, cellSize, cellSize);\n }\n\n // Draw player and enemy ownership backgrounds with more subtle tint\n noStroke();\n if (gridOwnership[i][j] === 'player') {\n fill('rgba(173, 216, 230, 0.3)'); // Light blue with more subtle transparency\n } else if (gridOwnership[i][j] === 'enemy') {\n fill('rgba(255, 165, 0, 0.3)'); // Light orange with more subtle transparency\n }\n rect(i * cellSize + offsetX, j * cellSize + offsetY, cellSize, cellSize);\n }\n }\n\n // Draw grid lines over the tiles\n stroke('#64964e'); // Grid line color\n strokeWeight(1); // Reset stroke weight for grid lines\n for (let i = 0; i <= cols; i++) {\n line(i * cellSize + offsetX, 0 + offsetY, i * cellSize + offsetX, rows * cellSize + offsetY);\n }\n for (let j = 0; j <= rows; j++) {\n line(0 + offsetX, j * cellSize + offsetY, cols * cellSize + offsetX, j * cellSize + offsetY);\n }\n stroke('#2e4a2c'); // Reset stroke to dark green for other drawings\n\n // Draw units on the grid\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (grid[i][j] instanceof Tower) {\n grid[i][j].draw(); // Draw the tower if it exists\n } else if (grid[i][j] instanceof Wall) { // Check for Wall instances\n grid[i][j].draw(); // Draw the wall if it exists\n } else if (grid[i][j] instanceof EnemyBase) {\n grid[i][j].draw(); // Draw enemy base if it exists\n }\n }\n }\n}\n\nfunction drawMainBase() {\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (grid[i][j] instanceof MainBase) {\n grid[i][j].draw();\n }\n }\n }\n}\n\nfunction drawEnemies() {\n // Position of your main base.\n let baseX = floor(cols / 2);\n let baseY = floor(rows / 2);\n\n for (let i = enemies.length - 1; i >= 0; i--) {\n let enemy = enemies[i];\n if (enemy.hp <= 0) { //if enemy runs out of HP\n enemies.splice(i, 1); // remove it from array of enemies\n continue;\n }\n // Check if enemy should move\n if (gameSpeed > 0 && millis() - enemy.lastMoveTime >= enemyStepTime / gameSpeed) {\n // Prevent enemy from moving onto main base\n if (abs((baseX * cellSize) - enemy.x) > cellSize || abs((baseY * cellSize) - enemy.y) > cellSize) {\n enemy.moveTowardsBase(baseX * cellSize, baseY * cellSize); //.moveTowardsBase has some fancy logic in it.\n enemy.lastMoveTime = millis(); // Update the last move time\n }\n }\n\n enemy.draw(); // Continue to draw the enemy regardless of movement\n }\n}\n\n//Create enemies\n//Adjust this function to handle more enemy types!\nfunction spawnEnemy() {\n const bases = [\n { x: 0, y: 0 },\n { x: cols - 1, y: 0 },\n { x: 0, y: rows - 1 },\n { x: cols - 1, y: rows - 1 }\n ];\n\n // Filter bases to those that are instances of EnemyBase\n const enemyBases = bases.filter(base => grid[base.x][base.y] instanceof EnemyBase);\n\n if (enemyBases.length > 0) {\n // Select a random base from the available enemy bases\n const baseIndex = Math.floor(Math.random() * enemyBases.length);\n const base = enemyBases[baseIndex];\n\n if (!isLocationOccupiedByEnemy(base.x, base.y)) { //if space is empty...\n //make a new Enemy and push it onto the array. \n const newEnemy = new BasicEnemy(base.x * cellSize, base.y * cellSize);\n enemies.push(newEnemy);\n }\n }\n}\n\n//Bottom UI bar.\nfunction drawUI() {\n let uiHeight = 80;\n let uiY = height - uiHeight;\n let squareSize = uiHeight; //Thinking of the UI as a series of squares\n\n fill('#88c47c'); //Bkg color\n noStroke();\n rect(0, uiY, width, uiHeight);\n\n // Display current money in the leftmost square\n stroke('#0000FF'); // Blue borders for UI squares\n strokeWeight(2); // Set the stroke weight to make the border visible\n fill('#88c47c'); // Light green for the money display square background\n rect(0, uiY, squareSize, squareSize); // Money display square\n noStroke(); // Disable stroke for text drawing\n fill('#0000FF'); // Blue text\n textAlign(CENTER, CENTER);\n textSize(20); // Adjust text size for better visibility\n text(`$${money}`, squareSize / 2, uiY + squareSize / 2);//Display amount of money\n\n // Next, draw squares for actions, right of the money squares.\n actions.forEach((action, index) => {\n stroke('#0000FF'); // Blue borders for UI squares\n fill('#cf9802'); // Yellow\n let x = (index + 1) * squareSize; // Shift action buttons to the right by one square (because of money)\n rect(x, uiY, squareSize, squareSize);\n if (action === 'Drag' && handIcon) {\n image(handIcon, x + (squareSize - handIcon.width) / 2, uiY + (squareSize - handIcon.height) / 2);\n } else {\n noStroke(); // Disable stroke for text drawing\n fill('#0000FF'); // Blue text for action labels\n text(action, x + squareSize / 2, uiY + squareSize / 2);\n }\n });\n\n\n // Draw buttons for Play/Pause, Speed Up, and Slow Down\n let buttonX = width - 4 * squareSize; // Start position for the new buttons, leaving space for \"Reset View\"\n let buttonNames = [gameSpeed === 0 ? 'Play' : 'Pause', 'Slower', 'Faster']; // Update the button text based on gameSpeed\n buttonNames.forEach((buttonName, index) => {\n fill('#88c47c'); // Button color\n rect(buttonX + index * squareSize, uiY, squareSize, squareSize);\n fill('#0000FF'); // Text color\n noStroke();\n text(buttonName, buttonX + index * squareSize + squareSize / 2, uiY + squareSize / 2);\n });\n\n\n // Draw game speed indicator light \n let indicatorY = height - 80 - 20; // Position above the speed buttons, with a small gap\n let indicatorWidth = 15; // Width of each segment\n let indicatorHeight = 10; // Height of each segment\n let indicatorSpacing = 5; // Space between segments\n let indicatorX = buttonX + 1.5 * squareSize - (3 * (indicatorWidth + indicatorSpacing)); // Center the indicator\n\n // Calculate the current index based on gameSpeed\n let currentIndex = findNearestFraction(gameSpeed); // Find the nearest fraction for the current speed\n\n // Draw segments with adjustment for paused state\n for (let i = 0; i < 7; i++) {\n fill(gameSpeed === 0 ? '#FF0000' : (i === currentIndex ? '#00FF00' : '#808080')); // Change color to red if paused\n rect(indicatorX + i * (indicatorWidth + indicatorSpacing), indicatorY, indicatorWidth, indicatorHeight);\n }\n\n // Draw \"Reset View\" button on the right\n let resetViewX = width - squareSize; // Position \"Reset View\" on the right\n fill('#88c47c'); // Set the background color for the \"Reset View\" button \n rect(resetViewX, uiY, squareSize, squareSize); // Drawing the button background\n fill('#0000FF'); // Blue text\n\n\n textSize(16);\n textAlign(CENTER, CENTER);\n text('Reset', resetViewX + squareSize / 2, uiY + squareSize / 3);\n text('View', resetViewX + squareSize / 2, uiY + 2 * (squareSize / 3));\n\n //Sub-menu when you click \"Build\"\n if (showBuildMenu) {\n let buildMenuX = 2 * squareSize; // Position above 'Build'\n let buildMenuY = height - 160; // Y position above the UI bar\n let buildMenuWidth = 4 * squareSize; //Adjust this if need more space for more options\n let buildMenuHeight = squareSize;\n\n // Draw the menu background\n fill('#cf9802'); // Yellow for the build menu background\n rect(buildMenuX, buildMenuY, buildMenuWidth, buildMenuHeight);\n\n // Draw icons and text for \"Tower\", \"Wall\", and \"Farm\"\n let options = ['Tower', 'Wall', 'Farm'];\n let icons = [towerIcon, wallIcon, farmIcon];\n options.forEach((option, index) => {\n let iconX = buildMenuX + index * squareSize + squareSize / 4;\n let iconY = buildMenuY + (buildMenuHeight - icons[index].height) / 2;\n image(icons[index], iconX, iconY);\n\n // Draw the text over the icon, vertically centered\n fill('#0000FF'); // Blue text for visibility\n textAlign(CENTER, CENTER);\n textSize(16); // Adjust text size as needed\n text(option, iconX + icons[index].width / 2, iconY + icons[index].height / 2); // Center text over the icon\n });\n }\n\n\n}\n\n//Build units on the grid\nfunction placeUnit(gridX, gridY) {\n if (grid[gridX][gridY] === undefined && !isLocationOccupiedByEnemy(gridX, gridY) && gridOwnership[gridX][gridY] === 'player') { // Check if grid square is empty, not occupied by an enemy, and belongs to the player\n // Choose from one of these options if the conditions are met\n if (selectedBuildType === 'Tower' && money >= 3) {\n grid[gridX][gridY] = new BasicTower(gridX * cellSize, gridY * cellSize);\n money -= 3;\n } else if (selectedBuildType === 'Wall' && money >= 1) {\n grid[gridX][gridY] = new Wall(gridX * cellSize, gridY * cellSize);\n money -= 1;\n } else if (selectedBuildType === 'Farm' && money >= 5) {\n grid[gridX][gridY] = new Farm(gridX * cellSize, gridY * cellSize);\n money -= 5;\n } else {\n console.log('Not enough cash or no build type selected!');\n }\n } else {\n console.log('Cannot build here. Space is occupied or not owned by the player!');\n }\n}\n\nfunction captureTerritory() {\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (gridOwnership[i][j] === 'player' && isLocationOccupiedByEnemy(i, j)) {\n gridOwnership[i][j] = 'enemy'; // Enemy captures player square\n } else if (gridOwnership[i][j] === 'enemy' && !isLocationOccupiedByEnemy(i, j)) {\n let adjacentPlayerUnit = isAdjacentToPlayerUnit(i, j);\n if (adjacentPlayerUnit) {\n if (!adjacentPlayerUnit.lastCaptureTime) {\n adjacentPlayerUnit.lastCaptureTime = millis();\n } else if (millis() - adjacentPlayerUnit.lastCaptureTime >= 5000) {\n gridOwnership[i][j] = 'player'; // Player captures enemy square after 5 seconds\n adjacentPlayerUnit.lastCaptureTime = null; // Reset the capture timer\n }\n }\n }\n }\n }\n}\nfunction isAdjacentToPlayerUnit(gridX, gridY) {\n const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];\n for (let [dx, dy] of directions) {\n const x = gridX + dx;\n const y = gridY + dy;\n if (x >= 0 && x < cols && y >= 0 && y < rows && (grid[x][y] instanceof Tower || grid[x][y] instanceof Wall || grid[x][y] instanceof Farm || grid[x][y] instanceof MainBase)) {\n return grid[x][y]; // Return the player unit if found\n }\n }\n return null; // No adjacent player unit found\n}\n\n//You may prefer to use something like this instead of a generic 'upgradeStructure' function\n/* \nfunction upgradeTower(gridX, gridY) {\n if (grid[gridX][gridY] instanceof Tower && !(grid[gridX][gridY] instanceof SuperTower)) {\n let upgradedTower = new SuperTower(gridX * cellSize, gridY * cellSize);\n upgradedTower.hp = upgradedTower.maxHP; // Reset HP to maxHP on upgrade\n grid[gridX][gridY] = upgradedTower;\n money -= 2; // Deduct upgrade cost\n draw(); // Redraw to display the upgraded tower\n }\n}\n*/\n\nfunction sellTower(gridX, gridY) {\n if (grid[gridX][gridY] instanceof Tower) {\n if (grid[gridX][gridY] instanceof SuperTower) {\n money += 3; // Increase money by $3 for Super Tower\n } else {\n money += 2; // Increase money by $2 for Basic Tower\n }\n grid[gridX][gridY] = undefined; // Remove the tower from the grid\n }\n}\n\n//////////////////////////////////////////\n\n\n////////// ALL THE CLICKING AND UI CODE /////////\n\n//Handle clicking the UI\nfunction handleUIInteraction() {\n //Calculate basic positioning first\n let uiHeight = 80; // Height of the UI bar\n let squareSize = uiHeight; // Assuming square buttons for actions\n let uiY = height - uiHeight;\n let resetViewButtonX = width - squareSize; // Position for \"Reset View\" on the far right\n let speedControlStartX = width - 4 * squareSize; // Start X for speed control buttons\n\n // Check if the click is within the UI area for Speed Up/Slow Down\n if (mouseY > uiY) {\n if (mouseX >= speedControlStartX && mouseX < resetViewButtonX) {\n //This figures out which square you clicked\n let clickedIndex = floor((mouseX - speedControlStartX) / squareSize);\n let buttonNames = ['Pause', 'Slower', 'Faster'];\n\n switch (buttonNames[clickedIndex]) {\n case 'Pause':\n togglePause();\n break;\n case 'Slower':\n adjustGameSpeed(false);\n break;\n case 'Faster':\n adjustGameSpeed(true);\n break;\n }\n } else if (mouseX >= resetViewButtonX && mouseX < width) {\n // Click on \"Reset View\"\n resetGridView();\n } else if (mouseX < speedControlStartX) {\n // Handle other buttons (Drag, Build, Upgrade, Sell)\n let clickedIndex = floor(mouseX / squareSize) - 1; // Subtract 1 to account for the money square\n // Ensure index is within the bounds of the actions array\n if (clickedIndex >= 0 && clickedIndex < actions.length) {\n setCurrentAction(actions[clickedIndex]);\n if (actions[clickedIndex] === 'Build') {\n showBuildMenu = !showBuildMenu; // Toggle build menu visibility\n } else {\n showBuildMenu = false; // Hide build menu if other action is selected\n }\n }\n }\n }\n}\n\nfunction togglePause() {\n if (gameSpeed === 0) {\n // When unpausing, restore the last known non-zero speed\n gameSpeed = lastGameSpeed;\n } else {\n // When pausing, remember the current speed and then set gameSpeed to 0\n lastGameSpeed = gameSpeed;\n gameSpeed = 0;\n }\n}\n\nfunction adjustGameSpeed(speedUp) {\n //The possible game speeds.\n //By default, powers of 3/2 (1.5), so that speeding up once feels 50% faster\n const speedFactors = [8 / 27, 4 / 9, 2 / 3, 1, 3 / 2, 9 / 4, 27 / 8];\n let currentIndex = speedFactors.indexOf(gameSpeed); // Find the current index\n if (speedUp && currentIndex < speedFactors.length - 1) {\n gameSpeed = speedFactors[currentIndex + 1]; // Increase speed\n } else if (!speedUp && currentIndex > 0) {\n gameSpeed = speedFactors[currentIndex - 1]; // Decrease speed\n }\n}\n\n//For the sub-menu above \"Build\"\nfunction handleBuildMenuSelection() {\n const squareSize = 80;\n let buildMenuX = 2 * squareSize; // Correct starting X position of the build menu\n let buildMenuY = height - 160; // Correct starting Y position, above the UI bar\n let buildMenuWidth = 3 * squareSize; // Correct total width \n let sectionWidth = buildMenuWidth / 3; // Width of each section\n\n // Calculate which section was clicked based on mouseX position relative to the buildMenuX\n let clickedIndex = Math.floor((mouseX - buildMenuX) / sectionWidth);\n\n let buildOptions = ['Tower', 'Wall', 'Farm'];\n if (mouseY > buildMenuY && mouseY < buildMenuY + squareSize) { // Ensure mouseY is also within the menu's Y bounds\n if (clickedIndex >= 0 && clickedIndex < buildOptions.length) {\n selectedBuildType = buildOptions[clickedIndex];\n setCurrentAction('Build');\n showBuildMenu = false; //hide the build menu after selection\n }\n }\n}\n\n//Handle all clicking on the actual map grid.\nfunction handleGridInteraction() {\n let adjustedMouseX = mouseX - offsetX;\n let adjustedMouseY = mouseY - offsetY;\n let gridX = floor(adjustedMouseX / cellSize);\n let gridY = floor(adjustedMouseY / cellSize);\n\n //switch behavior based on current action\n switch (currentAction) {\n case 'Drag':\n isDragging = true;\n dragStartX = mouseX;\n dragStartY = mouseY;\n break;\n case 'Build':\n if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows) {\n placeUnit(gridX, gridY);\n }\n break;\n case 'Upgrade':\n // Check if there's a structure to upgrade and if the player has enough money\n if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows && grid[gridX][gridY]) {\n let structure = grid[gridX][gridY];\n if (money >= structure.originalCost) {\n upgradeStructure(gridX, gridY);\n } else {\n console.log('Not enough money to upgrade!');\n }\n }\n break;\n case 'Sell':\n if (gridX >= 0 && gridX < cols && gridY >= 0 && gridY < rows && grid[gridX][gridY]) {\n sellStructure(gridX, gridY);\n }\n break;\n default:\n console.log('Action not recognized');\n break;\n }\n}\n\n//Makes sure screren coordinates are in the game grid (in case of dragging/scrolling)\nfunction isInGridBounds(x, y) {\n let adjustedX = x - offsetX;\n let adjustedY = y - offsetY;\n return adjustedX >= 0 && adjustedX <= cols * cellSize &&\n adjustedY >= 0 && adjustedY <= rows * cellSize;\n}\n\nfunction mousePressed() {\n // Check if the click is within the UI area or build menu\n if (mouseY > height - 80) {\n handleUIInteraction();\n } else if (showBuildMenu) {\n handleBuildMenuSelection();\n } else {\n handleGridInteraction();\n }\n}\n\nfunction mouseDragged() {\n if (isDragging && currentAction === 'Drag') {\n // Calculate the difference from the initial drag point, then update offsets\n offsetX += mouseX - dragStartX;\n offsetY += mouseY - dragStartY;\n dragStartX = mouseX;\n dragStartY = mouseY;\n draw();\n }\n}\n\nfunction mouseReleased() {\n isDragging = false;\n}\n\n\n\n/////////////////////////////////////////////\n\n//Here you can set keyboard commands.\nfunction keyPressed() {\n switch (key) {\n case '1':\n currentAction = 'drag';\n break;\n case '2':\n currentAction = 'placeBasicTower';\n break;\n case '3':\n currentAction = 'upgradeTower';\n break;\n default:\n currentAction = 'none'; // Placeholder for other actions\n break;\n }\n}\n\n//////////OTHER ACTIONS//////////////\n\n//Sell a structure. You could set this up so that structures with more remaining HP give more money\nfunction sellStructure(gridX, gridY) {\n let structure = grid[gridX][gridY];\n if (structure) {\n let refundAmount = 0;\n if (structure instanceof MainBase || structure instanceof EnemyBase) {\n console.log('Cannot sell Main Base or Enemy Base!');\n return; // Exit the function if trying to sell Main Base or Enemy Base\n } else if (structure instanceof Tower) {\n refundAmount = structure instanceof SuperTower ? 3 : 2;\n } else if (structure instanceof Wall) {\n refundAmount = 1;\n } else if (structure instanceof Farm) {\n refundAmount = 3;\n }\n money += refundAmount;\n grid[gridX][gridY] = undefined; // Remove the structure\n }\n}\n\n//Upgrade a structure.\nfunction upgradeStructure(gridX, gridY) {\n let structure = grid[gridX][gridY];\n if (structure && !structure.upgraded && !(structure instanceof MainBase) && !(structure instanceof EnemyBase)) {\n let upgradeCost = structure.originalCost; //You may want to adjust this cost.\n\n //Make sure player has enough money\n if (money >= upgradeCost) {\n // Check if the structure is a Tower and upgrade it to a SuperTower\n if (structure instanceof Tower) {\n grid[gridX][gridY] = new SuperTower(structure.x, structure.y);\n } else { //Otherwise, just upgrade using the .upgraded property.\n structure.upgraded = true; // Mark as upgraded\n structure.hp *= 2; // Double HP\n structure.maxHP = structure.hp; // Update this line to reflect the new maxHP\n structure.color = darkenColor(structure.color); // Darken the background color to indicate an upgrade\n }\n //Spend money\n money -= upgradeCost;\n } else {\n console.log('Not enough cash to upgrade!');\n }\n } else {\n console.log('Cannot upgrade Main Base or Enemy Base!');\n }\n}\n\n\n\n\n/////////////////////////////////////\n// HELPER FUNCTIONS //\n/////////////////////////////////////\n\n//Set up grid structure so we can count in cells instead of pixels\nfunction makeGrid(cols, rows) {\n let arr = new Array(cols);\n for (let i = 0; i < arr.length; i++) {\n arr[i] = new Array(rows);\n }\n return arr;\n}\n\n//Count number of enemy bases; helpful for spawn timing\nfunction countEnemyBases() {\n let count = 0;\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n if (grid[i][j] instanceof EnemyBase) {\n count++;\n }\n }\n }\n return count;\n}\n\n// Check if a specific grid location is occupied by an enemy\nfunction isLocationOccupiedByEnemy(gridX, gridY) {\n return enemies.some(enemy => {\n const enemyGridX = Math.floor(enemy.x / cellSize);\n const enemyGridY = Math.floor(enemy.y / cellSize);\n return gridX === enemyGridX && gridY === enemyGridY;\n });\n}\n\n//Darken a given color (used for upgrading)\nfunction darkenColor(color) {\n // Function to darken a given color by 20%\n let colorObj = colorStringToRGB(color);\n colorObj.r = Math.max(0, colorObj.r - 51); // Reduce RGB values by 20% (255 * 0.2 = 51)\n colorObj.g = Math.max(0, colorObj.g - 51);\n colorObj.b = Math.max(0, colorObj.b - 51);\n return `rgb(${colorObj.r}, ${colorObj.g}, ${colorObj.b})`; // Return the darkened color\n}\n\n// Function to convert color string to RGB object\nfunction colorStringToRGB(color) {\n let canvas = document.createElement('canvas');\n canvas.height = 1;\n canvas.width = 1;\n let ctx = canvas.getContext('2d');\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n let data = ctx.getImageData(0, 0, 1, 1).data;\n return { r: data[0], g: data[1], b: data[2] };\n}\n\n//To check if a floating point number is close to a listed fraction\nfunction findNearestFraction(currentSpeed) {\n // Define the fractions as speeds and their corresponding indices\n const fractions = [8 / 27, 4 / 9, 2 / 3, 1, 3 / 2, 9 / 4, 27 / 8];\n let nearestFractionIndex = 0; // Default to the first fraction\n let minDifference = Math.abs(currentSpeed - fractions[0]);\n\n for (let i = 1; i < fractions.length; i++) {\n let difference = Math.abs(currentSpeed - fractions[i]);\n if (difference < minDifference) {\n minDifference = difference;\n nearestFractionIndex = i;\n }\n }\n\n return nearestFractionIndex; // Return the index of the nearest fraction\n}\n\n//Set the action equipped by mouse click\nfunction setCurrentAction(action) {\n currentAction = action;\n // Log the current action to the console\n console.log(`Current action set to: ${action}`);\n}\n\n//Handle clicking 'Reset View' versus anything else.\nfunction selectAction(action) {\n setCurrentAction(action);\n if (action === 'Reset View') {\n resetGridView();\n }\n}\n\n//Align the map grid.\nfunction resetGridView() {\n // Assuming the Main Base's vertical position (baseY) should be centered\n let baseY = floor(rows / 2);\n\n // Set offsetX to 0 to align the grid's left edge with the window's left edge\n offsetX = 0;\n\n // Calculate offsetY to center the Main Base vertically in the window\n //This calculation ensures the Main Base is centered vertically, taking into account the UI height\n offsetY = (height / 2) - ((baseY + 0.5) * cellSize) - (80 / 2); // Adjust for UI height and centering the base vertically\n\n}\n\n//In case window size is changed.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n\n","style.css":"","index.html":"\n\n\n\n \n \n [Template] Tower Defense\n \n\n\n\n\n \n \n \n \n \n \n \n\n\n","EnemyBase.js":"//The Enemy Base just spawns enemies. You can add more properties to make it destructible or give it attacks.\nclass EnemyBase {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n\n draw() {\n if (enemyBaseImg) {\n image(enemyBaseImg, this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n } else {\n fill('#8B4513'); // Brown square by default\n rect(this.x + offsetX, this.y + offsetY, cellSize, cellSize);\n }\n }\n}"},"chat_history":[],"assets":[{"name":"hand_icon","created_at":"2025-08-26T23:47:46.893898Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"b1fii1hijddgopdnfoim","deleted":false,"id":85137},{"name":"tower","created_at":"2025-08-26T23:47:46.891062Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"y8wzfyd4eus5y8zj7djm","deleted":false,"id":85136},{"name":"wall_icon","created_at":"2025-08-26T23:47:46.888369Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"i5iaqckat4kkotohhzfa","deleted":false,"id":85135},{"name":"farm_icon","created_at":"2025-08-26T23:47:46.885225Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"nmfak7otdoyam6mthouk","deleted":false,"id":85134},{"name":"tile0","created_at":"2025-08-26T23:47:46.883233Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"mf5mrxv8wimidomfe0fn","deleted":false,"id":85133},{"name":"tile1","created_at":"2025-08-26T23:47:46.880211Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"lblbtyvvgkay3hhi258b","deleted":false,"id":85132},{"name":"Base","created_at":"2025-08-26T23:47:46.877099Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"wjthybzzbich3sbnemq1","deleted":false,"id":85131},{"name":"enemy0","created_at":"2025-08-26T23:47:46.873933Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"ayoaj63gyrh4lyqklch5","deleted":false,"id":85130},{"name":"enemyBaseImg","created_at":"2025-08-26T23:47:46.870512Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"xfm2vz3t5w6j27ntkrrz","deleted":false,"id":85129},{"name":"SS","created_at":"2025-08-26T23:47:46.867000Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"afbthyt38oud8gdgdaqn","deleted":false,"id":85128},{"name":"gif","created_at":"2025-08-26T23:47:46.845399Z","resource_type":"image","tags":[],"creator":null,"project_id":9749,"cloudinary_id":"mcdyw5n3cnc35mfkvixv","deleted":false,"id":85127}],"messages_sent":0,"comments":[],"steps":[]}