妈妈！我也会做植物大战僵尸啦！

写在前面

本文参考了课程先辈留下来的报告，在前人的基础上进行了代码框架和逻辑的整合，希望对大家有所帮助！

会实现PVZ的哪些功能？

PVZ逻辑示意图

1. 阳光逐渐下落、触地逐渐消失
2. 僵尸随机出现在某一行并向前移动
3. 僵尸判断当前格子有无植物，并吃掉
4. 点击豌豆卡片、选择豌豆、将豌豆种下
5. 豌豆判断当前行、右边是否有僵尸，并射击

准备素材

开始前，先将所需的素材拖入An的库中，并为每个素材创建链接。

这是我们这个demo所需的所有素材，现在来详细讲讲：

1. plantMc：这是我们最终种下的植物的样子（前后摇摆的豌豆）
2. selectorMc：直译意思是选择器，就是我们决定把植物种在某个格子内时会出现的影子
3. sunMc：太阳的样子
4. bulletMc：子弹的样子
5. zombieMc：僵尸的样子
6. plantMovingMc：选择卡片后我们拖动的植物的样子
7. peaShooter：豌豆的卡片

功能模块拆分实现

这个demo不是很难！大家冲鸭！！
下面将用朴实的语言来描述各个功能以及其代码实现。建议大家在看下面内容之前概览一下
PVZ逻辑示意图
以清晰的知道每一步处于框架中的哪个位置。

看看主函数

首先我们来看看Main函数中包含什么。

1. steupField()：游戏区域设置，并初始化，即创建一个5×9的数组
2. drawField()：将各个容器添加到舞台，创建金钱显示区域
3. addZombies()：每隔一段时间创建一个僵尸，放置在屏幕右边外侧
4. addPlants()：创建一个植物卡片，在卡片上添加点击侦听事件
5. fallingSuns()：每隔一段时间创建一个太阳
6. stage.addEventListener(“tick”,onEnterFrm)：遍历植物->存储子弹->遍历子弹，遍历僵尸，遍历太阳

初始化一些变量

不妨先把背景图在An中放入舞台，试一试图片大小，量一下相关尺寸。

var plantsArray = new Array()//种植下的植物数组
var zombiesArray = new Array();//出现的僵尸数组
//
//行高和列宽
//
var gridHeight = 115;
var gridWidth = 95;
var borderTop = 110;//bordertop
var borderLeft = 320;//borderleft
//
// 容器
//
var sunContainer = new cjs.Container();// 阳光容器
var plantContainer = new cjs.Container();// 植物容器
var bulletContainer = new cjs.Container();// 子弹容器
var zombieContainer = new cjs.Container();// 僵尸容器
var overlayContainer = new cjs.Container();// 覆盖物容器
//
// 种植物会用到的
//
var movingPlant;// 拖动中的植物
var selector;// 选择器（影子）
//
// 其他
//
var money = 100;// 金钱总量
var moneyText = new cjs.Text("Money:"+money,"50px Times","#000000")  ;// 动态文本框，用来显示玩家的金钱
var playerMoving = false;// 标志玩家是否在移动一个植物
var totalZombies = 0;

接下来，我们就要用这些变量做一些事情了！

初始化区域 setupField()和drawField()

//
// 游戏区域设置，创建用来存储植物和僵尸信息的数组
//
function setupField(){
   

	for (var i = 0; i < 5; i++) {
   
		plantsArray[i] = new Array();
		zombiesArray[i] = new Array();
		for (var j=0; j<9; j++) {
   
			plantsArray[i][j] = 0;
		}
	}
}

//
// 画出游戏区域
//
function drawField(){
   
	stage.addChild(sunContainer);
	stage.addChild(plantContainer);
	stage.addChild(bulletContainer);
	stage.addChild(zombieContainer);
	stage.addChild(overlayContainer);
	//Container前不能加stage.
	overlayContainer.addChild(moneyText);
	updateMoney();
	moneyText.textColor = 0x000000;
	moneyText.height=20;
}
//
// 更新显示阳光值
// 每次变量money发生变化时都要记得更新
//
function updateMoney(){
   
	moneyText.text = money.toString();
}

此时，我们就拥有了土地和钱，虽然它们现在看不到摸不着。

造僵尸！

创建一个计时器，每隔3000ms会让newZombie()这个函数执行一次。

//
// 初始化僵尸
//
function addZombies(){
   
	var zombieTimer = setInterval(newZombie, 3000);
}

//
// 增加一个新的僵尸
//
function newZombie(TimerEvent){
   
	var zombie = new lib.zombieMc();// 构造僵尸
	totalZombies++;
	zombieContainer.addChild(zombie);// 添加僵尸
	zombie.zombieRow=Math.floor(Math.random()*5);// 随机行数
	zombie.name="zombie_"+totalZombies;//僵尸取名
	zombiesArray[zombie.zombieRow].push(zombie.name);// 增加第row行的僵尸
	zombie.x=1000;// 把僵尸放在屏幕的右边
	zombie.y=zombie.zombieRow*gridHeight+borderTop;//把僵尸放到对应的行上
}

这样，每隔一会儿我们就会得到一只停在原地的僵尸。
接下来，我们会在每一帧遍历僵尸，让他们走动起来或者吃东西。

种太阳！

//
// 初始化太阳
//
function fallingSuns(){
   
	var fallingSunsTimer = setInterval(newSun, 3000);
}
//
// 增加一个新的阳光
//
function newSun(){
   
	var sunRow=Math.floor(Math.random()*5);// 随机行
	var sunCol=Math.floor(Math.random()*9);// 随机列
	var sun = new lib.sunMc();// 构造太阳
	sun.mouseChildren = false;//让整个太阳影片剪辑成为一个整体
	sun.buttonMode = true;// 当鼠标滑过阳光时，改变鼠标的形状
	sunContainer.addChild(sun);// 添加
	sun.x=borderLeft + sunCol*gridWidth;// 把太阳放在对应的列上
	sun.destinationY = borderTop+sunRow*gridHeight;// definines the sun y destination point
	sun.y=20;// 把阳光放在舞台顶部的上方
	sun.addEventListener("click",sunClicked);// 给阳光注册点击事件
}

注意sun.mouseChildren = false这句话，他很重要。
种太阳的逻辑和生成僵尸一样。
不同的是，我们要给太阳添加鼠标点击事件。

//
// 点击阳光
//
function sunClicked(event){
   
	var sunToRemove = event.target;//获得被点击的太阳
	sunToRemove.removeEventListener("click",sunClicked);// removes the CLICK listener
	money += 50;// makes the player earn money (5)
	updateMoney();// updates money text
	//console.log("sunClicked! ");
	sunContainer.removeChild(sunToRemove);// 移除
}

好的，现在我们每隔一段时间就会有一个不会动的太阳生成。
后面要在每帧中遍历太阳，让他们下落，或者逐渐消失。

种豌豆

种下植物的逻辑有些不一样，我们来捋一下。
首先在舞台上要有一个卡片让我们选择，并且这个卡片具有一个点击侦听。
点击后会执行onPlantClicked()。

//
// 创建一个植物栏，现在只有一种植物
//
function addPlants(){
   
	var card_peaShooter = new lib.peaShooter()