引言：

前两天看到小朋友在玩植物大战僵尸，想起来多年以前自己也经常玩这个游戏，是比较经典的一款休闲游戏，然后就心血来潮就周末写了一个，花了不少时间去找素材和编写代码，感觉上基本的功能是做好了（要上班，没那么多时间搞），写出来大家看看，确实有点爆肝！

效果图：

实现思路

用两张画布来实现，第一个画布绘制不用更新的东西，比如背景图、按钮、积分图，卡牌图等；
第二个画布，绘制经常更新的东西，比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等。
动画的实现，通过图片的不停切换来实现的，开启一个总定时任务100毫秒重新绘制画布2，当然其他的每个动画都会重新开启定时任务（我称他们为子任务），它们不负责绘制，只负责改变对应的参数，绘制都是由总任务来完成的，比如僵尸走动动画：开启子任务100毫秒执行一次图片切换，切换到最后一张的时候，返回到第一张，如果要走动的话同时改变图片的位置就好，子任务修改完成后，总任务自然会绘制出来；
卡牌的实现，目前就写了2张卡牌（向日葵、豌豆苗），给卡牌绘制了相同大小的方形来控制鼠标点击事件，当点击卡牌的时候，会创建对应的植物并且跟随鼠标移动，移动鼠标到合适的位置后点击（田里面对应的方块），会在对应的位置种植；
田位置的控制，以方形来划分，每一块可以种植物的区域都用一个小方块来控制，植物就种在对应的方块内，当选择一个卡牌后，鼠标移动到田里面就会标示出来一个方形的区域，标示植物种植在这块区域里面。
豌豆苗被种植后，会定时的发射子弹，当子弹的位置和僵尸的位置交汇的时候，就判断为击中（处理子弹击中动画、子弹消失、僵尸扣除相应血量、击中的音效等），僵尸血量归零后会停止走动的动画，开启新的倒地动画，倒地完成后删除僵尸，同时累计得到的分数；
当僵尸的位置和植物的位置交汇的时候，僵尸会停止行走的动画，开启吃的动画（植物被扣除血量、僵尸吃的音效），植物血量归零后，植物对象会被清理；
阳光有两种产生方式，定时产生和向日葵产生，产生后会开启往下飘的动画飘到一定范围后停止动画、开启计数器（目前设定为10秒），计数归零没有此阳光依然未被点击收集的话就会消失，在指定时间内点击了该阳光（音效），则会开启往左上角飞行的动画，到终点后阳光消失，阳光分增加（音效）；
结束条件：1）僵尸触及田的最左边--判定为失败。2）得分300--判定为胜利！

实现

绘制背景

	//绘制背景
	Plants.prototype.drawBG=function(){
		var image,img,sx=150,sy=0,sWidth=900,sHeight=600,dx=0,dy=0,dWidth=900,dHeight=600;
		//背景
		image = this.imgObj[1];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
	}

绘制上方的卡牌区域、积分区域，相关按钮

//绘制游戏上方的相关图片（卡片等）
	Plants.prototype.drawCard=function(){
		var image,img,sx=0,sy=0,sWidth=446,sHeight=87,dx=0,dy=0,dWidth=446,dHeight=80;
		//方形卡片盘
		image = this.imgObj[2];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
		
		sWidth=128,sHeight=31,dx=450,dy=0,dWidth=128,dHeight=40;
		//积分
		image = this.imgObj[12];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr.push(img);
		
		sWidth=50,sHeight=70,dx=76,dy=5,dWidth=50,dHeight=68;
		//方形卡片 太阳花
		image = this.imgObj[3];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		img.sunCost=50;//生产一个苗需要50阳光
		img.type='sun';//植物类型
		this.renderArr.push(img);
		this.cardArr.push(img);
		
		sWidth=50,sHeight=70,dx=130,dy=4,dWidth=50,dHeight=70;
		//方形卡片 豌豆
		image = this.imgObj[4];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		img.sunCost=100;//生产一个苗需要100阳光
		img.type='wandou';//植物类型
		this.renderArr.push(img);
		this.cardArr.push(img);
 
		
		sWidth=97,sHeight=33,dx=780,dy=8,dWidth=97,dHeight=33;
		//开始按钮图片
		image = this.imgObj[5];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.startImage=img;
		this.renderArr.push(img);
		
		sWidth=97,sHeight=33,dx=650,dy=8,dWidth=97,dHeight=33;
		//创建僵尸图片
		image = this.imgObj[8];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.createZombiesImage=img;
		this.renderArr.push(img);
	}

点击开始的逻辑

点击开始就是游戏的入口，游戏的大部分功能都是在这个逻辑里面实现，包含：

展示开始图片、开启背景音乐、阳光计分显示、积分显示、创建田的背景方形、创建卡牌的背景方形、开启总任务、定时创建太阳光、定时创建僵尸。

展示开始图片

//展示开始图片
	Plants.prototype.startShow=function(){
		var image,img,sx=0,sy=0,sWidth=225,sHeight=108,dx=this.w/2-110,dy=this.h/2-100,dWidth=225,dHeight=108;
		image = this.imgObj[10];
		img = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr2.push(img);
		
		var that=this;
		setTimeout(function(){
			that.clear(img);
		},2000);
	}

这里设置一个延时2秒后自动清除掉这个图片

阳光计分显示

//创建阳光分
	Plants.prototype.createSunText=function(){
		x=40,y=74,content=this.sunTotalCount;
		var	text = new _.Text({
			x:x,
			y:y,
			text:content,
			font:'20px ans-serif',
			textAlign:'center',
			fill:true,
			fillStyle:'green'
		});	
		this.renderArr2.push(text);	
		this.sunCountObj=text;
	}

积分显示

	//创建积分
	Plants.prototype.createCountText=function(){
		x=530,y=34,content=this.curCount;
		var	text = new _.Text({
			x:x,
			y:y,
			text:content,
			font:'30px ans-serif',
			textAlign:'center',
			fill:true,
			fillStyle:'pink'
		});	
		this.renderArr2.push(text);	
		this.countObj=text;
	}

创建卡牌的背景方形（用于监听鼠标点击卡牌）

根据卡牌数组来创建，循环这个数组，方形的坐标和宽高与卡牌数组元素相对应，并且方形的fillStyle采用rgba来处理，如：rgba(192,192,192,0) rgba(192,192,192,0.6)，当最后一个数字是0的时候卡牌可用，当为0.6的时候，卡牌会被遮罩起来不可用（不可用是在鼠标点击的时候控制，这里只是一个遮罩的效果）当然这里会设置一个参数alive，当它为true表示可用，false则点击无效，鼠标点击的时候就是根据这个参数来控制的。

	//创建卡片背景方形
	Plants.prototype.createCardBGRect=function(){
		var x=0,y=0,rect,fillStyle,alive;
		for(var i=0;i<this.cardArr.length;i++){
			var item=this.cardArr[i];
			fillStyle = this.sunTotalCount>=item.sunCost? 'rgba(192,192,192,0)':'rgba(192,192,192,0.5)';
			alive = this.sunTotalCount>=item.sunCost? true:false;
			rect = new _.Rect({
				x:item.dx,
				y:item.dy,
				width:item.dWidth,
				height:item.dHeight,
				fill:true,
				fillStyle:fillStyle
			 })
			 rect.sunCost=item.sunCost;//设定需要花费的阳光数值
			 rect.alive=alive;
			 rect.type=item.type;
			 this.renderArr2.push(rect);
			 this.cardRectArr.push(rect);
		}
		
	}

创建田的背景方形（用于监听植物的种植）

根据背景上田的规格，来设置好X、Y坐标以及宽高，这样创建的方形就会和背景相对应，种植物的时候就比较好控制了，解释如下：

上图是我自己随便画的，也没有画好、没画全，实际上每个里面都有，并且比较整齐，我把代码稍微修改一下截图，最终的代码肯定不是这样的哦

这样，就把田的区域一块块的覆盖起来，但我们这里也是要用rgba的方式来，种植物的时候才会突出显示

//创建植物田背景方形
	Plants.prototype.createBGRect=function(){
		var x=0,y=0,rect;
		for(var i=1;i<=5;i++){//5行
			y = 75+(i-1)*100;
			for(var j=1;j<=9;j++){//9列
				x = 105+(j-1)*80;
				rect = new _.Rect({
					x:x,
					y:y,
					width:80,
					height:100,
					fill:true,
					//fillStyle:_.getRandomColor()
					fillStyle:'rgba(0,250,154, 0)'
				 })
				 rect.index=i;//标记行数
				 this.renderArr2.push(rect);
				 this.bgRectArr.push(rect);
			}
		}
	}

创建阳光

1、向日葵植物创建阳光和定时创建阳光都放到这里了，他们的区别是：定时创建的X坐标随机产生，而向日葵创建的阳光X、Y坐标是根据向日葵的位置来的。

2、设定阳光的分值、阳光的血量、阳光默认运动的终点位置（这个位置可以自己定，我定义Y坐标的是400），阳光为什么有血量呢？这个血量是用来控制消失时间的，比如我设定血量为100，当阳光运动到底部停止运动后，就会开启计算血量的任务，每100毫秒执行一次，让血量 -1，因100毫秒执行10次是1秒，1秒后血量就变成90了，当血量归零后如若依然没有去收集这个阳光，需要让阳光消失，同时关闭此定时器。

3、当点击阳光后，就把计算血量的定时器关闭，开启向左上角运动的动画，当然这里要用到 Math.atan2 根据阳光点击的位置和做上角的位置，计算出角度，然后根据角度利用Math.cos、Math.sin 计算出运动的X、Y的数值，定时器将根据这个数值来运动。

4、运动指定的位置后，要做以下动作：清除运动定时器、阳光积分累加与显示、收集音效开启、阳光消失、卡牌可用状态的更新。

//创建阳光
	Plants.prototype.createSun=function(plant){
		var image,sun,sx=0,sy=0,sWidth=77,sHeight=74,dx=0,dy=70,dWidth=45,dHeight=44;
		
		if(plant){//这种是植物创建的太阳
			dx = plant.dx;
			dy = plant.dy;
		}else{
			dx = _.getRandom(200,800);//x方形随机200-800
		}
		
		//绘制时的图片下标
		var startKey=this.count+this.zombiesRunCount+this.wandousRunCount+this.zombiesDeadCount+1;
		//方形卡片盘
		image = this.imgObj[startKey];
		sun = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		sun.imageKey=startKey;//执行动画更新的下标
		sun.key=startKey;//原始下标
		sun.value=20;//收集一个20分
		sun.blood=100;//默认10点血量（10秒消失，因为我给太阳设置的是100毫秒执行一次，所以这个blood设置为100，每次-1 ，10秒就刚好100）
		sun.floor=400;//到底的位置
		this.renderArr2.push(sun);
		
		this.suns.push(sun);
		
		sun.timmer = setInterval(animate.bind(this,sun),100);
		function animate(z){
			var that=this;
			z.imageKey ++;
			//一个循环了，重新回到初始位置
			if(z.imageKey>=(that.sunRunCount+z.key)){
				z.imageKey=z.key;
			}
			z.image = that.imgObj[z.imageKey];
			z.dy+=2;
			if(z.dy>=z.floor){
				//console.log('太阳到位置了');
				clearInterval(z.timmer);
				//开启定时任务，多少秒以后消失
				sun.timmer = setInterval(time.bind(this,sun),100);
			}
		}
		
		//太阳计时
		function time(z){
			var that=this;
			z.imageKey ++;
			//一个循环了，重新回到初始位置
			if(z.imageKey>=(that.sunRunCount+z.key)){
				z.imageKey=z.key;
			}
			z.image = that.imgObj[z.imageKey];
			//计算消失时间
			z.blood--;
			if(z.blood<=0){
				clearInterval(z.timmer);
				//console.log('太阳到时间了');
				fade.call(this,z);//执行消失
			}
		}
		
		//太阳消失
		function fade(z){
			this.clear(z);
			//console.log('太阳消失了');
			this.clearAssign(this.suns,z);//清楚指定对象
			z=null;
		}
		//太阳被点击
		function sunClick(z){
			//console.log('太阳被点击了')
			clearInterval(z.timmer);//清楚之前的定时器
			
			this.pointsMusic.play();
			
			var cx=cy=20;//收集点的X\Y坐标
			var angle = Math.atan2((z.dy-cy), (z.dx-cx))  //弧度 
			
			//计算出X\Y每一帧移动的距离
			var mx = my=0;
			mx = Math.cos(angle)*20;
			my = Math.sin(angle)*20;
			z.mx=mx,z.my=my;
			//开启移动定时器
			z.timmer = setInterval(sunCollect.bind(this,z),100);
		}
		//收集太阳动画
		function sunCollect(z){
			var that=this;
			z.imageKey ++;
			//一个循环了，重新回到初始位置
			if(z.imageKey>=(that.sunRunCount+z.key)){
				z.imageKey=z.key;
			}
			z.image = that.imgObj[z.imageKey];
			z.dx-=z.mx;
			z.dy-=z.my;
			if(z.dy<=20||z.dx<=20){
				//console.log('太阳收集完成');
				clearInterval(z.timmer);
				
				this.moneyfallsMusic.play();
				
				fade.call(this,z);//执行消失
				//计数累加
				that.sunTotalCount+=z.value;
				
				//更新卡片是否可用情况
				that.updateCardUse();
				//更新阳光数值
				that.sunCountObj.text=that.sunTotalCount;
			}
		}
		
		sun.click=sunClick.bind(this,sun);//给这个sun对象绑定点击函数
	}

创建僵尸

1、创建僵尸：定时（10秒）、随机数量（1-5只）、随机行（1-5行，这里表示出现在地图的哪一行）。

2、设定僵尸的血量、僵尸所处的行数、僵尸的状态（run、eat、dead），状态是用来控制切换图片的下标的，不然动画会出错。

3、行走动画依赖于图片的切换和X坐标的改变（每一帧x坐标减少2即可）。

4、每一帧都要判断x坐标与植物的坐标是否交汇，如果是先关闭行走的动画，更新状态为 eat ，开启吃的动画，切换图片的下标。

5、每一次吃的时候递减植物的血量，判断植物的血量，如果血量归零则表示吃完了，此时要清理掉植物，僵尸回归行走的动画，状态改为run；若没吃完则继续吃。

6、每一帧也要判断僵尸的x坐标是否到了最左边，如果是游戏结束。

创建

	//创建僵尸
	Plants.prototype.createZombie=function(){
		var image,zomble,sx=0,sy=0,sWidth=75,sHeight=119,dx=900-75,dy=270,dWidth=75,dHeight=119;
		
		var index = _.getRandom(1,6);//随机获取1\2\3\4\5 行数
		if(index==1){
			dy=60;
		}else if(index==2){
			dy=160;
		}else if(index==3){
			dy=260;
		}else if(index==4){
			dy=355;
		}else if(index==5){
			dy=460;
		}
		
		//绘制时的图片下标
		var startKey=this.count+1;
		//方形卡片盘
		image = this.imgObj[startKey];
		zomble = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		zomble.imageKey=startKey;//执行动画更新的下标
		zomble.key=startKey;//原始下标
		zomble.blood=10;//默认10点血量
		zomble.index=index;//设定僵尸的行数
		zomble.state='run';
		this.renderArr2.push(zomble);
		this.zombies.push(zomble);
		
		zomble.run=run.bind(this);
		
		zomble.run();
		
		function run(){
			zomble.timmer = setInterval(animate.bind(this,zomble),100);
		}
		function animate(z){
			var that=this;
			z.imageKey ++;
			//一个循环了，重新回到初始位置
			if(z.imageKey>=(that.zombiesRunCount+z.key)){
				z.imageKey=z.key;
			}
			z.image = that.imgObj[z.imageKey];
			z.dx-=2;
			//判断有没有接触到植物，如果有开始吃植物 
			that.eat(zomble)
			
			if(z.dx<=100){
				console.log('结束了');
				that.end();
			}	
		}
	}

僵尸吃

//僵尸吃
	Plants.prototype.eat=function(zomble){
		//先判断当前僵尸有没有到达吃的位置，有的话就开始吃，关闭掉之前的僵尸动画，开始吃的动画
		var plants=this.plants;
		var plant;//被捕获的植物
		for(var i=0;i<plants.length;i++){
			var item=plants[i];
			if(item.index==zomble.index){
				if(item.dx+item.dWidth-20>=zomble.dx){//判断为吃
					plant=item;
					break;
				}
			}
			
		}
		if(plant){
			clearInterval(zomble.timmer);//清除移动动画
			zomble.imageKey=zomble.key=this.count+this.zombiesRunCount+this.wandousRunCount+this.zombiesDeadCount+this.sunRunCount+1;//设定key
			zomble.state='eat';
			zomble.timmer = setInterval(animate.bind(this,zomble,plant),100);
		}
		
		function animate(z,p){
			this.eatMusic.play();
			var that=this;
			z.imageKey ++;
			//一个循环了，重新回到初始位置
			if(z.imageKey>=(that.zombiesEatCount+z.key)){
				z.imageKey=z.key;
			}
			z.image = that.imgObj[z.imageKey];
			
			p.blood--;//植物血量的处理
			if(p.blood<=0){
				//console.log('植物被吃了');
				clearInterval(z.timmer);
				//清除植物
				this.delPlant(p);
				zomble.state='run';
				zomble.imageKey=zomble.key=this.count+1;//设定key
				//继续移动
				z.run();
			}
		}
	}

删除植物

//删除掉植物
	Plants.prototype.delPlant=function(plant,type){
		if(!type){//还没有创建的植物不需要清除这两个任务
			//停止植物自身的动画
			clearInterval(plant.timmerSelf);
			//停止植物发射子弹的动画
			clearInterval(plant.timmer);
		}
		//渲染中删除
		this.clear(plant);
		//plants数组中删除
		this.clearAssign(this.plants,plant);
		//植物对应的背景处理
		if(plant.bgRect){
			plant.bgRect.alive=false;
			plant.bgRect.plant=false;
		}
		plant=null;
	}

创建向日葵

1、点击卡牌后的创建，所以肯定是要传入鼠标的位置，创建的跟随鼠标移动（此时向日葵已经创建）

2、设定 alive 函数，当在田里面选中位置后，执行此函数，进行种植操作。

3、扣除阳光花费、更新卡牌是否可用、开启定时产生阳光的任务

	//创建太阳植物
	Plants.prototype.createSunPlant=function(pos,item){
		var image,plant,sx=0,sy=0,sWidth=63,sHeight=73,dx=110,dy=300,dWidth=63,dHeight=73;
		dx = pos.x,dy=pos.y;//设定初始位置为鼠标的位置
		//绘制时的图片下标
		var startKey=this.count+this.zombiesRunCount+this.wandousRunCount+this.zombiesDeadCount+this.sunRunCount+this.zombiesEatCount+1;
		//方形卡片盘
		image = this.imgObj[startKey];
		plant = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		plant.imageKey=startKey;//执行动画更新的下标
		plant.key=startKey;//原始下标
		plant.sunCost=item.sunCost;//阳光花费值
		plant.blood=50;//设定为50血量，实际是5秒吃完，因为100毫秒计算一次吃
		plant.id='SunPlant';
		this.renderArr2.push(plant);
		
		this.plants.push(plant);
		this.currPlant=plant;//标记正在创建的植物
		
		plant.alive=alive.bind(this);
		
		function alive(bgRect){
			//设置背景对象
			plant.bgRect=bgRect;
			//扣除阳光花费
			this.sunTotalCount-=plant.sunCost;
			//更新卡片是否可用情况
			this.updateCardUse();
			//更新阳光数值
			this.sunCountObj.text=this.sunTotalCount;
			//每6秒发射一个阳光
			plant.timmer = setInterval(shoot.bind(this),6000);
			this.plantMusic.play();//音乐
		}
		
		function shoot(){
			this.createSun(plant);
		}
		//植物本身的动画
		plant.timmerSelf = setInterval(animate.bind(this,plant),100);
		function animate(p){
			var that=this;
			p.imageKey ++;
			//一个循环了，重新回到初始位置
			if(p.imageKey>=(that.sunPlantRunCount+p.key)){
				p.imageKey=p.key;
			}
			p.image = that.imgObj[p.imageKey];
		}
	}

点击卡牌后移动鼠标，向日葵会跟随鼠标移动，移动到田的方形位置，则此块方形的颜色会突出，点击它则会种植下去。

创建豌豆植物

1、与向日葵的创建很相似，就不同的时候向日葵创建的是阳光，豌豆植物创建的是小豌豆，可以攻击僵尸的。

2、子弹在运动的时候、判断是否与僵尸接触，如果接触则执行击中的动画、删除这个子弹、减去僵尸的血量、如果僵尸死亡，则开启僵尸死亡动画，增加积分。

创建

//创建豌豆
	Plants.prototype.createWandou=function(plant){
		var image,img,sx=0,sy=0,sWidth=28,sHeight=28,dx=plant.dx+50,dy=plant.dy,dWidth=28,dHeight=28;
		//绘制时的图片下标
		var startKey=6;
		//方形卡片盘
		image = this.imgObj[startKey];
		var wandou= new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
		this.renderArr2.push(wandou);
		
		wandou.index=plant.index;//给子弹设定行数标示
		
		this.shootMusic.play();//射击音乐
		wandou.timmer = setInterval(wandouMove.bind(this,wandou),100);
 
		function wandouMove(wandou){
			wandou.dx+=10;
			//判断击中僵尸
			var flag = this.hit(wandou);
			if(flag || wandou.dx>850){//击中目标 或者 超出边界
				clearInterval(wandou.timmer);
				if(flag){//击中目标
					//创建子弹击中的图片
					this.hitAnimate(wandou);
					this.hitMusic.play();//击中音乐
				}
				//清除这个子弹
				this.clear(wandou);
				wandou=null;
			}
		}
	}

击中目标

//击中
	Plants.prototype.hit=function(obj){
		var arr = this.zombies;//僵尸对象
		for(var i=0;i<arr.length;i++){
			var item = arr[i];
			if(item.dx<=obj.dx+obj.dWidth && obj.index==item.index ){//子弹的函数标示与僵尸的行数标示也要相等
				item.blood--;
				if(item.blood==0){//消灭这个僵尸
					clearInterval(item.timmer);
					if(item.state=='run'){
						item.imageKey=item.key=item.key+this.zombiesRunCount+this.wandousRunCount;//设置死亡图片下标
					}else if(item.state=='eat'){
						item.imageKey=item.key=item.key-this.sunRunCount-this.zombiesDeadCount;//设置死亡图片下标
					}
					
					item.state='dead';
					this.addCount();//增加积分
					this.dead(item);//死亡动画
					arr.splice(i,1);
				}
				return true;
			}
		}
	}

加入事件控制

        //给canvas2画布添加鼠标移动事件（因为画布2在上面）
		canvas2.addEventListener('mousemove',this.mouseMove.bind(this));
		
		//给canvas2画布添加鼠标点击事件（因为画布2在上面）
		canvas2.addEventListener('click',this.mouseClick.bind(this));
		
		//给canvas2画布添加鼠标右键事件（因为画布2在上面）
		canvas2.addEventListener('contextmenu',this.contextMenu.bind(this));

鼠标移动事件

//鼠标移动事件
	Plants.prototype.mouseMove=function(e){
		var that=this;
		if(that.gameOver) return ;//目前设定的是结束后，要刷新页面才可以开始
		if(!this.startImage) return; //防止没加载完成报错
		var pos = _.getOffset(e);//获取鼠标位置
		var isCatch = this.startImage.isPoint(pos);//鼠标捕捉
		
		if(!isCatch  && this.gameAlive){
			isCatch = this.createZombiesImage.isPoint(pos);//鼠标捕捉
		}
		
		if(!isCatch){
			if(this.gameAlive && !this.currPlant) {//游戏开始，并且没有正在创建的植物的时候可以执行
				//循环卡片背景数组
				for(var i=0;i<this.cardRectArr.length;i++){
					var item=this.cardRectArr[i];
					if(item.isPoint(pos) && item.alive){//鼠标捕捉
						isCatch=true;
						break;
					}
				}
			}
		}
		if(!isCatch){
			//循环太阳数组
			for(var i=0;i<this.suns.length;i++){
				var item=this.suns[i];
				if(item.isPoint(pos)){//鼠标捕捉
					isCatch=true;
					break;
				}
			}
		}
		
		var plant = this.currPlant;
		if(!isCatch){
			if(plant){//创建植物的时候，才出现填入背景框
				//循环田背景数组
				for(var i=0;i<this.bgRectArr.length;i++){
					var item=this.bgRectArr[i];
					if(item.isPoint(pos) && !item.plant){//鼠标捕捉，并且当前没有植物
						isCatch=true;
						item.fillStyle="rgba(0,250,154, 0.5)";
					}else{
						item.fillStyle="rgba(0,250,154, 0)";
					}
				}
			}
		}
		
		if(isCatch){
			this.el.style.cursor = 'pointer';//改为手状形态
		}else{
			this.el.style.cursor = '';
		}
		//表示当前正在创建植物
		if(plant){
			plant.dx=pos.x;
			plant.dy=pos.y;
		}
		
		this.render2();
	}

鼠标点击事件

//鼠标点击事件
	Plants.prototype.mouseClick=function(e){
		if(this.gameOver) return ;//目前设定的是结束后，要刷新页面才可以开始
		var that=this;
		var pos = _.getOffset(e);//获取鼠标位置
		var isCatch = that.startImage.isPoint(pos);//鼠标捕捉
		if(isCatch){
			that.start();
		}
		if(!isCatch && this.gameAlive){
			isCatch = this.createZombiesImage.isPoint(pos);//鼠标捕捉
			if(isCatch){
				that.createZombie();
			}
		}
		if(!isCatch){
			if(this.gameAlive && !this.currPlant) {//游戏开始，并且没有正在创建的植物的时候可以执行
				//循环卡片数组
				for(var i=0;i<this.cardRectArr.length;i++){
					var item=this.cardRectArr[i];
					if(item.isPoint(pos) && item.alive){//鼠标捕捉
						isCatch=true;
						//生成一个新的豌豆苗，跟随鼠标移动
						this.createPlant(pos,item);//创建植物
						break;
					}
				}
			}
		}
		
		if(!isCatch){
			//循环太阳数组
			for(var i=0;i<this.suns.length;i++){
				var item=this.suns[i];
				if(item.isPoint(pos)){//鼠标捕捉
					item.click && item.click();
					break;
				}
			}
		}
		if(!isCatch){
			var plant = this.currPlant;
			if(plant){//正在创建植物
				//循环田背景数组
				for(var i=0;i<this.bgRectArr.length;i++){
					var item=this.bgRectArr[i];
					if(item.plant) continue;//如果当前有植物，则跳过
					if(item.isPoint(pos)){//鼠标捕捉
						isCatch=true;
						plant.dx=item.x+10;
						plant.dy=item.y+20;
						plant.index=item.index;//给plant设置行数
						plant.alive(item);//植物生效
						
						item.plant=true;//表示有植物
						item.fillStyle="rgba(0,250,154, 0)";
						
						this.currPlant=null;
						break;
					}
				}
			}
		
		}	
	}

鼠标右键事件

//右键事件
	Plants.prototype.contextMenu=function(e){
		var e = e||window.event;
			//取消右键默认事件
		e.preventDefault && e.preventDefault();
		if(this.gameOver) return ;//目前设定的是结束后，要刷新页面才可以开始
		if(!this.startImage) return; //防止没加载完成报错
		if(!this.gameAlive)return;
				console.log('oncontextmenu');
		//正在创建的植物删除
		this.delPlant(this.currPlant,1);
		this.currPlant=null;
		//循环田背景数组
		for(var i=0;i<this.bgRectArr.length;i++){
			var item=this.bgRectArr[i];
			item.fillStyle="rgba(0,250,154, 0)";
		}
	}

总结

基本的功能实现了，但是有很多没有实现的功能这里交代一下，确实没有时间去搞了，要上班。。。。。，不能像在座赚了几个亿的大佬一样逍遥自在：

1、结束后必须刷新页面，才能重新开始（”点击开始“按钮）。

2、卡牌支持的作物也比较少，作物也不能用铲子替换。

3、没有过关的感觉、没有车子压僵尸的场景等等（不说了还有好多...）。

如果作为完整的游戏来说，肯定还有很多功能要做、很多地方要完善、其中相当的代码也可以重构；但是如果作为一个练手、学习、思路的分享，我觉得是足够了。

写出来也花了不少时间，能看到这里的都是大佬。

欢迎各位大佬点赞+评论+关注，谢谢！

关注公众号【编程界明世隐】，回复【129】下载源码，同时有更多资料、实例代码、面试技巧奉上！