这篇我们讲讲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函数。
总结
划分区域---->定时创建阳光---->每帧遍历阳光。
下一条讲讲僵尸是怎么创建的。