Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Buzzaw Breach (Game)
ID	6398337711390720
Created	3 years ago, 1650283965196
Updated	3 years ago, 1650672776763
Code	<!DOCTYPE html> <!-- Buzzaw Breach (Game) Gray Wolf, April 2022 @Important There seems to be a glitch when running on Chrome in Incognito mode. If it still comes up with the size buttons after clicking on one of them try it in a different browser (Edge, Opera, Firefox, etc.), or not using Incognito mode. @How You need to defend from the attacking Buzzaws. They will firstly target your cannons, then destroy the towers so you can't place more cannons. Each Buzzaw that gets past your defences will reduce your overall health by 10%. Left click to drag a tower from your inventory onto an available tower. As long as there is a single piece of the tower you can place your cannon on it. Left click to drag a cannon (that's already been placed on a tower) on top of another cannon of the same type and level to upgrade it, keeping an average of the health of the two cannons. You can upgrade twice per cannon (up to level 3). Right click on a cannon to view its properties. You can also then click on the Sell button to sell the cannon at a reduced cost (based on the original sell price and current health remaining). There are a total of 8 different cannon types all with their own abilities. You'll need to work out the strategy that best works for you. @Notes_to_judges - Tried to make something different/unique to the standard Tower Defence game - ES6+ JavaScript syntax - All assets using cached images for better performance - OOP + Object Inheritance for the Cannons - drag and drop functionality - each cannon (8) able to be upgraded twice - right-click to view cannon properties @Credits KWC for the new object function https://www.khanacademy.org/profile/kaid_1018232416454567422505063 @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 --> <html> <head> <meta charset="utf-8"> <title>Buzzaw Breach (Game)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dosis&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: 'Dosis', sans-serif; overflow: hidden; background-color: rgb(55, 55, 55); } main { } .container { padding: 0; margin: 0; margin: auto; min-height: 100%; max-width: 900px; overflow: hidden; } /resize styles for main resize button view/ #resize { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:100vw; height: 100vh; box-sizing: border-box; background-color: rgb(55, 55, 55); color: rgb(241, 240, 241); z-index: 1000; } #resize-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100vw; text-align: center; padding: 20px; } .resize-button { margin-top: 10px; padding: 15px; background-color: rgb(7, 141, 168); color: rgb(255, 255, 255); text-decoration: none; transition: all 0.2s linear; } .resize-button:hover { background-color: rgb(7, 118, 140); } </style> </head> <body> <main> <section id="resize"> <div id="resize-container"> <h1>Buzzaw Breach TD</h1> <p>This page is best viewed with a width of 900 and height of 700.</p> <a class="resize-button" id="resize-button-noeditor" href="https://www.khanacademy.org/cs/buzzaw-breach/6398337711390720?width=900&height=700&editor=no"> Click to view at correct size (without code editor) </a> <a class="resize-button" id="resize-button-noeditor" href="https://www.khanacademy.org/cs/buzzaw-breach/6398337711390720?width=900&height=700"> Click to view at correct size (with code editor) </a> <p>If you still see the buttons above after clicking one of them, try it in a different browser (Edge, Opera, Firefox, etc.), or not using Incognito mode.</p> </div> </section> <!--Resize Section--> <section id="main"> <article class="container"> <canvas class="program"></canvas> </article> </section> <!--Game Section--> </main> <!--Import Khan Academy's Processing JS library--> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <!--Create the functions ready to insert into the appropriate places in the tutorial--> <script type="application/javascript"> window.addEventListener('DOMContentLoaded', (event) => { const programArr = [ (processingInstance) => { with (processingInstance) { size(900, 700, P2D); frameRate(60); smooth(); / @created_by MKaelin368 (KWC) / Object.constructor.prototype.new = function() { let obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; / Default font / textFont(createFont("Dosis")); / main app object (instantiated later) / let app; / Mouse events / let pressed = false, clicked = false, hover = false; mouseClicked = () => { clicked = true; } mousePressed = () => { pressed = true; } mouseReleased = () => { pressed = false; } mouseOut = () => { pressed = false; } / Scene Transitions / const Transition = (function() { const Transition = function(args) { this.h = 0; this.vy = 15; this.color = args.color \|\| color(0); this.active = false; this.scene = "home"; }; Transition.prototype.reset = function() { this.h = 0; this.vy = 15; }; Transition.prototype.draw = function() { if(this.active) { pushStyle(); noStroke(); fill(this.color); rect(-20, -20, width + 40, this.h); rect(-20, height-this.h, width + 40, this.h + 20); popStyle(); } }; Transition.prototype.update = function() { if(this.active) { this.h+= this.vy; //if halfway across the screen then change the scene if(this.h >= 350) { app.scene = this.scene; this.vy= -1; } //else if it's completely off the screen reset it and set to inactive else if(this.h < 0) { this.reset(); this.active = false; } } }; Transition.prototype.run = function() { this.draw(); this.update(); }; return Transition; })(); /* Gray Wolf Logo */ const Logo = (function() { const Logo = function(args) { this.scale = args.scale \|\| 1.0; this.x = args.x \|\| 600 0.5 * this.scale; this.y = args.y \|\| 600 * 0.4 * this.scale; this.colors = { back: color(55, 55, 55), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(232, 232, 232) }; this.font = args.font \|\| createFont("Trebuchet MS"); this.gray = { words: "G R A Y W O L F", index: 0, timer: 0, delay: 2 }; this.prod = { opacity: 0, y: height * 1.2, }; this.img = undefined; this.imgs = []; this.splits = { left: undefined, right: undefined }; this.timer = 0; this.states = { a: { delay: 30, duration: 120, }, b: { delay: 30 }, c: { delay: 55 }, d: { delay: 45, x: 0 } }; this.state = "a"; this.done = false; this.complete = false; this.hover = false; this.init(); }; Logo.prototype.init = function() { //generte the wolf graphic const gx = createGraphics(600, 600, P2D); gx.background(0, 0); gx.fill(255); //inner gx.beginShape(); gx.vertex(300, 137); gx.vertex(377, 150); gx.vertex(454, 118); gx.vertex(410, 213); gx.vertex(429, 202); gx.vertex(464, 279); gx.vertex(396, 361); gx.vertex(381, 316); gx.vertex(341, 399); gx.vertex(300, 443); gx.vertex(259, 399); gx.vertex(219, 316); gx.vertex(204, 361); gx.vertex(136, 279); gx.vertex(171, 202); gx.vertex(190, 213); gx.vertex(146, 118); gx.vertex(223, 150); gx.endShape(CLOSE); const shape = gx.get(115, 90, 370, 355); gx.noStroke(); for(let i = 90; i <= 445; i++) { gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445)); gx.rect(115, i, 370, 1); } gx.stroke(150, 20); gx.strokeWeight(1); for(let i = 0; i < 200; i++) { gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445)); } gx.filter(BLUR, 2.5); const grad = gx.get(115, 90, 370, 355); grad.mask(shape); gx.background(this.colors.back); gx.background(0, 0); gx.noStroke(); gx.fill(this.colors.outline); //outer gx.beginShape(); gx.vertex(300, 126); gx.vertex(376, 138); gx.vertex(480, 92); gx.vertex(437, 187); gx.vertex(482, 283); gx.vertex(396, 364); gx.vertex(383, 344); gx.vertex(354, 404); gx.vertex(300, 444); gx.vertex(246, 404); gx.vertex(217, 344); gx.vertex(204, 364); gx.vertex(118, 283); gx.vertex(163, 187); gx.vertex(120, 92); gx.vertex(224, 138); gx.endShape(CLOSE); gx.image(grad, 115, 90); fill(this.colors.outline); //nose gx.beginShape(); gx.vertex(300, 372); gx.vertex(323, 367); gx.vertex(320, 382); gx.vertex(300, 400); gx.vertex(280, 382); gx.vertex(277, 367); gx.endShape(CLOSE); //left eye gx.beginShape(); gx.vertex(324, 341); gx.vertex(320, 268); gx.vertex(428, 231); gx.vertex(378, 290); gx.vertex(358, 278); gx.vertex(372, 280); gx.vertex(390, 257); gx.vertex(334, 277); gx.endShape(CLOSE); //right eye gx.beginShape(); gx.vertex(276, 341); gx.vertex(280, 268); gx.vertex(172, 231); gx.vertex(222, 290); gx.vertex(244, 278); gx.vertex(228, 280); gx.vertex(210, 257); gx.vertex(266, 277); gx.endShape(CLOSE); this.img = gx.get(115, 90, 370, 355); //generate pieces of image for(let i = 0; i < 10; i++) { for(let j = 0; j < 10; j++) { this.imgs.push({ img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5), w: 37, h: 35.5, dx: 115 + 37 * i + 18.5, dy: 90 + 35.5 * j + 17.75, x: random(-width, width * 2), y: random(-height, height * 2), angle: ~~random(3600) }); } } }; Logo.prototype.draw = function() { if(!this.complete) { pushMatrix(); scale(this.scale); pushStyle(); switch(this.state) { case "a": background(this.colors.back); if(this.timer++ >= this.states.a.delay) { for(let i = 0; i < this.imgs.length; i++) { const item = this.imgs[i]; item.x = lerp(item.x, item.dx, 0.1); item.y = lerp(item.y, item.dy, 0.1); item.angle = lerp(item.angle, 0, 0.1); imageMode(CENTER); pushMatrix(); translate(item.x, item.y - 28); rotate(item.angleMath.PI/180); image(item.img, 0, 0, item.w, item.h); popMatrix(); } if(this.timer >= this.states.a.duration) { this.state = "b"; this.timer = 0; } } break; case "b": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); if(this.timer++ >= this.states.b.delay) { textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) { this.gray.index++; this.gray.timer = 0; } text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y 2 / this.scale); this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255); this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030); textSize(30); fill(this.colors.text, this.prod.opacity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); } if(this.gray.index === this.gray.words.length) { this.state = "c"; this.timer = 0; } break; case "c": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); if(this.timer++ >= this.states.c.delay) { this.prod.opacity = constrain(this.prod.opacity - 5, 0, 255); } textSize(30); fill(this.colors.text, this.prod.opacity); this.prod.y = constrain(~~lerp(this.prod.y, this.y * 2.1, 0.035), 530 * this.scale, Infinity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); if(this.prod.opacity === 0) { //get split image for next state this.splits.left = get(0, 0, width / 2, height); this.splits.right = get(width / 2, 0, width / 2, height); this.state = "d"; this.timer = 0; } break; case "d": scale(1 / this.scale); imageMode(CORNER); if(this.timer++ >= this.states.d.delay) { this.states.d.x = constrain(this.states.d.x + 7, 0, width / 2); } image(this.splits.left, -this.states.d.x, 0); image(this.splits.right, width / 2 + this.states.d.x, 0); if(this.states.d.x >= width / 2) { this.completed = true; } if(this.timer === this.states.d.delay) { this.done = true; } break; } popStyle(); popMatrix(); } }; return Logo; })(); / Buttons / const Button = (function() { const Button = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 80; this.h = args.h \|\| 40; this.content = args.content; this.textSize = args.textSize \|\| this.w * 0.18; this.enabled = args.enabled === false ? false : true; this.hover = false; this.selected = args.selected \|\| false; this.action = args.action; this.backColor = args.backColor \|\| color(100, 100, 100); this.textColor = args.textColor \|\| color(250); this.type = args.type \|\| 0; }; Button.prototype.over = function() { return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h); }; Button.prototype.draw = function() { noStroke(); this.hover = this.over(); if(this.enabled && this.hover) { hover = true; } pushStyle(); switch(this.type) { case 0: stroke(this.textColor, 100); strokeWeight(3); fill(this.backColor, this.selected ? 100 : this.enabled && this.hover ? 250 : 100); rect(this.x, this.y, this.w, this.h); strokeWeight(1); break; case 1: noStroke(); fill(this.backColor, this.selected ? 100 : this.enabled && this.hover ? 220 : 150); rect(this.x, this.y, this.w, this.h); break; } popStyle(); pushStyle(); textAlign(CENTER, CENTER); textSize(this.textSize); fill(this.enabled ? this.textColor : color(this.textColor, 100)); text(this.content, this.x + this.w / 2, this.y + this.h / 2); popStyle(); if(this.enabled && clicked && this.hover) { this.action(); } }; return Button; })(); / Towers (where cannons are placed / const Tower = (function() { const Tower = function(args) { this.x = args.x; this.y = args.y; this.w = args.w \|\| 40; this.h = args.h \|\| 40; this.diameter = this.w; this.type = args.type \|\| 0; this.health = 10; this.cannon = null; this.bits = []; this.active = true; this.setup(); }; Tower.prototype = { setup: function() { //construct the bits const bitSize = this.diameter * 0.25; let n = 0; for(let x = 0; x < 4; x++) { for(let y = 0; y < 4; y++) { this.bits.push({ x: this.x + x * bitSize, y: this.y + y * bitSize, w: bitSize, h: bitSize, diameter: bitSize, health: 10, index: n++ }); } } }, update: function() { //show flames/smoke }, draw: function() { if(this.bits.length === 16) { image(app.images.tower, this.x, this.y, this.w, this.h); } else { image(app.images.tower_base, this.x, this.y, this.w, this.h); for(let i = 0; i < this.bits.length; i++) { const bit = this.bits[i]; image(app.towerImages[bit.index], bit.x, bit.y, bit.diameter, bit.diameter); } } }, run: function() { this.update(); this.draw(); } }; return Tower; })(); / Cannons / const Cannon = (function() { const Cannon = function(args) { this.x = args.x; this.y = args.y; this.base = { x: this.x, y: this.y }; this.diameter = args.diameter \|\| 30; this.angle = args.angle \|\| 0; this.rot = args.rot \|\| 0.2; this.type = args.type \|\| 0; this.level = args.level \|\| 0; this.selected = false; this.placed = args.placed \|\| false; this.health = args.health \|\| 100; this.healthBase = this.health; this.delayValue = 0; this.sell = args.sell \|\| 0; this.cost = args.cost \|\| 0; this.delay = args.delay \|\| 30; this.range = args.range \|\| this.diameter * 6; this.damage = args.damage \|\| 1; this.strength = args.strength \|\| 1; this.fired = false; this.canFire = false; //only if target in range this.bullet = args.bullet \|\| { diameter: 5, speed: 5 }; this.target = args.target \|\| { x: this.x, y: -height }; this.turretLength = (args.turretLength \|\| 0.7) * this.diameter; this.turretConstraints = { min: this.turretLength * 0.7, max: this.turretLength }; this.tower = null; this.colors = args.colors \|\| { base: color(247, 84, 111), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(0) }; this.name = args.name \|\| "Basic"; }; Cannon.prototype.update = function() { var angle = degrees(atan2(this.target.y - this.y, this.target.x - this.x)) + 90; this.angle += ((angle - this.angle) * this.rot); }; Cannon.prototype.recoil = function() { if(this.turretLength !== this.turretConstraints.max) { this.turretLength = ceil(lerp(this.turretLength, this.turretConstraints.max, 0.1)); } }; Cannon.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_basic_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_basic_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_basic_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret stroke(66, 66, 66); strokeWeight(this.diameter * 0.05); fill(this.colors.turret); rect(-this.diameter * 0.1, -this.turretLength, this.diameter * 0.2, this.turretLength); //center switch(this.level) { case 0: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 1: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 2: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); noStroke(); fill(48, 47, 48); ellipse(0, 0, this.diameter * 0.3, this.diameter * 0.3); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; Cannon.prototype.showRange = function() { //draw the range (for testing only) noStroke(); fill(199, 195, 199, 30); ellipse(this.x, this.y, this.range, this.range); }; Cannon.prototype.showHealth = function() { if(this.placed) { noStroke(); fill(222, 106, 131); rect(this.x - this.diameter * 0.4, this.y + this.diameter * 0.6, this.diameter * 0.8, this.diameter * 0.2); const damage = map(this.health, 0, this.healthBase, 0, this.diameter * 0.8); fill(94, 168, 94); rect(this.x - this.diameter * 0.4, this.y + this.diameter * 0.6, damage, this.diameter * 0.2); } }; Cannon.prototype.run = function() { this.update(); this.recoil(); this.draw(); this.showHealth(); // this.showRange(); //testing only }; return Cannon; })(); const CannonShield = (function() { const CannonShield = function(args) { Cannon.call(this, args); }; CannonShield.prototype = Object.create(Cannon.prototype); CannonShield.prototype.draw = function() { translate(this.x, this.y); //base switch(this.level) { case 0: image(app.images.cannon_shield_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_shield_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_shield_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //center switch(this.level) { case 0: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 1: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 2: strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); noStroke(); fill(48, 47, 48); ellipse(0, 0, this.diameter * 0.3, this.diameter * 0.3); break; } translate(-this.x, -this.y); }; return CannonShield; })(); const CannonRapid = (function() { const CannonRapid = function(args) { Cannon.call(this, args); //used to alternate turrets when firing this.turret = 1; this.turrets = [ { len: this.turretLength }, { len: this.turretLength } ]; }; CannonRapid.prototype = Object.create(Cannon.prototype); CannonRapid.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonRapid.prototype.recoil = function() { if(this.turrets[0].len !== this.turretConstraints.max) { this.turrets[0].len = ceil(lerp(this.turrets[0].len, this.turretConstraints.max, 0.1)); } if(this.turrets[1].len !== this.turretConstraints.max) { this.turrets[1].len = ceil(lerp(this.turrets[1].len, this.turretConstraints.max, 0.1)); } }; CannonRapid.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_rapid_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_rapid_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_rapid_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //two turrets stroke(54, 92, 60); strokeWeight(this.diameter * 0.02); fill(68, 130, 86); rect(-this.diameter * 0.25, -this.turrets[0].len, this.diameter * 0.2, this.turrets[0].len); rect( this.diameter * 0.05, -this.turrets[1].len, this.diameter * 0.2, this.turrets[1].len); switch(this.level) { case 0: image(app.images.cannon_rapid_0_center, -this.diameter * 0.5, -this.diameter * 0.5, this.diameter * 1.0, this.diameter * 1.0); break; case 1: image(app.images.cannon_rapid_1_center, -this.diameter * 0.5, -this.diameter * 0.5, this.diameter * 1.0, this.diameter * 1.0); break; case 2: image(app.images.cannon_rapid_2_center, -this.diameter * 0.5, -this.diameter * 0.5, this.diameter * 1.0, this.diameter * 1.0); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonRapid; })(); const CannonSniper = (function() { const CannonSniper = function(args) { Cannon.call(this, args); // this.turretLength = this.diameter * 0.88; }; CannonSniper.prototype = Object.create(Cannon.prototype); CannonSniper.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonSniper.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_sniper_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_sniper_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_sniper_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret stroke(57, 85, 102); strokeWeight(this.diameter * 0.05); fill(this.colors.turret); rect(-this.diameter * 0.1, -this.turretLength, this.diameter * 0.2, this.turretLength); switch(this.level) { case 0: noStroke(); fill(98, 143, 163); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(76, 124, 145); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 1: noStroke(); fill(98, 143, 163); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(76, 124, 145); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 2: noStroke(); fill(98, 143, 163); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(60, 60, 60); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonSniper; })(); const CannonFlame = (function() { const CannonFlame = function(args) { Cannon.call(this, args); }; CannonFlame.prototype = Object.create(Cannon.prototype); CannonFlame.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonFlame.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_flame_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_flame_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_flame_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret stroke(57, 85, 102); strokeWeight(this.diameter * 0.05); fill(this.colors.turret); rect(-this.diameter * 0.12, -this.turretLength, this.diameter * 0.24, this.turretLength); switch(this.level) { case 0: noStroke(); fill(this.colors.center); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(this.colors.base); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 1: noStroke(); fill(this.colors.center); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(this.colors.base); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 2: noStroke(); fill(this.colors.center); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(242, 61, 91); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonFlame; })(); const CannonBeast = (function() { const CannonBeast = function(args) { Cannon.call(this, args); this.turretLength = this.diameter * 0.80; }; CannonBeast.prototype = Object.create(Cannon.prototype); CannonBeast.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonBeast.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_beast_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_beast_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_beast_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret stroke(66, 66, 66); strokeWeight(this.diameter * 0.05); fill(38, 38, 38); rect(-this.diameter * 0.2, -this.turretLength, this.diameter * 0.4, this.turretLength); //center switch(this.level) { case 0: stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(0, 0, this.diameter * 0.7, this.diameter * 0.7); strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(135, 135, 135); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 1: stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(0, 0, this.diameter * 0.7, this.diameter * 0.7); strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(35, 35, 35); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; case 2: stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(0, 0, this.diameter * 0.7, this.diameter * 0.7); strokeWeight(this.diameter * 0.1); stroke(66, 66, 66); fill(166, 49, 73); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonBeast; })(); const CannonFreeze = (function() { const CannonFreeze = function(args) { Cannon.call(this, args); this.radius = args.radius \|\| 100; }; CannonFreeze.prototype = Object.create(Cannon.prototype); CannonFreeze.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonFreeze.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_freeze_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_freeze_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_freeze_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret strokeWeight(this.diameter * 0.05); if(this.level === 0) { stroke(57, 85, 102); fill(119, 181, 181); } else if(this.level === 1) { stroke(119, 181, 181); fill(49, 108, 166); } else { stroke(119, 181, 181); fill(43, 72, 112); } rect(-this.diameter * 0.12, -this.turretLength, this.diameter * 0.24, this.turretLength); //center switch(this.level) { case 0: noStroke(); fill(39, 91, 140); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(49, 108, 166); fill(119, 181, 181); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 1: noStroke(); fill(39, 91, 140); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(49, 108, 166); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; case 2: noStroke(); fill(39, 91, 140); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(49, 108, 166); fill(43, 72, 112); ellipse(0, 0, this.diameter * 0.4, this.diameter * 0.4); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonFreeze; })(); const CannonPoison = (function() { const CannonPoison = function(args) { Cannon.call(this, args); }; CannonPoison.prototype = Object.create(Cannon.prototype); CannonPoison.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonPoison.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_poison_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_poison_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_poison_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret strokeWeight(this.diameter * 0.05); switch(this.level) { case 0: stroke(48, 47, 48, 150); fill(161, 118, 179); break; case 1: stroke(131, 72, 156, 150); fill(111, 54, 135); break; case 2: stroke(131, 72, 156, 150); fill(93, 38, 117); break; } rect(-this.diameter * 0.12, -this.turretLength, this.diameter * 0.24, this.turretLength); //center switch(this.level) { case 0: noStroke(); fill(131, 72, 156); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(152, 109, 171); ellipse(0, 0, this.diameter * 0.45, this.diameter * 0.45); break; case 1: noStroke(); fill(131, 72, 156); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(111, 54, 135); ellipse(0, 0, this.diameter * 0.45, this.diameter * 0.45); break; case 2: noStroke(); fill(131, 72, 156); ellipse(0, 0, this.diameter * 0.5, this.diameter * 0.5); fill(93, 38, 117); ellipse(0, 0, this.diameter * 0.45, this.diameter * 0.45); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonPoison; })(); const CannonOcto = (function() { const CannonOcto = function(args) { Cannon.call(this, args); }; CannonOcto.prototype = Object.create(Cannon.prototype); CannonOcto.prototype.update = function() { Cannon.prototype.update.call(this); }; CannonOcto.prototype.draw = function() { translate(this.x, this.y); rotate(this.angle * Math.PI / 180); //base switch(this.level) { case 0: image(app.images.cannon_octo_0, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.cannon_octo_1, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 2: image(app.images.cannon_octo_2, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; } //turret strokeWeight(this.diameter * 0.05); switch(this.level) { case 0: stroke(20, 20, 20, 50); fill(115, 115, 115); break; case 1: stroke(200, 200, 200, 50); fill(80, 80, 80); break; case 2: stroke(200, 200, 200, 50); fill(80, 80, 80); break; } rect(-this.diameter * 0.12, -this.turretLength, this.diameter * 0.24, this.turretLength * 2); rect(-this.turretLength, -this.diameter * 0.12, this.turretLength * 2, this.diameter * 0.24); rotate(40); rect(-this.diameter * 0.12, -this.turretLength, this.diameter * 0.24, this.turretLength * 2); rect(-this.turretLength, -this.diameter * 0.12, this.turretLength * 2, this.diameter * 0.24); rotate(-40); //center switch(this.level) { case 0: noStroke(); fill(74, 74, 74); ellipse(0, 0, this.diameter * 0.6, this.diameter * 0.6); fill(140, 140, 140); ellipse(0, 0, this.diameter * 0.40, this.diameter * 0.40); break; case 1: noStroke(); fill(60, 60, 60); ellipse(0, 0, this.diameter * 0.65, this.diameter * 0.65); fill(140, 140, 140); ellipse(0, 0, this.diameter * 0.42, this.diameter * 0.42); fill(60, 60, 60); ellipse(0, 0, this.diameter * 0.35, this.diameter * 0.35); break; case 2: noStroke(); fill(60, 60, 60); ellipse(0, 0, this.diameter * 0.65, this.diameter * 0.65); fill(179, 75, 91); ellipse(0, 0, this.diameter * 0.42, this.diameter * 0.42); fill(60, 60, 60); ellipse(0, 0, this.diameter * 0.30, this.diameter * 0.30); break; } rotate(-(this.angle * Math.PI / 180)); translate(-this.x, -this.y); }; return CannonOcto; })(); / Enemies / const Enemy = (function() { const Enemy = function(args) { this.x = args.x; this.y = args.y; this.diameter = args.diameter \|\| 40; this.angle = 0; this.rot = args.rot \|\| 0.2; this.vx = 0; this.vy = 0; this.bullet = args.bullet \|\| { diameter: 6, speed: 4 }; this.target = args.target \|\| { x: width, y: this.y }; this.delayValue = 0; this.delay = args.delay \|\| 50; this.range = args.range \|\| 110; this.damage = args.damage \|\| 1; this.money = args.money \|\| 30; this.fired = false; this.canFire = false; //only if target in range this.speed = args.speed \|\| 1; this.recoil = args.recoil \|\| this.diameter * 0.2; this.type = args.type \|\| 0; this.health = args.health \|\| 100; this.healthBase = this.health; this.closest = null; this.closestBit = null; this.start = args.start \|\| 0; this.state = args.state \|\| 0; //0 = normal, 1 = frozen this.timer = 0; this.spin = 0; }; Enemy.prototype.update = function() { const angle = degrees(atan2(this.target.y - this.y, this.target.x - this.x)) + 90; this.angle += ((angle - this.angle) * this.rot); this.x+= this.vx; this.timer++; }; Enemy.prototype.draw = function() { switch(this.type) { case 0: image(app.images.buzzaw_seed, this.x - this.diameter * 0.6, this.y - this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); break; case 1: image(app.images.buzzaw_seedling, this.x - this.diameter * 0.85, this.y - this.diameter * 2.3, this.diameter * 1.5, this.diameter * 3); break; case 2: translate(this.x, this.y); this.spin = this.timer * Math.PI / 180; rotate(this.spin); image(app.images.buzzaw_sapling_back, -this.diameter * 0.6, -this.diameter * 0.6, this.diameter * 1.2, this.diameter * 1.2); rotate(-this.spin); translate(-this.x, -this.y); image(app.images.buzzaw_sapling_front, this.x - this.diameter * 0.55, this.y - this.diameter * 0.55, this.diameter * 1.1, this.diameter * 1.1); break; case 3: image(app.images.buzzaw_tree_tail, this.x - this.diameter * 0.85, this.y - this.diameter * 0.85, this.diameter * 1.1, this.diameter * 1.1); translate(this.x, this.y); this.spin = this.timer * Math.PI / 180; rotate(this.spin); image(app.images.buzzaw_tree_back, -this.diameter * 0.8, -this.diameter * 0.8, this.diameter * 1.6, this.diameter * 1.6); rotate(-this.spin); translate(-this.x, -this.y); image(app.images.buzzaw_tree_front, this.x - this.diameter * 0.55, this.y - this.diameter * 0.55, this.diameter * 1.1, this.diameter * 1.1); break; case 4: image(app.images.buzzaw_ultimate_tail, this.x - this.diameter * 0.9, this.y - this.diameter * 0.9, this.diameter * 1.1, this.diameter * 1.1); translate(this.x, this.y); this.spin = this.timer * Math.PI / 180; rotate(this.spin); image(app.images.buzzaw_ultimate_back, -this.diameter * 0.9, -this.diameter * 0.9, this.diameter * 1.8, this.diameter * 1.8); rotate(-this.spin); translate(-this.x, -this.y); image(app.images.buzzaw_ultimate_front, this.x - this.diameter * 0.55, this.y - this.diameter * 0.55, this.diameter * 1.1, this.diameter * 1.1); break; } //testing purposes to show type of enemy // pushStyle(); // textAlign(CENTER, CENTER); // textSize(15); // fill(255); // text(this.type, this.x, this.y); // popStyle(); }; Enemy.prototype.showRange = function() { //draw the range (for testing only) noStroke(); fill(199, 195, 199, 30); ellipse(this.x, this.y, this.range, this.range); }; Enemy.prototype.showHealth = function() { noStroke(); fill(222, 106, 131); rect(this.x - this.diameter * 0.4, this.y + this.diameter * 0.6, this.diameter * 0.8, this.diameter * 0.2); const damage = map(this.health, 0, this.healthBase, 0, this.diameter * 0.8); fill(94, 168, 94); rect(this.x - this.diameter * 0.4, this.y + this.diameter * 0.6, damage, this.diameter * 0.2); }; Enemy.prototype.run = function() { this.update(); this.draw(); this.showHealth(); // this.showRange(); //testing only }; return Enemy; })(); / Main App / const App = (function() { const App = function() { this.scene = "load"; this.images = undefined; this.imageIndex = 0; this.loaded = false; this.selected = false; this.started = false; this.logo = Logo.new({}); this.transition = Transition.new({ color: color(63, 63, 63) }); this.health = 100; this.panels = { top: { x: 0, y: 0, w: width, h: 50 }, bottom: { x: 0, y: height - 100, w: width, h: 100 }, props: { x: 0, y: 0, w: 200, h: 200, tower: undefined, active: false } }; this.enemies = []; this.towers = []; this.cannons = []; this.inventory = []; this.assets = []; this.cannonBullets = []; this.enemyBullets = []; this.ripples = []; this.freezes = []; this.bulletParticles = []; this.smokes = []; this.messages = []; this.cannonProps = [ //basic { name: "Basic", cost: [50, 75, 100], sell: [35, 50, 75], range: [160, 170, 180], damage: [1, 2, 3], delay: [50, 40, 30], strength: [1, 0.95, 0.9], turretLength: 0.7, bullet: { diameter: 5, speed: 5 }, colors: { base: color(247, 84, 111), center: color(59, 59, 59), turret: color(50), bullet: color(0) } }, //shield { name: "Shield", cost: [100, 125, 150], sell: [75, 100, 125], range: [150, 150, 150], damage: [2, 3, 4], delay: [Infinity, Infinity, Infinity], strength: [0.75, 0.65, 0.55], turretLength: 0.0, bullet: { diameter: 5, speed: 5 }, colors: { base: color(247, 84, 111), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(0) } }, //rapid { name: "Rapid", cost: [100, 150, 200], sell: [75, 100, 150], range: [170, 180, 190], damage: [2, 3, 4], delay: [25, 20, 15], strength: [0.95, 0.9, 0.85], turretLength: 0.7, bullet: { diameter: 5, speed: 5 }, colors: { base: color(247, 84, 111), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(0) } }, //sniper { name: "Sniper", cost: [150, 200, 300], sell: [100, 150, 200], range: [275, 300, 325], damage: [4, 5, 6], delay: [70, 60, 50], strength: [0.9, 0.85, 0.8], turretLength: 0.9, bullet: { diameter: 5, speed: 5 }, colors: { base: color(60, 60, 60), center: color(98, 143, 163), turret: color(98, 143, 163), bullet: color(0) } }, //flame { name: "Flame", cost: [250, 350, 450], sell: [200, 250, 350], range: [180, 190, 200], damage: [0.1, 0.2, 0.3], delay: [8, 6, 4], strength: [0.8, 0.7, 0.6], turretLength: 0.7, bullet: { diameter: 12, speed: 3 }, colors: { base: color(207, 67, 90), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(179, 75, 91, 220) } }, //beast { name: "Beast", cost: [250, 350, 450], sell: [200, 250, 350], range: [190, 210, 230], damage: [5, 7, 9], delay: [70, 60, 50], strength: [0.5, 0.4, 0.3], turretLength: 0.8, bullet: { diameter: 15, speed: 5 }, colors: { base: color(147, 84, 11), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(0) } }, //freeze { name: "Freeze", cost: [250, 350, 450], sell: [200, 250, 350], range: [190, 210, 230], damage: [3, 4, 5], delay: [220, 200, 180], strength: [0.7, 0.6, 0.5], radius: [150, 170, 200], turretLength: 0.7, bullet: { diameter: 8, speed: 4 }, colors: { base: color(147, 84, 11), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(98, 169, 199) } }, //octo { name: "Octo", cost: [250, 350, 450], sell: [200, 250, 350], range: [190, 210, 230], damage: [4, 5, 6], delay: [120, 100, 80], strength: [0.6, 0.5, 0.4], turretLength: 0.63, bullet: { diameter: 7, speed: 3 }, colors: { base: color(147, 84, 11), center: color(59, 59, 59), turret: color(204, 71, 80), bullet: color(70) } } ]; this.enemyProps = [ //seed { money: 40, range: 150, damage: 1, delay: 50, health: 100, bullet: { diameter: 5, speed: 5 }, speed: { min: 0.5, max: 0.7 } }, //seedling { money: 50, range: 160, damage: 2, delay: 30, health: 120, bullet: { diameter: 5, speed: 5 }, speed: { min: 0.45, max: 0.6 } }, //sapling { money: 70, range: 180, damage: 3, delay: 70, health: 140, bullet: { diameter: 6, speed: 5 }, speed: { min: 0.4, max: 0.55 } }, //tree { money: 90, range: 200, damage: 4, delay: 70, health: 160, bullet: { diameter: 7, speed: 5 }, speed: { min: 0.4, max: 0.5 } }, //ultimate { money: 110, range: 220, damage: 5, delay: 90, health: 200, bullet: { diameter: 8, speed: 5 }, speed: { min: 0.35, max: 0.5 } } ]; this.towerImages = []; this.blockSize = 40; this.smokes = []; this.money = 0; this.enemyTimer = 0; this.level = 0; this.levels = [ { title: "", money: 4000, bonus: 600, map: [ "-----a----t-a--a-t-----", "----t---t----t-----t-t-", "-a----t---a----t-t--a--", "----t--------t--a--t-t-", "---------a-t-----t-----", "---t---t-----t--a--t-t-", "-----t-----a---t-t--a--", "---------a---t-----t-t-", "-a-t----t--a-----t-----", "------t------t---a-t-t-", "---t-----a-t---t-t---a-", "--a--t--t----a---a-t---" ], waves: [ [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 2, delay: {min: 360, max: 1500}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 2, delay: {min: 360, max: 1800}}, {type: 2, amount: 1, delay: {min: 420, max: 1800}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 360, max: 1800}}, {type: 2, amount: 3, delay: {min: 600, max: 2400}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 360, max: 1800}}, {type: 2, amount: 3, delay: {min: 600, max: 2400}}, {type: 3, amount: 2, delay: {min: 1200, max: 3200}} ], [ {type: 0, amount: 2, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 420, max: 1800}}, {type: 2, amount: 3, delay: {min: 1200, max: 3200}}, {type: 3, amount: 2, delay: {min: 1800, max: 4400}}, {type: 4, amount: 2, delay: {min: 2400, max: 5600}} ], [ {type: 0, amount: 2, delay: {min: 60, max: 300}}, {type: 0, amount: 3, delay: {min: 600, max: 1500}}, {type: 1, amount: 4, delay: {min: 420, max: 1800}}, {type: 2, amount: 4, delay: {min: 1200, max: 3200}}, {type: 3, amount: 3, delay: {min: 1800, max: 4400}}, {type: 4, amount: 3, delay: {min: 2400, max: 5600}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 600}}, {type: 0, amount: 4, delay: {min: 600, max: 1500}}, {type: 1, amount: 5, delay: {min: 420, max: 2500}}, {type: 2, amount: 5, delay: {min: 1200, max: 4000}}, {type: 3, amount: 5, delay: {min: 1800, max: 5000}}, {type: 4, amount: 5, delay: {min: 2400, max: 7000}} ], [ {type: 0, amount: 4, delay: {min: 60, max: 600}}, {type: 0, amount: 4, delay: {min: 600, max: 1500}}, {type: 1, amount: 5, delay: {min: 420, max: 2500}}, {type: 2, amount: 6, delay: {min: 1200, max: 4000}}, {type: 3, amount: 7, delay: {min: 1800, max: 5000}}, {type: 4, amount: 7, delay: {min: 2400, max: 7000}} ] ] }, { title: "", money: 5000, bonus: 700, map: [ "-----a----t-a----t-----", "---t----t----t------t--", "-a----t----t---t----a--", "----t--------t----t--t-", "--t-----t------t-------", "-----t----t--t----t-t--", "--t----t---a----t---a--", "---------a----t--------", "-a--t--t---a----t---t--", "-------------t----t----", "--t---t----t---t-----a-", "--a-t----t---a---t--t--" ], waves: [ [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 2, delay: {min: 360, max: 1500}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 2, delay: {min: 360, max: 1800}}, {type: 2, amount: 1, delay: {min: 420, max: 1800}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 360, max: 1800}}, {type: 2, amount: 3, delay: {min: 600, max: 2400}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 360, max: 1800}}, {type: 2, amount: 3, delay: {min: 600, max: 2400}}, {type: 3, amount: 2, delay: {min: 1200, max: 3200}} ], [ {type: 0, amount: 2, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 420, max: 1800}}, {type: 2, amount: 3, delay: {min: 1200, max: 3200}}, {type: 3, amount: 2, delay: {min: 1800, max: 4400}}, {type: 4, amount: 2, delay: {min: 2400, max: 5600}} ], [ {type: 0, amount: 2, delay: {min: 60, max: 300}}, {type: 0, amount: 2, delay: {min: 600, max: 1500}}, {type: 1, amount: 3, delay: {min: 420, max: 1800}}, {type: 2, amount: 4, delay: {min: 1200, max: 3200}}, {type: 3, amount: 3, delay: {min: 1800, max: 4400}}, {type: 4, amount: 3, delay: {min: 2400, max: 5600}} ], [ {type: 0, amount: 3, delay: {min: 60, max: 600}}, {type: 0, amount: 4, delay: {min: 600, max: 1500}}, {type: 1, amount: 5, delay: {min: 420, max: 2500}}, {type: 2, amount: 5, delay: {min: 1200, max: 4000}}, {type: 3, amount: 5, delay: {min: 1800, max: 5000}}, {type: 4, amount: 5, delay: {min: 2400, max: 7000}} ], [ {type: 0, amount: 4, delay: {min: 60, max: 600}}, {type: 0, amount: 4, delay: {min: 600, max: 1500}}, {type: 1, amount: 5, delay: {min: 420, max: 2500}}, {type: 2, amount: 6, delay: {min: 1200, max: 4000}}, {type: 3, amount: 7, delay: {min: 1800, max: 5000}}, {type: 4, amount: 7, delay: {min: 2400, max: 7000}} ], [ {type: 0, amount: 4, delay: {min: 60, max: 600}}, {type: 0, amount: 4, delay: {min: 600, max: 1500}}, {type: 1, amount: 5, delay: {min: 420, max: 2500}}, {type: 2, amount: 7, delay: {min: 1200, max: 4000}}, {type: 3, amount: 8, delay: {min: 1800, max: 5000}}, {type: 4, amount: 9, delay: {min: 2400, max: 7000}} ] ] } ]; this.wave = 0; this.backImage = undefined; this.startWave = false; this.homeProps = { beast: CannonBeast.new({ x: 700, y: 350, diameter: 80, level: 2, type: 6, angle: -90 }), rapid: CannonRapid.new({ x: 650, y: 520, diameter: 80, level: 2, type: 6, angle: -60 }) }; this.buttons = { home: { how: Button.new({ x: width / 2 - 100, y: 300, w: 200, h: 80, content: "How", action: function() { app.transition.scene = "how"; app.transition.active = true; app.buttons.home.play.enabled = true; } }), play: Button.new({ x: width / 2 - 100, y: 400, w: 200, h: 80, enabled: false, content: "Play", action: function() { app.level = 0; app.wave = 0; app.health = 100; app.startWave = false; app.buttons.play.wave.enabled = true; app.started = true; app.setup(); app.transition.scene = "play"; app.transition.active = true; } }) }, how: { home: Button.new({ x: width / 2 - 80, y: 620, w: 160, h: 60, content: "Home", action: function() { app.transition.scene = "home"; app.transition.active = true; } }), play: Button.new({ x: width / 2 + 100, y: 620, w: 160, h: 60, textSize: 22, content: "Resume Game", action: function() { app.transition.scene = "play"; app.transition.active = true; } }) }, play: { wave: Button.new({ x: width - 105, y: height - 72, content: "Start Wave", action: function() { app.startWave = true; this.enabled = false; } }), how: Button.new({ x: width - 205, y: height - 72, content: "How", action: function() { app.transition.scene = "how"; app.transition.active = true; } }) }, props: { sell: Button.new({ x: 0, y: 0, w: this.panels.props.w, h: this.panels.props.h * 0.2, cannon: undefined, content: "Sell $0", textSize: 16, type: 1, action: function() { app.sellCannon(this.cannon); app.panels.props.tower = undefined; app.panels.props.active = false; } }) }, over: { play: Button.new({ x: width / 2 - 60, y: height * 0.6, w: 120, h: 50, content: "Replay", action: function() { app.level = 0; app.wave = 0; app.health = 100; app.startWave = false; app.buttons.play.wave.enabled = true; app.setup(); app.transition.scene = "play"; app.transition.active = true; } }) }, next: { play: Button.new({ x: width / 2 - 60, y: height * 0.6, w: 120, h: 50, content: "Next", action: function() { app.level++; app.wave = 0; app.health = 100; app.startWave = false; app.buttons.play.wave.enabled = true; app.setup(); app.transition.scene = "play"; app.transition.active = true; } }) }, complete: { play: Button.new({ x: width / 2 - 60, y: height * 0.6, w: 120, h: 50, content: "Replay", action: function() { app.level = 0; app.wave = 0; app.health = 100; app.startWave = false; app.buttons.play.wave.enabled = true; app.setup(); app.scene = "play"; } }), home: Button.new({ x: width / 2 - 60, y: height * 0.6 + 70, w: 120, h: 50, content: "Home", action: function() { app.started = false; app.transition.scene = "home"; app.transition.active = true; } }) } }; this.init(); this.setup(); }; App.prototype = { drawTree: function(x, y, extRadius, rot, sides) { const tau = Math.PI * 2; const interior = extRadius * sin(1/8.5 * tau) / sin(7/20 * tau); let radius; pushMatrix(); translate(x, y); rotate(-tau/rot); beginShape(); for(let theta = 0; theta < tau; theta += tau / (2 * sides)) { radius = (radius === extRadius) ? interior : extRadius; vertex(radius * cos(theta), radius * sin(theta)); } endShape(CLOSE); popMatrix(); }, init: function() { this.images = { back_1: function() { background(0, 0); noStroke(); fill(145, 124, 67); rect(0, 0, width, height); for(let i = 0; i < 100; i++) { const diameter = random(10, 25); fill(94, 77, 53, random(30, 60)); ellipse(random(width), random(height), diameter, diameter); } return get(); }, back_2: function() { background(0, 0); noStroke(); fill(109, 143, 67); rect(0, 0, width, height); for(let i = 0; i < 100; i++) { const diameter = random(10, 25); fill(94, 77, 53, random(30, 60)); ellipse(random(width), random(height), diameter, diameter); } return get(); }, tree1: function() { background(0, 0); noStroke(); fill(37, 74, 37); app.drawTree(300, 300, 100, 4, 7); fill(56, 107, 56); app.drawTree(300, 300, 80, 4.2, 7); fill(70, 125, 70); app.drawTree(300, 300, 55, 5.5, 7); return get(200, 200, 200, 200); }, tree2: function() { background(0, 0); noStroke(); fill(74, 59, 37); app.drawTree(300, 300, 100, 4, 7); fill(105, 91, 57); app.drawTree(300, 300, 80, 4.2, 7); fill(125, 115, 70); app.drawTree(300, 300, 55, 5.5, 7); return get(200, 200, 200, 200); }, tower: function() { background(0, 0); noStroke(); fill(69, 68, 69); rect(100, 100, 80, 80, 5); fill(89, 88, 89); rect(110, 110, 60, 60, 5); fill(110, 108, 110); rect(120, 120, 40, 40, 5); for(var i = 0; i < 50; i++) { var diameter = random(5, 10); fill(255, random(15, 30)); ellipse(random(100, 180), random(100, 180), diameter, diameter); } const bitSize = 80 * 0.25; for(var x = 0; x < 4; x++) { for(var y = 0; y < 4; y++) { app.towerImages.push(get(100 + x * bitSize, 100 + y * bitSize, bitSize, bitSize)); } } return get(100, 100, 80, 80); }, tower_base: function() { background(0, 0); noStroke(); fill(54, 53, 54, 60); rect(100, 100, 80, 80, 5); fill(69, 68, 69, 60); rect(110, 110, 60, 60, 5); fill(84, 83, 84, 60); rect(120, 120, 40, 40, 5); for(var i = 0; i < 50; i++) { var diameter = random(5, 10); fill(205, random(10, 20)); ellipse(random(100, 180), random(100, 180), diameter, diameter); } return get(100, 100, 80, 80); }, cannon_basic_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); ellipse(200, 200, 80, 80); noStroke(); fill(74, 74, 74); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_basic_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); // rect(165, 165, 70, 70); ellipse(200, 200, 80, 80); noStroke(); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_basic_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); ellipse(200, 200, 80, 80); noStroke(); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); arc(200, 200, 75, 75, 70Math.PI/180, 110Math.PI/180); stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_shield_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); ellipse(200, 200, 80, 80); stroke(36, 36, 36, 150); for(var i = 0; i < 360; i+= 30) { var angle = i * Math.PI / 180; line(200 + cos(angle) * 31, 200 + sin(angle) * 31, 200 - cos(angle) * 30, 200 - sin(angle) * 31); } stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_shield_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); ellipse(200, 200, 80, 80); stroke(36, 36, 36, 150); for(var i = 0; i < 360; i+= 30) { var angle = i * Math.PI / 180; line(200 + cos(angle) * 35, 200 + sin(angle) * 35, 200 - cos(angle) * 30, 200 - sin(angle) * 31); } stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); arc(200, 200, 65, 65, 30Math.PI/120, 140Math.PI/180); return get(157, 157, 86, 86); }, cannon_shield_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(95, 95, 95); ellipse(200, 200, 80, 80); stroke(36, 36, 36, 150); for(var i = 0; i < 360; i+= 30) { var angle = i * Math.PI / 180; line(200 + cos(angle) * 35, 200 + sin(angle) * 35, 200 - cos(angle) * 30, 200 - sin(angle) * 31); } stroke(36, 36, 36, 100); fill(95, 95, 95); ellipse(200, 200, 50, 50); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); arc(200, 200, 65, 65, 30Math.PI/120, 140Math.PI/180); return get(157, 157, 86, 86); }, cannon_rapid_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(54, 92, 60); ellipse(200, 200, 80, 80); noStroke(); fill(179, 177, 177); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(34, 66, 39); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_rapid_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(54, 92, 60); ellipse(200, 200, 80, 80); noStroke(); fill(179, 177, 177); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(34, 66, 39); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_rapid_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(54, 92, 60); ellipse(200, 200, 80, 80); noStroke(); fill(179, 177, 177); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(34, 66, 39); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_rapid_0_center: function() { background(0, 0); strokeWeight(3); stroke(36, 36, 36, 100); fill(53, 110, 69); rect(210, 220, 60, 50, 10); fill(75, 130, 90); rect(215, 225, 50, 40, 5); return get(197, 197, 86, 86); }, cannon_rapid_1_center: function() { background(0, 0); strokeWeight(3); stroke(36, 36, 36, 100); fill(53, 110, 69); rect(210, 220, 60, 50, 10); fill(75, 130, 90); rect(215, 225, 50, 40, 5); return get(197, 197, 86, 86); }, cannon_rapid_2_center: function() { background(0, 0); strokeWeight(3); stroke(36, 36, 36, 100); fill(53, 110, 69); rect(210, 220, 60, 50, 10); fill(48, 47, 48); rect(215, 225, 50, 40, 5); return get(197, 197, 86, 86); }, cannon_sniper_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(100, 141, 158); ellipse(200, 200, 80, 80); stroke(36, 36, 36, 100); fill(57, 85, 102); ellipse(200, 200, 50, 50); noFill(); stroke(191, 189, 191); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_sniper_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(100, 141, 158); ellipse(200, 200, 80, 80); noStroke(); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(57, 85, 102); ellipse(200, 200, 50, 50); noFill(); stroke(191, 189, 191); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_sniper_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(100, 141, 158); ellipse(200, 200, 80, 80); noStroke(); fill(48, 47, 48); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); arc(200, 200, 75, 75, 70Math.PI/180, 110Math.PI/180); stroke(36, 36, 36, 100); fill(57, 85, 102); ellipse(200, 200, 50, 50); noFill(); stroke(191, 189, 191); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_flame_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(179, 75, 91); ellipse(200, 200, 80, 80); noStroke(); fill(184, 114, 127); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(125, 55, 62); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_flame_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(179, 75, 91); ellipse(200, 200, 80, 80); noStroke(); fill(242, 61, 91); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); stroke(36, 36, 36, 100); fill(125, 55, 62); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_flame_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(179, 75, 91); ellipse(200, 200, 80, 80); noStroke(); fill(242, 61, 91); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); arc(200, 200, 75, 75, 50Math.PI/180, 130Math.PI/180); stroke(36, 36, 36, 100); fill(125, 55, 62); ellipse(200, 200, 50, 50); noFill(); stroke(69, 69, 69, 100); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); return get(157, 157, 86, 86); }, cannon_beast_0: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(38, 38, 38); ellipse(200, 200, 80, 80); noStroke(); fill(166, 49, 73); arc(200, 200, 75, 75, -20Math.PI/180, 200Math.PI/180); stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(200, 200, 50, 50); noFill(); stroke(161, 161, 161, 150); arc(200, 200, 65, 65, 40Math.PI/180, 140Math.PI/180); return get(157, 157, 86, 86); }, cannon_beast_1: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(38, 38, 38); ellipse(200, 200, 80, 80); noStroke(); fill(166, 49, 73); arc(200, 200, 75, 75, 20Math.PI/160, 160Math.PI/180); stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(200, 200, 50, 50); noFill(); stroke(161, 161, 161, 150); arc(200, 200, 65, 65, 40Math.PI/180, 140Math.PI/180); return get(157, 157, 86, 86); }, cannon_beast_2: function() { background(0, 0); stroke(20, 200); strokeWeight(3); fill(38, 38, 38); ellipse(200, 200, 80, 80); noStroke(); fill(166, 49, 73); arc(200, 200, 75, 75, 60Math.PI/180, 120Math.PI/180); stroke(191, 80, 97, 150); fill(59, 58, 58); ellipse(200, 200, 50, 50); noFill(); strokeWeight(5); stroke(38, 38, 38, 150); arc(200, 200, 65, 65, 40Math.PI/180, 140Math.PI/180); return get(157, 157, 86, 86); }, cannon_freeze_0: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(119, 181, 181); ellipse(200, 200, 80, 80); noStroke(); fill(49, 108, 166); for(var i = 0; i < 360; i+= 60) { arc(200, 200, 75, 75, iMath.PI/180, (i+55)Math.PI/180); } stroke(48, 47, 48, 150); fill(119, 181, 181); ellipse(200, 200, 50, 50); return get(157, 157, 86, 86); }, cannon_freeze_1: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(119, 181, 181); ellipse(200, 200, 80, 80); noStroke(); for(var i = 0; i < 360; i+= 60) { if(i % 120 === 0) { fill(49, 108, 166); } else { fill(43, 72, 112); } arc(200, 200, 75, 75, iMath.PI/180, (i+55)Math.PI/180); } stroke(48, 47, 48, 150); fill(119, 181, 181); ellipse(200, 200, 50, 50); noFill(); stroke(50, 150); arc(200, 200, 65, 65, 115Math.PI/180, 235Math.PI/180); arc(200, 200, 65, 65, 305Math.PI/180, 425Math.PI/180); return get(157, 157, 86, 86); }, cannon_freeze_2: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(119, 181, 181); ellipse(200, 200, 80, 80); noStroke(); for(var i = 0; i < 360; i+= 60) { if(i % 120 === 0) { fill(49, 108, 166); } else { fill(43, 72, 112); } arc(200, 200, 75, 75, iMath.PI/180, (i+55)Math.PI/180); } stroke(48, 47, 48, 150); fill(119, 181, 181); ellipse(200, 200, 50, 50); noFill(); stroke(50, 150); arc(200, 200, 65, 65, 115Math.PI/180, 235Math.PI/180); arc(200, 200, 65, 65, 305Math.PI/180, 425Math.PI/180); return get(157, 157, 86, 86); }, cannon_poison_0: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(131, 72, 156); ellipse(200, 200, 80, 80); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); stroke(48, 47, 48, 150); fill(161, 118, 179); ellipse(200, 200, 50, 50); return get(157, 157, 86, 86); }, cannon_poison_1: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(131, 72, 156); ellipse(200, 200, 80, 80); noStroke(); fill(156, 154, 156); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); stroke(48, 47, 48, 150); fill(161, 118, 179); ellipse(200, 200, 50, 50); return get(157, 157, 86, 86); }, cannon_poison_2: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(131, 72, 156); ellipse(200, 200, 80, 80); noStroke(); fill(93, 38, 117); arc(200, 200, 75, 75, -20Math.PI/180, 20Math.PI/180); arc(200, 200, 75, 75, 160Math.PI/180, 200Math.PI/180); arc(200, 200, 75, 75, 70Math.PI/180, 110Math.PI/180); noFill(); stroke(150, 150, 150); arc(200, 200, 65, 65, 220Math.PI/180, 320Math.PI/180); stroke(48, 47, 48, 150); fill(161, 118, 179); ellipse(200, 200, 50, 50); return get(157, 157, 86, 86); }, cannon_octo_0: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(165, 164, 166); ellipse(200, 200, 75, 75); stroke(48, 47, 48, 150); fill(80, 80, 80); ellipse(200, 200, 55, 55); return get(157, 157, 86, 86); }, cannon_octo_1: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(165, 164, 166); ellipse(200, 200, 75, 75); stroke(48, 47, 48, 150); fill(80, 80, 80); ellipse(200, 200, 55, 55); return get(157, 157, 86, 86); }, cannon_octo_2: function() { background(0, 0); stroke(48, 47, 48, 150); strokeWeight(3); fill(179, 75, 91); ellipse(200, 200, 75, 75); stroke(48, 47, 48, 150); fill(80, 80, 80); ellipse(200, 200, 55, 55); return get(157, 157, 86, 86); }, buzzaw_seed: function() { background(0, 0); pushMatrix(); translate(397, 0); scale(-1, 1); //body noStroke(); fill(0, 0, 0); ellipse(200,209,66,65); fill(46, 46, 45); ellipse(196,206,62,60); beginShape(); vertex(189, 184); vertex(181, 182); vertex(189, 172); vertex(194, 162); vertex(200, 172); vertex(207, 178); endShape(CLOSE); //eyes for(var i = 0; i < 10; i+=3){ fill(245, 82, 73, 60); ellipse(205,218,5+i,5+i); ellipse(184,221,5+i,5+i); } fill(245, 82, 73); ellipse(205,218,5,5); ellipse(184,221,5,5); fill(255, 255, 255); ellipse(205.5,217.5,1.5,1.5); ellipse(184.5,220.5,1.5,1.5); popMatrix(); return get(157, 161, 82, 82); }, buzzaw_seedling: function() { background(0, 0); pushMatrix(); translate(400, 0); scale(-1.5, 1.5); noStroke(); //feet pushMatrix(); translate(205,252); rotate(-35); fill(46, 46, 45); ellipse(0,0,16,9); popMatrix(); pushMatrix(); translate(180,257); rotate(5); fill(46, 46, 45); ellipse(0,0,15,9); popMatrix(); //body fill(0, 0, 0); ellipse(190,235,46,45); fill(46, 46, 45); ellipse(188,233,42,40); //red on feet pushMatrix(); translate(205,252); rotate(-35); fill(46, 46, 45); ellipse(0,0,15,9); fill(89, 3, 3); ellipse(-1,1,12,8); popMatrix(); pushMatrix(); translate(180,257); rotate(5); fill(46, 46, 45); ellipse(0,0,16,9); fill(89, 3, 3); ellipse(-1,1,15,6); popMatrix(); //tail fill(112, 15, 4); beginShape(); curveVertex(189, 194); curveVertex(188, 183); curveVertex(194, 175); curveVertex(196, 167); curveVertex(200, 163); curveVertex(204, 160); curveVertex(210, 155); curveVertex(210, 153); curveVertex(219, 146); curveVertex(229, 139); curveVertex(222, 153); curveVertex(221, 165); curveVertex(220, 180); curveVertex(216, 191); curveVertex(204, 201); curveVertex(193, 209); endShape(CLOSE); fill(145, 3, 3); pushMatrix(); translate(-25,20); scale(0.75,0.9); beginShape(); curveVertex(311, 195); curveVertex(298, 199); curveVertex(291, 192); curveVertex(293, 171); curveVertex(304, 162); curveVertex(311, 157); curveVertex(318, 156); curveVertex(322, 164); curveVertex(323, 176); curveVertex(320, 187); endShape(CLOSE); popMatrix(); fill(46, 45, 45); beginShape(); curveVertex(190, 208); curveVertex(194, 221); curveVertex(182, 221); curveVertex(186, 212); curveVertex(183, 203); curveVertex(180, 188); curveVertex(184, 173); curveVertex(196, 158); curveVertex(210, 147); curveVertex(227, 140); curveVertex(220, 147); curveVertex(216, 153); curveVertex(209, 160); curveVertex(203, 168); curveVertex(196, 181); curveVertex(192, 190); endShape(CLOSE); //eyes for(var i = 0; i < 10; i+=3){ fill(245, 82, 73, 40); ellipse(195,240,5+i,5+i); ellipse(180,243,5+i,5+i); } fill(245, 82, 73); ellipse(195,240,5,5); ellipse(180,243,5,5); fill(255); ellipse(195.5,239.5,1.7,1.7); ellipse(180.3,242.5,1.7,1.7); popMatrix(); return get(54, 202, 100, 200); }, buzzaw_sapling_front: function() { background(0, 0); pushMatrix(); translate(521, -197); scale(-1.7, 1.7); //body noStroke(); fill(0, 0, 0); ellipse(190,235,46,45); fill(46, 46, 45); ellipse(188,233,42,40); //eyes for(var i = 0; i < 10; i+=3){ fill(245, 82, 73,40); ellipse(195,240,5+i,5+i); ellipse(180,243,5+i,5+i); } fill(245, 82, 73); ellipse(195,240,5,5); ellipse(180,243,5,5); fill(255); ellipse(195.5,239.5,1.7,1.7); ellipse(180.3,242.5,1.7,1.7); popMatrix(); return get(157, 161, 82, 82); }, buzzaw_sapling_back: function() { background(0, 0); pushMatrix(); translate(200, 198); scale(1.7); noStroke(); fill(0, 0, 0); for(var i = 0; i < 360; i+= 45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25, 10); } fill(46, 46, 45); scale(0.9); rotate(20); for(var i = 0; i < 360; i+= 45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25, 10); } popMatrix(); return get(153, 152, 92, 92); }, buzzaw_tree_front: function() { background(0, 0); pushMatrix(); translate(-124, -198); scale(1.70); //body noStroke(); fill(0, 0, 0); ellipse(190,235,46,45); fill(46, 46, 45); ellipse(188,233,42,40); //eyes fill(245, 82, 73,20); for(var i = 0; i < 20; i+= 3){ ellipse(203, 239, 5 + i, 5 + i); ellipse(188, 239, 5 + i, 5 + i); } fill(245, 82, 73); noStroke(); arc(188, 239, 7, 10, 30 * Math.PI/180, 210 * Math.PI/180); arc(203, 239, 7, 10, -30 * Math.PI/180, 150 * Math.PI/180); fill(255,255,255); ellipse(189, 242, 1.5, 1.5); ellipse(202, 242, 1.5, 1.5); popMatrix(); return get(157, 161, 82, 82); }, buzzaw_tree_back: function() { background(0, 0); pushMatrix(); translate(199, 201); scale(2.4); //outer spikes noStroke(); fill(0, 0, 0); for(var i = 0; i < 360; i+=45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25,10); } //inner spikes fill(194, 24, 24); scale(0.8); rotate(20Math.PI/180); for(var i = 0; i < 360; i+=45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25,10); } popMatrix(); return get(134, 137, 128, 128); }, buzzaw_tree_tail: function() { background(0, 0); pushMatrix(); translate(0, -100); scale(1.70); scale(-0.5, 0.5); translate(-620, 240); noStroke(); fill(0); beginShape(); curveVertex(293, 223); curveVertex(284, 230); curveVertex(264, 235); curveVertex(252, 238); curveVertex(250, 233); curveVertex(246, 224); curveVertex(263, 224); curveVertex(272, 222); curveVertex(283, 216); curveVertex(299, 203); curveVertex(324, 167); curveVertex(319, 161); curveVertex(338, 147); curveVertex(337, 169); curveVertex(329, 168); curveVertex(306, 209); endShape(CLOSE); popMatrix(); return get(235, 225, 85, 85); }, buzzaw_ultimate_front: function() { background(0, 0); pushMatrix(); translate(-124, -197); scale(1.7); //body fill(0, 0, 0); ellipse(190,235,46,45); fill(46, 46, 45); ellipse(188,233,42,40); //eyes fill(245, 82, 73,20); for(var i = 0; i < 20; i+=3){ ellipse(202,239,5+i,5+i); ellipse(187,239,5+i,5+i); } fill(245, 82, 73); noStroke(); arc(187,239, 10, 12,30Math.PI/180,210Math.PI/180); arc(202,239, 10, 12,-30Math.PI/180,150Math.PI/180); fill(255,255,255); ellipse(188,242, 1.5, 1.5); ellipse(201,242, 1.5, 1.5); popMatrix(); return get(157, 161, 82, 82); }, buzzaw_ultimate_back: function() { background(0, 0); pushMatrix(); translate(199, 202); scale(2.6); noStroke(); fill(0, 0, 0); for(var i = 0; i < 360; i+=45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25,10); } fill(194, 24, 24); scale(0.8); rotate(20Math.PI/180); for(var i = 0; i < 360; i+=45){ rotate(iMath.PI/180); quad(25, 12, -10, 0, 20, 0,25,10); } popMatrix(); return get(129, 132, 138, 138); }, buzzaw_ultimate_tail: function() { background(0, 0); //tail pushMatrix(); translate(75, 73); scale(1.6); scale(-0.5, 0.5); translate(-550, 49); noStroke(); fill(20); beginShape(); curveVertex(319, 178); curveVertex(314, 196); curveVertex(264, 235); curveVertex(252, 238); curveVertex(250, 233); curveVertex(246, 224); curveVertex(263, 224); curveVertex(272, 222); curveVertex(302, 187); curveVertex(288, 178); curveVertex(324, 167); curveVertex(319, 161); curveVertex(347, 152); curveVertex(340, 176); curveVertex(333, 172); curveVertex(324, 207); endShape(CLOSE); popMatrix(); return get(235, 225, 85, 85); } }; }, load: function (s) { const obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(61, 61, 61); pushStyle(); fill(255, 240); textAlign(CENTER, CENTER); textSize(40); text(map(this.imageIndex / obj.length, 0, 1, 0, 100).toFixed(0) + "%", width / 2, height / 2); noFill(); stroke(50, 200); strokeWeight(35); ellipse(width / 2, height / 2, 300, 300); strokeCap(SQUARE); stroke(183, 83, 83, 150); arc(width / 2, height / 2, 300, 300, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360) * Math.PI/180); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { this.loaded = true; this.setup(); this.scene = s; } }, setup: function() { this.towers.length = 0; this.cannons.length = 0; this.enemies.length = 0; this.inventory.length = 0; this.cannonBullets.length = 0; this.enemyBullets.length = 0; this.assets.length = 0; this.ripples.length = 0; this.smokes.length = 0; this.freezes.length = 0; this.bulletParticles.length = 0; this.smokes.length = 0; //place towers based on map const currentLevel = this.levels[this.level]; for(let y = 0; y < currentLevel.map.length; y++) { for(let x = 0; x < currentLevel.map[y].length; x++) { const item = currentLevel.map[y][x]; switch(item) { case "t": this.towers.push(Tower.new({ x: x * this.blockSize, y: y * this.blockSize + this.panels.top.h + this.blockSize * 0.7, w: this.blockSize, h: this.blockSize, health: 100 })); break; case "a": var diameter = random(this.blockSize, this.blockSize * 1.5); this.assets.push({ x: x * this.blockSize, y: y * this.blockSize + this.panels.top.h + this.blockSize * 0.7, w: diameter, h: diameter, diameter: diameter, type: random(2) \| 0 }); break; } } } //add inital money this.money = currentLevel.money; //add cannons to the inventory ready for placement based on current money allocated this.updateInventory(); this.setBack(); //set initial enemies from first wave this.setWave(); }, setBack: function() { switch(this.level) { case 0: this.backImage = this.images.back_1; break; case 1: this.backImage = this.images.back_2; break; case 2: break; } }, addInventoryItem: function(inventoryType) { switch(inventoryType) { case 0: this.inventory.unshift(Cannon.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 1: this.inventory.unshift(CannonShield.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 2: this.inventory.unshift(CannonRapid.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 3: this.inventory.unshift(CannonSniper.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 4: this.inventory.unshift(CannonFlame.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 5: this.inventory.unshift(CannonBeast.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; case 6: this.inventory.unshift(CannonFreeze.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet, radius: this.cannonProps[inventoryType].radius[0] })); break; case 7: this.inventory.unshift(CannonOcto.new({ x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, base: { x: this.panels.bottom.x + this.panels.bottom.w * 0.05 + inventoryType * 85, y: this.panels.bottom.y + this.panels.bottom.h * 0.50, }, diameter: 40, selected: false, type: inventoryType, placed: false, angle: -90, name: this.cannonProps[inventoryType].name, colors: this.cannonProps[inventoryType].colors, cost: this.cannonProps[inventoryType].cost[0], sell: this.cannonProps[inventoryType].sell[0], range: this.cannonProps[inventoryType].range[0], damage: this.cannonProps[inventoryType].damage[0], delay: this.cannonProps[inventoryType].delay[0], strength: this.cannonProps[inventoryType].strength[0], turretLength: this.cannonProps[inventoryType].turretLength, bullet: this.cannonProps[inventoryType].bullet })); break; } }, updateInventory: function(update) { if(update) { const items = Array(this.cannonProps.length).fill(0); for(let i = 0; i < this.inventory.length; i++) { items[this.inventory[i].type]+= 1; } for(let i = 0; i < this.cannonProps.length; i++) { const cannonProp = this.cannonProps[i]; for(let j = (cannonProp.cost[0] * items[i]); j <= this.money - cannonProp.cost[0]; j+= cannonProp.cost[0]) { this.addInventoryItem(i); } } } else { this.inventory.length = 0; for(let i = 0; i < this.cannonProps.length; i++) { const cannonProp = this.cannonProps[i]; for(let j = cannonProp.cost[0]; j <= this.money; j+= cannonProp.cost[0]) { this.addInventoryItem(i); } } } }, setWave: function() { this.enemyTimer = 0; this.enemies.length = 0; const currentLevel = this.levels[this.level]; const currentWave = currentLevel.waves[this.wave]; for(let i = 0; i < currentWave.length; i++) { const item = currentWave[i]; for(let j = 0; j < item.amount; j++) { const props = this.enemyProps[item.type]; this.enemies.push(Enemy.new({ x: random(-150, -100), y: random(this.panels.top.h + 80, this.panels.bottom.y - 80), type: item.type, money: props.money, damage: props.damage, range: props.range, delay: props.delay, health: props.health, speed: random(props.speed.min, props.speed.max), start: random(item.delay.min, item.delay.max), bullet: props.bullet })); } } }, runMessages: function() { pushStyle(); textAlign(CENTER, TOP); textSize(50); for(let i = this.messages.length - 1; i >= 0; i--) { const message = this.messages[i]; fill(255, message.opacity); text(message.content, message.x, message.y); message.opacity+= 1 * message.dir; if(message.opacity >= 170) { message.dir = -1; } else if(message.opacity === 0) { this.messages.splice(i, 1); } } popStyle(); }, rectRect: function(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; }, circCirc: function(a, b) { return this.checkDistance(a.x, a.y, b.x, b.y, (a.diameter + b.diameter) / 2); }, rectCirc: function(a, b) { var closestX = constrain(b.x, a.x, a.x + a.w); var closestY = constrain(b.y, a.y, a.y + a.h); return dist(b.x, b.y, closestX, closestY) <= b.diameter / 2; }, checkDistance: function(x1, y1, x2, y2, distance) { var dx = x1 - x2; var dy = y1 - y2; if (dx * dx + dy * dy < distance * distance) { return true; } return false; }, showProperties: function() { pushStyle(); noStroke(); fill(255, 200); rect(this.panels.props.x, this.panels.props.y, this.panels.props.w, this.panels.props.h); fill(55, 150); rect(this.panels.props.x, this.panels.props.y, this.panels.props.w, this.panels.props.h * 0.2); textAlign(LEFT, CENTER); fill(255); textSize(17); text(this.panels.props.tower.cannon.name, this.panels.props.x + this.panels.props.w * 0.1, this.panels.props.y + this.panels.props.h * 0.1); textAlign(LEFT, TOP); textSize(14); fill(0); text("Level: " + (this.panels.props.tower.cannon.level + 1) + "\nHealth: " + (this.panels.props.tower.cannon.health).toFixed(0) + "%\nRange: " + this.panels.props.tower.cannon.range + "\nDamage: " + this.panels.props.tower.cannon.damage + "\nDelay: " + this.panels.props.tower.cannon.delay + "\nDurability: " + ((1 - this.panels.props.tower.cannon.strength) * 100).toFixed(0) + "%", this.panels.props.x + this.panels.props.w * 0.1, this.panels.props.y + this.panels.props.h * 0.23); this.buttons.props.sell.draw(); popStyle(); }, sellCannon: function(cannon) { this.money+= (cannon.sell * (cannon.health / 100) \| 0); cannon.tower.cannon = null; this.cannons.splice(this.cannons.indexOf(cannon), 1); this.updateInventory(); }, addRipple: function(x, y, diameter, clr) { this.ripples.push({ x: x, y: y, diameter: diameter, opacity: 0, color: clr, dir: 1 }); }, runRipples: function() { pushStyle(); noFill(); strokeWeight(3); for(let i = this.ripples.length - 1; i >= 0; i--) { const ripple = this.ripples[i]; stroke(ripple.color, ripple.opacity); ellipse(ripple.x, ripple.y, ripple.diameter, ripple.diameter); ripple.diameter= 1.01; ripple.opacity = constrain(ripple.opacity + 1.5 ripple.dir, 0, 80); if(ripple.opacity === 80) { ripple.dir = -1; } if(ripple.opacity === 0) { this.ripples.splice(i, 1); } } popStyle(); }, runFreezes: function() { noStroke(); for(let i = this.freezes.length - 1; i >= 0; i--) { const freeze = this.freezes[i]; noStroke(); fill(freeze.color, freeze.opacity); ellipse(freeze.x, freeze.y, freeze.diameter, freeze.diameter); noFill(); strokeWeight(3); stroke(200, freeze.opacity); const diameter = map(freeze.opacity, 100, 0, 20, freeze.diameter); ellipse(freeze.x, freeze.y, diameter, diameter); freeze.diameter = constrain(freeze.diameter + 2.5, 0, freeze.maxDiameter); freeze.opacity = constrain(freeze.opacity - 0.80, 0, 255); if(freeze.opacity === 0) { this.freezes.splice(i, 1); } } }, drawPanels: function() { //draw panel areas noStroke(); fill(83, 83, 83); rect(this.panels.top.x, this.panels.top.y, this.panels.top.w, this.panels.top.h); rect(this.panels.bottom.x, this.panels.bottom.y, this.panels.bottom.w, this.panels.bottom.h); //draw cannon placeholders and cannon costs pushStyle(); textAlign(CENTER, TOP); textSize(14); noStroke(); for(let i = 0; i < 8; i++) { fill(69, 68, 69); ellipse(this.panels.bottom.x + this.panels.bottom.w * 0.05 + i * 85, this.panels.bottom.y + this.panels.bottom.h * 0.55, 40, 40); fill(255, 180); text(this.cannonProps[i].name, this.panels.bottom.x + this.panels.bottom.w * 0.05 + i * 85, this.panels.bottom.y + this.panels.bottom.h * 0.05); text("$" + this.cannonProps[i].cost[0], this.panels.bottom.x + this.panels.bottom.w * 0.05 + i * 85, this.panels.bottom.y + this.panels.bottom.h * 0.78); } if(this.scene === "play") { //display level, health and total money textAlign(RIGHT, CENTER); textSize(20); fill(255, 180); text("$" + this.money, width - 10, this.panels.top.h / 2); textAlign(CENTER, CENTER); text("❤ " +this.health + "%", width/2, this.panels.top.h / 2); textAlign(LEFT, CENTER); text("Level: " + (this.level+1), 10, this.panels.top.h / 2); } popStyle(); }, runTowers: function() { for(let i = this.towers.length - 1; i >= 0; i--) { const tower = this.towers[i]; tower.run(); // if(tower.bits.length === 0) { // this.towers.splice(i, 1); // } } }, runEnemies: function() { this.runRipples(); if(this.startWave) { this.enemyTimer++; //run the cannon bullets noStroke(); for(let i = this.enemyBullets.length - 1; i >= 0; i--) { //get the current bullet const bullet = this.enemyBullets[i]; //color of the bullet fill(bullet.color); //move the bullet in the direction it should move bullet.x+= bullet.vx; bullet.y+= bullet.vy; //draw the bullet ellipse(bullet.x, bullet.y, bullet.diameter, bullet.diameter); //check if the bullet went off the screen and remove it if it did if( bullet.x + bullet.diameter < 0 \|\| bullet.x > width \|\| bullet.y + bullet.diameter < 0 \|\| bullet.y > height) { this.enemyBullets.splice(i, 1); continue; } let hit = false; for(let j = this.towers.length - 1; j >= 0; j--) { const tower = this.towers[j]; if(tower.active && this.rectCirc(tower, bullet)) { if(tower.cannon) { tower.cannon.health-= bullet.damage * this.cannonProps[tower.cannon.type].strength[tower.cannon.level]; hit = true; if(tower.cannon.health <= 0) { //check if properties window showing for current cannon if(this.panels.props.tower === tower) { this.panels.props.tower = undefined; this.panels.props.active = false; } this.cannons.splice(this.cannons.indexOf(tower.cannon), 1); tower.cannon = null; } } else { //check for closest bit on the tower for(let k = tower.bits.length - 1; k >= 0; k--) { const bit = tower.bits[k]; if(this.rectCirc(bit, bullet)) { bit.health-= bullet.damage; hit = true; if(bit.health <= 0) { //remove bit tower.bits.splice(k, 1); //if no more bits then set tower inactive if(tower.bits.length === 0) { tower.active = false; } } break; } } } break; } } //remove the bullet if it hit the cannon or a bit of the tower if(hit) { this.enemyBullets.splice(i, 1); } } //find the closest tower within range for(let i = this.enemies.length - 1; i >= 0; i--) { const enemy = this.enemies[i]; if(enemy.start < this.enemyTimer) { enemy.canFire = false; enemy.closest = null; let closestDistance = Infinity; //find the closest tower for(let j = 0; j < this.towers.length; j++) { const tower = this.towers[j]; const distance = dist(tower.x + tower.diameter / 2, tower.y + tower.diameter / 2, enemy.x, enemy.y); if(distance < (tower.diameter + enemy.range) / 2 && distance < closestDistance) { closestDistance = distance; enemy.closest = tower; } } //if tower found then find closest bit within the tower this.closestBit = null; closestDistance = Infinity; if(enemy.closest) { for(let j = 0; j < enemy.closest.bits.length; j++) { const bit = enemy.closest.bits[j]; const distance = dist(bit.x + bit.diameter / 2, bit.y + bit.diameter / 2, enemy.x, enemy.y); if(distance < (bit.diameter + enemy.range) / 2 && distance < closestDistance) { closestDistance = distance; this.closestBit = bit; } } if(this.closestBit) { enemy.target.x = this.closestBit.x + this.closestBit.diameter / 2; enemy.target.y = this.closestBit.y + this.closestBit.diameter / 2; enemy.canFire = true; enemy.vx = 0; } } if(!this.closestBit) { //if no target in range then keep moving forwards enemy.vx = enemy.speed; } //move around the trees, etc. for(let j = 0; j < this.assets.length; j++) { const obstacle = this.assets[j]; if(this.checkDistance(enemy.x, enemy.y, obstacle.x + obstacle.w / 2, obstacle.y + obstacle.h / 2, (enemy.diameter + obstacle.diameter) / 2)) { const d = dist(enemy.x, enemy.y, obstacle.x + obstacle.w / 2, obstacle.y + obstacle.h / 2); const angle = degrees(atan2(enemy.y - (obstacle.y + obstacle.h / 2), enemy.x - (obstacle.x + obstacle.w / 2))); const vel = ((enemy.diameter + obstacle.diameter) / 2) - d; enemy.x += cos(angleMath.PI/180) vel; enemy.y += sin(angleMath.PI/180) vel; //break out of the loop so enemies don't get stuck between trees break; } } enemy.run(); if(!enemy.infiltrated && enemy.x > width + enemy.diameter) { enemy.infiltrated = true; this.enemies.splice(i, 1); this.health = constrain(this.health - 10, 0, 100); } } } //shoot bullets for(let i = 0; i < this.enemies.length; i++) { const enemy = this.enemies[i]; enemy.state = 0; for(let j = 0; j < this.freezes.length; j++) { if(this.circCirc(enemy, this.freezes[j])) { enemy.state = 1; break; } } if(enemy.state === 0 && !enemy.fired && enemy.canFire) { enemy.fired = true; const vx = cos((enemy.angle - 90)Math.PI/180); const vy = sin((enemy.angle - 90)Math.PI/180); this.enemyBullets.push({ x: enemy.x, y: enemy.y, diameter: enemy.bullet.diameter, vx: vx * enemy.bullet.speed, vy: vy * enemy.bullet.speed, color: color(55), damage: enemy.damage }); } if(enemy.fired) { enemy.delayValue++; if(enemy.delayValue === enemy.delay) { enemy.delayValue = 0; enemy.fired = false; } } } } }, runBulletParticles: function() { noStroke(); for(let i = this.bulletParticles.length - 1; i >= 0; i--) { let particle = this.bulletParticles[i]; fill(particle.color, particle.opacity); ellipse(particle.x, particle.y, particle.diameter, particle.diameter); particle.x+= particle.vx; particle.y+= particle.vy; particle.opacity = constrain(particle.opacity - 2, 0, 255); if(particle.opacity === 0) { this.bulletParticles.splice(i, 1); } } }, addBulletParticles: function(bullet, amount) { for(let i = 0; i < amount; i++) { this.bulletParticles.push({ x: bullet.x, y: bullet.y, diameter: bullet.diameter * 0.4, vx: random(-0.5, 0.5), vy: random(-0.5, 0.5), color: bullet.color, opacity: random(220, 250) }); } }, upgradeCannon: function(cannon) { cannon.range = this.cannonProps[cannon.type].range[cannon.level]; cannon.damage = this.cannonProps[cannon.type].damage[cannon.level]; cannon.delay = this.cannonProps[cannon.type].delay[cannon.level]; cannon.strength = this.cannonProps[cannon.type].strength[cannon.level]; cannon.cost = this.cannonProps[cannon.type].cost[cannon.level]; cannon.sell = this.cannonProps[cannon.type].sell[cannon.level]; cannon.delayValue = 0; cannon.fired = false; cannon.canFire = false; if(cannon.type === 6) { //freeze cannon.radius = this.cannonProps[cannon.type].radius[cannon.level]; } }, runCannons: function() { //move cannon already on tower if(pressed && !this.selected) { if(mouseButton === LEFT) { for(let i = this.cannons.length - 1; i >= 0; i--) { const cannon = this.cannons[i]; if(this.checkDistance(mouseX, mouseY, cannon.x, cannon.y, cannon.diameter / 2)) { cannon.selected = true; this.selected = true; cannon.base.x = cannon.x; cannon.base.y = cannon.y; const item = this.cannons.splice(i, 1); this.cannons.push(item[0]); break; } } } else { //mouseButton is RIGHT let tower = undefined; for(let i = this.cannons.length - 1; i >= 0; i--) { const cannon = this.cannons[i]; if(this.checkDistance(mouseX, mouseY, cannon.x, cannon.y, cannon.diameter / 2)) { this.panels.props.tower = cannon.tower; this.selected = true; tower = cannon.tower; const item = this.cannons.splice(i, 1); this.cannons.push(item[0]); break; } } if(tower) { this.panels.props.x = tower.x + tower.w / 2 > (width/2) ? tower.x - tower.w * 0.1 - this.panels.props.w : tower.x + tower.w * 1.1; this.panels.props.y = tower.y + tower.h / 2 > (height/2) ? tower.y + tower.h / 2 - this.panels.props.h : tower.y + tower.h / 2; this.buttons.props.sell.x = this.panels.props.x; this.buttons.props.sell.y = this.panels.props.y + this.panels.props.h * 0.8; this.buttons.props.sell.content = "Sell $" + ((tower.cannon.sell * tower.cannon.health / 100) \| 0); this.buttons.props.sell.cannon = tower.cannon; this.panels.props.active = true; } } } //else move cannon from inventory to tower if(pressed && mouseButton === LEFT && !this.selected) { for(let i = this.inventory.length - 1; i >= 0; i--) { const cannon = this.inventory[i]; if(this.checkDistance(mouseX, mouseY, cannon.x, cannon.y, cannon.diameter / 2)) { cannon.selected = true; this.selected = true; cannon.base.x = cannon.x; cannon.base.y = cannon.y; const item = this.inventory.splice(i, 1); this.inventory.push(item[0]); break; } } } //run the cannons for(let i = 0; i < this.cannons.length; i++) { const cannon = this.cannons[i]; //if the cannon is currently selected then move it if(cannon.selected) { cannon.x = mouseX; cannon.y = mouseY; hover = true; cannon.canFire = false; } //draw and update the cannon cannon.run(); //set initial fire state cannon.canFire = false; //find the first enemy in range (if any) and set as target for(let j = 0; j < this.enemies.length; j++) { const enemy = this.enemies[j]; if(this.checkDistance(cannon.x, cannon.y, enemy.x, enemy.y, (cannon.range + enemy.diameter) / 2)) { cannon.target.x = enemy.x; cannon.target.y = enemy.y; cannon.canFire = true; break; } } } //run the inventory for(let i = 0; i < this.inventory.length; i++) { const cannon = this.inventory[i]; //if the cannon is currently selected then move it if(cannon.selected) { cannon.x = mouseX; cannon.y = mouseY; hover = true; } //draw the cannon (no update) cannon.draw(); } //if key released... if(this.selected && !pressed) { //check if cannon is over a tower and place/upgrade accordingly for(let i = 0; i < this.cannons.length; i++) { const cannon = this.cannons[i]; if(cannon.selected) { let over = false; cannon.selected = false; for(let j = 0; j < this.towers.length; j++) { const tower = this.towers[j]; if(tower.active && this.overTower(tower)) { //can only upgrade if not level 4 and both tower types match // if(cannon.type !== 4 && tower.cannon && tower.cannon.type === cannon.type) { //can only upgrade if not max level and both tower types match if( tower.cannon && tower.cannon !== cannon && tower.cannon.type === cannon.type && tower.cannon.level === cannon.level && cannon.level < this.cannonProps[cannon.type].cost.length - 1) { //upgrade the current cannon by 1 (up to ultimate) tower.cannon.level++; //assign average health from both cannons tower.cannon.health = (tower.cannon.health + cannon.health) / 2; //upgrade the cannon properties this.upgradeCannon(tower.cannon); //remove current cannon cannon.tower.cannon = null; cannon.tower = null; this.cannons.splice(i--, 1); over = true; break; } //if no cannon on tower then just place else if(!tower.cannon) { cannon.tower.cannon = null; cannon.tower = tower; tower.cannon = cannon; cannon.x = tower.x + tower.w / 2; cannon.y = tower.y + tower.h / 2; cannon.base.x = cannon.x; cannon.base.y = cannon.y; over = true; break; } } } //if it wasn't over a tower then return it back to the orginal tower if(!over) { cannon.x = cannon.base.x; cannon.y = cannon.base.y; } break; } } //check if cannon over tower and place accordingly for(let i = 0; i < this.inventory.length; i++) { const cannon = this.inventory[i]; if(cannon.selected) { let over = false; cannon.selected = false; for(let j = 0; j < this.towers.length; j++) { const tower = this.towers[j]; //can only place new cannon on blank tower if(tower.active && this.overTower(tower) && !tower.cannon) { cannon.x = tower.x + tower.w / 2; cannon.y = tower.y + tower.h / 2; cannon.base.x = cannon.x; cannon.base.y = cannon.y; cannon.placed = true; over = true; //associate tower with cannon tower.cannon = cannon; cannon.tower = tower; // cannon.diameter = this.blockSize; //remove cost of tower and update inventory this.money-= this.cannonProps[cannon.type].cost[cannon.level]; this.updateInventory(); //add to active cannons and remove from inventory this.cannons.push(cannon); this.inventory.splice(i--, 1); break; } } //if it wasn't over a tower then return it back to the inventory if(!over) { cannon.x = cannon.base.x; cannon.y = cannon.base.y; } break; } } //clear the selection this.selected = false; } //shoot bullets for(let i = 0; i < this.cannons.length; i++) { const cannon = this.cannons[i]; if(!cannon.selected && !cannon.fired && cannon.canFire) { cannon.fired = true; let vx, vy; if(cannon.type === 4) { //flame for(var j = 0; j < 2; j++) { vx = cos((cannon.angle - random(80, 100))Math.PI/180); vy = sin((cannon.angle - random(80, 100))Math.PI/180); this.cannonBullets.push({ x: cannon.x + vx * cannon.turretLength, y: cannon.y + vy * cannon.turretLength, diameter: cannon.bullet.diameter, vx: vx * cannon.bullet.speed, vy: vy * cannon.bullet.speed, color: cannon.colors.bullet, damage: cannon.damage }); } cannon.turretLength = cannon.turretConstraints.min; //add smoke when bullet fired const bullet = this.cannonBullets[this.cannonBullets.length-1]; this.addBulletParticles(bullet, 2); } else if(cannon.type === 7) { //octo for(var j = 0; j < 8; j++) { vx = cos((cannon.angle - 90 + 45 * j)Math.PI/180); vy = sin((cannon.angle - 90 + 45 j)Math.PI/180); this.cannonBullets.push({ x: cannon.x + vx cannon.turretLength, y: cannon.y + vy * cannon.turretLength, diameter: cannon.bullet.diameter, vx: vx * cannon.bullet.speed, vy: vy * cannon.bullet.speed, color: cannon.colors.bullet, damage: cannon.damage }); //add smoke when bullet fired const bullet = this.cannonBullets[this.cannonBullets.length-1]; this.addBulletParticles(bullet, 3); } cannon.turretLength = cannon.turretConstraints.min; } else if(cannon.type === 6) { //freeze vx = cos((cannon.angle - 90)Math.PI/180); vy = sin((cannon.angle - 90)Math.PI/180); this.cannonBullets.push({ x: cannon.x + vx * cannon.turretLength, y: cannon.y + vy * cannon.turretLength, diameter: cannon.bullet.diameter, vx: vx * cannon.bullet.speed, vy: vy * cannon.bullet.speed, color: cannon.colors.bullet, damage: cannon.damage, radius: cannon.radius, type: 1 }); cannon.turretLength = cannon.turretConstraints.min; //add smoke when bullet fired const bullet = this.cannonBullets[this.cannonBullets.length-1]; this.addBulletParticles(bullet, 5); } else if(cannon.type === 2) { //rapid vx = cos((cannon.angle - 90)Math.PI/180); vy = sin((cannon.angle - 90)Math.PI/180); const vx_offset = cos((cannon.angle)Math.PI/180) 5 * cannon.turret; const vy_offset = sin((cannon.angle)Math.PI/180) 5 * cannon.turret; cannon.turret= -1; this.cannonBullets.push({ x: cannon.x + vx_offset + vx cannon.turretLength, y: cannon.y + vy_offset + vy * cannon.turretLength, diameter: cannon.bullet.diameter, vx: vx * cannon.bullet.speed, vy: vy * cannon.bullet.speed, color: cannon.colors.bullet, damage: cannon.damage }); if(cannon.turret === 1) { cannon.turrets[0].len = cannon.turretConstraints.min; } else { cannon.turrets[1].len = cannon.turretConstraints.min; } //add smoke when bullet fired const bullet = this.cannonBullets[this.cannonBullets.length-1]; this.addBulletParticles(bullet, 5); } else { vx = cos((cannon.angle - 90)Math.PI/180); vy = sin((cannon.angle - 90)Math.PI/180); this.cannonBullets.push({ x: cannon.x + vx * cannon.turretLength, y: cannon.y + vy * cannon.turretLength, diameter: cannon.bullet.diameter, vx: vx * cannon.bullet.speed, vy: vy * cannon.bullet.speed, color: cannon.colors.bullet, damage: cannon.damage }); cannon.turretLength = cannon.turretConstraints.min; //add smoke when bullet fired const bullet = this.cannonBullets[this.cannonBullets.length-1]; this.addBulletParticles(bullet, 5); } } if(cannon.fired) { cannon.delayValue++; if(cannon.delayValue === cannon.delay) { cannon.delayValue = 0; cannon.fired = false; } } } //run the cannon bullets noStroke(); for(let i = this.cannonBullets.length - 1; i >= 0; i--) { //get the current bullet const bullet = this.cannonBullets[i]; //color of the bullet fill(bullet.color); //move the bullet in the direction it should move bullet.x+= bullet.vx; bullet.y+= bullet.vy; //draw the bullet ellipse(bullet.x, bullet.y, bullet.diameter, bullet.diameter); //check if the bullet went off the screen and remove it if it did if( bullet.x + bullet.diameter < 0 \|\| bullet.x > width \|\| bullet.y + bullet.diameter < 0 \|\| bullet.y > height) { this.cannonBullets.splice(i, 1); continue; } for(let j = this.enemies.length - 1; j >= 0; j--) { const enemy = this.enemies[j]; if(this.checkDistance(bullet.x, bullet.y, enemy.x, enemy.y, (bullet.diameter + enemy.diameter) / 2)) { enemy.health-= bullet.damage; if(bullet.type === 1) { //freeze this.freezes.push({ x: enemy.x, y: enemy.y, diameter: bullet.radius * 0.2, maxDiameter: bullet.radius, color: bullet.color, opacity: 100 }); } if(enemy.health <= 0) { this.money+= enemy.money; this.addRipple(enemy.x, enemy.y, enemy.diameter, color(38, 38, 38)); this.enemies.splice(j, 1); this.updateInventory(true); } this.cannonBullets.splice(i, 1); break; } } } if(this.enemies.length === 0) { this.startWave = false; this.buttons.play.wave.enabled = true; this.money+= this.levels[this.level].bonus; this.updateInventory(); if(this.wave < this.levels[this.level].waves.length - 1) { this.messages.push({ content: "Wave " + (this.wave + 1) + " complete", x: width / 2, y: height / 2, opacity: 0, dir: 1 }); this.wave++; this.setWave(); } else if(this.level < this.levels.length - 1) { this.scene = "next" } else { this.scene = "complete"; } } }, runAssets: function() { // imageMode(CORNER); for(let i = 0; i < this.assets.length; i++) { const asset = this.assets[i]; switch(asset.type) { case 0: image(this.images.tree1, asset.x, asset.y, asset.w, asset.h); break; case 1: image(this.images.tree2, asset.x, asset.y, asset.w, asset.h); break; } } }, runPropertyPanel: function() { if(this.panels.props.active) { //update the sell price based on base sell price and current health this.buttons.props.sell.content = "Sell $" + ((this.panels.props.tower.cannon.sell * this.panels.props.tower.cannon.health / 100) \| 0); //show the properties window this.showProperties(); //if clicked off the cannon then remove the properties window if( pressed && !(mouseX > this.panels.props.tower.x && mouseX < this.panels.props.tower.x + this.panels.props.tower.w && mouseY > this.panels.props.tower.y && mouseY < this.panels.props.tower.y + this.panels.props.tower.h) && !this.buttons.props.sell.over()) { this.panels.props.tower = undefined; this.panels.props.active = false; } } }, overTower: function(tower) { return mouseX > tower.x && mouseX < tower.x + tower.w && mouseY > tower.y && mouseY < tower.y + tower.h; }, play: function() { background(61, 61, 61); image(this.backImage, 0, 0); this.drawPanels(); this.runTowers(); this.runBulletParticles(); this.runCannons(); this.runEnemies(); this.runFreezes(); this.runAssets(); this.runPropertyPanel(); this.runMessages(); if(this.health === 0) { this.scene = "gameover"; } for(let i in this.buttons.play) { this.buttons.play[i].draw(); } }, gameover: function() { background(61, 61, 61); image(this.backImage, 0, 0); this.drawPanels(); this.runTowers(); this.runAssets(); pushStyle(); textAlign(CENTER, CENTER); textSize(40); fill(255, 150); text("GAME OVER!!", width / 2, height / 2); popStyle(); for(let i in this.buttons.over) { this.buttons.over[i].draw(); } }, next: function() { background(61, 61, 61); image(this.backImage, 0, 0); this.drawPanels(); this.runTowers(); this.runAssets(); pushStyle(); textAlign(CENTER, CENTER); textSize(40); fill(255, 150); text("LEVEL COMPLETE", width / 2, height / 2); popStyle(); for(let i in this.buttons.next) { this.buttons.next[i].draw(); } }, complete: function() { background(61, 61, 61); image(this.backImage, 0, 0); this.drawPanels(); this.runTowers(); this.runAssets(); pushStyle(); textAlign(CENTER, CENTER); textSize(40); fill(255, 150); text("GAME COMPLETED!!", width / 2, height / 2); popStyle(); for(let i in this.buttons.complete) { this.buttons.complete[i].draw(); } }, home: function() { image(this.backImage, 0, 0); this.drawPanels(); pushStyle(); textAlign(CENTER, CENTER); textSize(80); fill(255, 150); text("Buzzaw Breach", width / 2, 120); popStyle(); image(this.images.tower, 660, 310); image(this.images.tower, 610, 480); image(this.images.tower_base, 370, 560); image(this.images.tower, 510, 180); this.homeProps.beast.draw(); this.homeProps.rapid.draw(); image(this.images.buzzaw_seedling, 160, 180); image(this.images.buzzaw_seed, 190, 480); for(let i in this.buttons.home) { this.buttons.home[i].draw(); } }, how: function() { image(this.backImage, 0, 0); //draw panel areas noStroke(); fill(83, 83, 83); rect(this.panels.top.x, this.panels.top.y, this.panels.top.w, this.panels.top.h); rect(this.panels.bottom.x, this.panels.bottom.y, this.panels.bottom.w, this.panels.bottom.h); pushStyle(); textAlign(CENTER, CENTER); textSize(80); fill(255, 150); text("How", width / 2, 100); textSize(20); text("You need to defend from the attacking Buzzaws. They will firstly target your cannons, then destroy the towers so you can't place more cannons. Each Buzzaw that gets past your defences will reduce your overall health by 10%.\n\nLeft click to drag a tower from your inventory onto an available tower. As long as there is a single piece of the tower you can place your cannon on it.\n\nLeft click to drag a cannon (that's already been placed on a tower) on top of another cannon of the same type and level to upgrade it, keeping an average of the health of the two cannons. You can upgrade twice per cannon (up to level 3).\n\nRight click on a cannon to view its properties. You can also then click on the Sell button to sell the cannon at a reduced cost (based on the original sell price and current health remaining).\n\nThere are a total of 8 different cannon types all with their own abilities. You'll need to work out the strategy that best works for you.", 50, 100, 800, 500); popStyle(); this.buttons.how.home.draw(); if(this.started) { this.buttons.how.play.draw(); } }, run: function() { switch(this.scene) { case "load": this.load("home"); break; case "play": this.play(); break; case "home": if(this.logo.done) { this.home(); } this.logo.draw(); break; case "how": this.how(); break; case "gameover": this.gameover(); break; case "next": this.next(); break; case "complete": this.complete(); break; } if(this.transition.active) { this.transition.run(); } cursor(hover ? 'pointer' : 'default'); clicked = hover = false; } }; return App; })(); app = new App(); draw = function() { app.run(); }; } } ]; const programElements = document.getElementsByClassName("program"); let processingInstance; Array.prototype.forEach.call(programElements, (item, index) => { processingInstance = new Processing(item, programArr[index]); }); / Code for checking the HTML page size / (() => { let resizeElement = document.getElementById("resize"); let mainElement = document.getElementById("main"); if(window.innerWidth < 895 \|\| window.innerWidth > 905 \|\| window.innerHeight < 695 \|\| window.innerHeight > 705) { resizeElement.style.display = "block"; mainElement .style.display = "none"; } else { resizeElement.style.display = "none"; mainElement .style.display = "block"; } })(); }); </script><!--<script>--> </body> </html>
Folds	46,111,112,4764
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOzkeiuCww
Votes	173
Spin-Offs	30
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739457482259
Updated	10 months ago, 1739457482259
Source Deleted	unknown