//Garden-Attackers-Zombies setup const rawCanvas = document.getElementById("garden"); console.log(window.innerWidth); class DrawBrary { static canvas = rawCanvas.getContext("2d"); static canvasWidth = rawCanvas.getBoundingClientRect().width; static canvasHeight = rawCanvas.getBoundingClientRect().height; static tileWidth = DrawBrary.canvasWidth / 18; static tileHeight = DrawBrary.canvasHeight / 20; static drawEllipse(x, y, width,height, fill, stroke){ DrawBrary.canvas.fillStyle = fill; DrawBrary.canvas.beginPath(); DrawBrary.canvas.ellipse(x, y, width, height, 0,0, 2 * Math.PI, false); DrawBrary.canvas.fill(); if (stroke){ DrawBrary.canvas.strokeStyle = stroke; DrawBrary.canvas.stroke(); } } static drawTriangle(x, y, width, height, fill, stroke){ DrawBrary.canvas.fillStyle = fill; DrawBrary.canvas.beginPath(); DrawBrary.canvas.moveTo(x, y + height); DrawBrary.canvas.lineTo(x+(width/2), y); DrawBrary.canvas.lineTo(x+width, y+height); DrawBrary.canvas.fill(); if (stroke){ DrawBrary.canvas.strokeStyle = stroke; DrawBrary.canvas.stroke(); } } static drawRectangle(x,y, width, height, fill, stroke){ DrawBrary.canvas.fillStyle = fill; DrawBrary.canvas.fillRect(x,y,width,height); if (stroke){ DrawBrary.canvas.strokeStyle = stroke; DrawBrary.canvas.strokeRect(x,y,width,height); } } static drawBackground(){ for (let row = 0; row < 10; row++){ for (let col = 0; col < 18; col++){ if (row % 2 == col % 2){ DrawBrary.drawRectangle( col * DrawBrary.tileWidth, row * DrawBrary.tileHeight, DrawBrary.tileWidth, DrawBrary.tileHeight, "rgb(67, 107, 43)", "black" ); } else { DrawBrary.drawRectangle( col * DrawBrary.tileWidth, row * DrawBrary.tileHeight, DrawBrary.tileWidth, DrawBrary.tileHeight, "rgb(92, 235, 7)", "black" ); } } } } static drawShooter(plant){ //First DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width, Plant.height, "lightgreen", null ); //Second DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width, Plant.height, "lightgreen", null ); //Third DrawBrary.drawRectangle( this.getX(), this.getY(), this.getWidth(), this.getHeight(), "darkgreen", null ); } static drawTrap(plant){ DrawBrary.drawTriangle( plant.getX(), plant.getY(), Plant.width, Plant.height, "green", null ); DrawBrary.drawTriangle( plant.getX() - (Plant.width /2.5), plant.getY(), Plant.width, Plant.height, "green", null ); DrawBrary.drawTriangle( plant.getX(), plant.getY(), this.getWidth(), this.getHeight(), "green", null ); } static drawShield(plant){ DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width, Plant.height, this.color, this.stroke ); } static drawGenerator(plant){ DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width, Plant.height, this.color, this.stroke ); } static drawBomb(plant){ DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width * plant.multiplierW, Plant.height * plant.multiplierH, "red", null, ); DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width * plant.multiplierW, Plant.height * plant.multiplierH, "red", null ); } static drawMine(plant){ DrawBrary.drawRectangle( plant.getX(), plant.getY(), Plant.width, Plant.height, this.color, this.stroke ); DrawBrary.drawRectangle( plant.getX(), plant.getY(), Plant.width, Plant.height, "grey", this.stroke ); if (plant.active){ DrawBrary.drawEllipse( plant.getX(), plant.getY(), Plant.width, Plant.height, "red", this.stroke ); } } static clearDrawingPanel(){ DrawBrary.canvas.clearRect(0,0,DrawBrary.canvasWidth,DrawBrary.canvasHeight); } } class Garden{ static instance = null; constructor(){ this.spriteQueue = new Map([ ["plants",[ [null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null] ]], ["zombies",[ [], [], [], [], [] ]], ["attacks",[ [], [], [], [], [] ]], ["suns",[]] ]); } static getInstance(){ if (!Garden.instance){ Garden.instance = new Garden(); } return Garden.instance; } potPlant(col, lane, plant){ var lane = this.spriteQueue.get("plants")[lane-1]; this.spriteQueue.get("plants")[lane-1] = lane.map( (val, index) => { if (index == col-1 && (!val)){ return plant; } else { return val; } } ); } addSun(x, y, falling){ //Sun: Falling, X position, Y position this.spriteQueue.get("suns").push(new Sun(x,y,falling)); } spawnZombie(lane, zombie){ this.spriteQueue.get("zombies")[lane-1].push(zombie); } pushAttack(lane,attack){ this.spriteQueue.get("attacks")[lane-1].push(attack); } draw(){ for (const spriteArray of this.spriteQueue.get("zombies").concat(this.spriteQueue.get("plants")).concat(this.spriteQueue.get("attacks")).concat(this.spriteQueue.get("suns"))){ spriteArray.forEach( (sprite) => { if (sprite){ sprite.draw(); } } ); } } clean(){ for (let lane = 0; lane < 5; lane ++){ var plantLane = this.spriteQueue.get("plants")[lane]; var zombieLane = this.spriteQueue.get("zombies")[lane]; var attackLane = this.spriteQueue.get("attack")[lane]; this.spriteQueue.get("plants")[lane] = plantLane.filter( (plant) => { return plant.health > 0; } ); this.spriteQueue.get("zombies")[lane] = zombieLane.filter( (zombie) => { return zombie.health > 0; } ); this.spriteQueue.get("attacks")[lane] = attackLane.filter( (val) => { return val.active; } ); } this.spriteQueue.get("suns") = this.spriteQueue.get("suns").filter( (sun) => { return !sun.expired; } ); } } class Plant{ static width = (DrawBrary.tileWidth * (4/5)); static height = (DrawBrary.tileHeight * (4/5)); constructor(col, lane, health){ Garden.getInstance().potPlant(col,lane,this); this.col = col; this.lane = lane; this.health = health; } draw(){ console.log("Abstract function"); } getY(){ return (DrawBrary.tileHeight * (this.lane-1)); } getX(){ return (DrawBrary.tileWidth * (this.col-1)); } getEnemyLane(){ return Garden.getInstance().spriteQueue.get("zombies")[this.lane-1]; } getEnemiesInRange(range = 0){ return this.getEnemyLane().filter( (enemy) => { return Math.abs((enemy.x + (enemy.width/2)) - (this.getX() + (Plant.width()/2))) < Plant.width + enemy.width + range; } ); } takeDamage(damage){ this.health -= damage; } execute(){ this.health = 0; } } /* Shooter: Done Generator: Trap: Done Bomb: Done Mine:Done Shield:Done */ /* class Projectile { constructor(lane,x,y, xSpeed, ySpeed, radius, damage, speed, color, stroke){ Garden.getInstance().pushAttack(lane,this); this.lane = lane; this.x = x; this.y = y; this.xSpeed = xSpeed; this.ySpeed = ySpeed; this.radius = radius; this.damage = damage; this.speed = speed; this.active = true; this.color = color; this.stroke = stroke; } draw(){ DrawBrary.drawEllipse( this.x, this.y, this.width, this.height, this.color, this.stroke ); this.update(); } update(){ if (this.active){ this.x += this.xSpeed; this.y += this.ySpeed; } } getEnemyLane(){ return Garden.getInstance().spriteQueue.get("zombies")[this.lane-1]; } } */ /* Shooter: Done Generator: Trap: Done Bomb: Done Mine:Done Shield:Done */ class Shooter extends Plant{ /* static health = 100; */ constructor(col, lane){ super(col, lane,100); this.relaodSpeed = 0.75 * 1000; this.damage = 20; this.speed = 4; this.action = this.periodic(); } draw(){ DrawBrary.drawShooter(this); } periodic(){ return setInterval( () => { if (this.health > 0){ if (this.getEnemyLane()){ //shoot } } else { clearInterval(this.action); } } ,this.relaodSpeed); } getEnemyLane(){ return Garden.getInstance().spriteQueue.get("zombies")[this.lane-1] != []; } } class Trap extends Plant { /* static health = 1; */ constructor(col, lane){ super(col, lane, 1); this.damage = 45; this.reloadSpeed = 0.5 * 1000; this.action = this.periodic(); } draw(){ DrawBrary.drawTrap(this); } periodic(){ return setInterval( () => { this.getEnemiesInRange().forEach( (enemy) => { enemy.takeDamage(this.damage); } ); } ,this.reloadSpeed); } } class Bomb extends Plant { /* static health = 10000; */ constructor(col, lane){ super(col, lane,10000); this.tickSpeed = 20; this.action = this.periodic(); this.ticks = 0; this.multiplierW = 1; this.multiplierH = 1; } draw(){ DrawBrary.drawBomb(this); } periodic(){ return setInterval( () => { if (this.ticks * this.tickSpeed < 1000){ this.multiplierW *= 1.06; this.multiplierH *= 1.02; } else { this.enemiesWithinRange().forEach( (zombie) => { zombie.health = 0; } ); this.health = 0; clearInterval(this.action); } } , this.tickSpeed); } enemiesWithinRange(){ return this.getEnemyLane().filter( (zombie) => { return (Math.abs((zombie.getX() + zombie.getWidth()) - this.x) <= this.width + zombie.getWidth()); } ); } } class Mine extends Plant { /* static health = 75; static color = "beige"; static width = DrawBrary.tileWidth - 4; static height = DrawBrary.tileHeight - 50; */ constructor(col, lane){ super(col, lane, 75); this.prepInterval = 30 * 1000; this.startingTime = this.getMilliSeconds(); this.active = false; } getMilliSeconds(){ return new Date().getMilliseconds(); } draw(){ DrawBrary.drawMine(this); this.update(); } update(){ if (this.active){ this.stateSplode(); } else { if (this.startingTime + this.prepInterval <= this.getMilliSeconds()){ this.active = true; } } } stateSplode(){ var victims = this.getEnemyLane().filter( (zombie) => { return (Math.abs((zombie.getX() + zombie.getWidth()) - this.x) <= this.width + zombie.getWidth()); } ); if (victims){ victims.forEach( (victim) => { victim.execute(); } ); this.execute(); } } } class Shield extends Plant { /* static health = 500; static color = "lightorange"; static width = DrawBrary.tileWidth - 4; static height = DrawBrary.tileHeight - 5; */ constructor(col, lane){ super(col, lane, 500); } draw(){ DrawBrary.drawEllipse( this.getX(), this.getY(), this.getWidth(), this.getHeight(), this.color, this.stroke ); } } //The Sunflower class Generator extends Plant { /* static health = 50; static color = "lightorange"; static width = DrawBrary.tileWidth - 10; static height = DrawBrary.tileHeight - 10; */ constructor(col, lane){ super(col, lane, 50); this.reloadSpeed = 10 * 1000; this.action = this.periodic(); } periodic(){ return setInterval( () => { if (this.health > 0){ this.spawnSun(); } else { clearInterval(this.action); } } , this.relaodSpeed); } draw(){ DrawBrary.drawEllipse( this.getX(), this.getY(), this.getWidth(), this.getHeight(), this.color, this.stroke ); } spawnSun(){ //Spawns a sun } } function spawnDebug(col, type){ var sprites = []; switch(type){ case "shooter": for (let i = 1; i < 6; i++){ sprites.push(new Shooter(col,i)); } break; case "trap": for (let i = 1; i < 6; i++){ sprites.push(new Trap(col,i)); } break; case "mine": for (let i = 1; i < 6; i++){ var mine = new Mine(col,i); mine.active = true; sprites.push(mine); } break; case "bomb": for (let i = 1; i < 6; i++){ sprites.push(new Bomb(col,i)); } break; case "generator": for (let i = 1; i < 6; i++){ sprites.push(new Generator(col,i)); } break; case "shield": for (let i = 1; i < 6; i++){ sprites.push(new Shield(col,i)); } break; } sprites.forEach( (sprite) => { sprite.draw(); } ); } DrawBrary.drawBackground(); spawnDebug(2,"shooter"); spawnDebug(3,"trap"); spawnDebug(4,"bomb"); spawnDebug(5,"mine"); spawnDebug(6,"shield"); /* function frameProcess(){ requestAnimationFrame(frameProcess); draw(); } frameProcess(); */

Plants vs Zombies: ( STATUS :Just started)