PVZ系列一 | 太阳

这篇我们讲讲PVZ中是如何实现太阳的行为的。

效果预览

• 左上角显示阳光值。
• 每隔三秒在随机一列自动生成一个太阳。
• 太阳缓缓下落，到达随机一行便停下。
• 停下后缓缓消失。
• 期间点击太阳，阳光值增加50，太阳消失。

实现过程详解

初始化界面

//
// 游戏区域设置，创建用来存储植物和僵尸信息的数组
//
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();
}
//
//main函数
//
main();
function main(){
	setupField();
	drawField();
}

现在，我们就获得了这样的东西↓

一个5×9的二维数组（表示格子），以及左上角的金钱显示框。
还有就是舞台上的各个容器，而我们的太阳，接下来都会把它放到太阳容器（sunContainer）里面。

每隔一段时间生成一个太阳

//
// 初始化太阳
//
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);// 给阳光注册点击事件
}

现在我们只需要把fallingSuns()函数加入到main()函数里运行，每隔三秒钟便会有一个太阳生成，虽然它还不会下落。如图↓

让太阳动起来

现在我们要创建一个每一帧都会运行一次的函数。
在这个函数里我们要遍历所有sunContainer中的太阳，判断它是否到达了目标点。

function onEnterFrm(){
	var i;
	//
	// 阳光管理
	//
	for (i=0; i<sunContainer.numChildren; i++) {
		var fallingSun = sunContainer.getChildAt(i);
		// 阳光下落
		if (fallingSun.y<fallingSun.destinationY) {
			fallingSun.y++;// 接着下落
		} else {
			fallingSun.alpha-=0.01;// 落完逐渐消失
			// 阳光消失了
			if (fallingSun.alpha<0) {
				fallingSun.removeEventListener("click",sunClicked);
				sunContainer.removeChild(fallingSun);// removes the sun
			}
		}
	}//for
}

而此时，我们的mani()函数变成了这样↓

main();
function main(){
	setupField();
	drawField();
	fallingSuns();
	stage.addEventListener("tick",onEnterFrm);
}

对stage添加了一个tick监听事件，每一帧都会执行onEnterFrm函数。

总结

划分区域---->定时创建阳光---->每帧遍历阳光。
下一条讲讲僵尸是怎么创建的。