PVZ系列二 | 植物

这回我们来看看植物是怎么结合阳光种下的。
注意，这里只是种下，攻击的子弹将会在另一篇中呈现。

效果预览

• 界面上有一个豌豆卡片让我们选择
• 点击卡片后扣钱，并产生一个拖动的豌豆
• 鼠标在格子中时，会产生一个植物的预览
• 点击后植物被种下

实现过程详解

初始化

这里初始化和前面生成太阳一样。

界面上有一个豌豆卡片

我们在addPlants()函数中添加卡片。
并把它添加到main()函数中。

//
// 创建一个植物栏，现在只有一种植物
//
function addPlants(){
	var card_peaShooter = new lib.peaShooter();// 构造一株新的植物
	overlayContainer.addChild(card_peaShooter);// 增加植物
	card_peaShooter.buttonMode=true;// 鼠标滑过改变形状
	card_peaShooter.x = 60;
	card_peaShooter.y = 60;
	card_peaShooter.addEventListener("click",onPlantClicked);// 植物选择区域注册点击事件
}

效果如下。

现在我们点击卡片后，就会执行一次onPlantClicked()函数。
onPlantClicked()函数的定义如下↓

//
// 选择植物卡片
//
function onPlantClicked(){
	// 检查玩家是否有足够的钱来购买植物，并且是否正在拖动一个植物
	if (money >= 100&&! playerMoving) {
		money -= 100;// pays the plant
		updateMoney();// updates money text
		selector = new lib.selectorMc();// 创建一个新的选择器
		selector.visible = false;// 使选择器不可见
		overlayContainer.addChild(selector);// 把选择器加入到显示列表
		movingPlant = new lib.plantMovingMc();// 构建一个供玩家拖动的植物
		movingPlant.addEventListener("click",placePlant);// 给拖动的植物注册点击事件
		overlayContainer.addChild(movingPlant);//把该植物加入到显示列表
		playerMoving = true;//告诉脚本正在移动一株植物
	}
}

现在点击卡片后，将会产生一个用来“拖动的植物”和一个“植物预览”（不可见）。
两者产生默认都在stage的原点，所以接下来我们要在每一帧中让他们跟随鼠标。
仔细看代码中的这个变量 playerMoving ，我们会根据这个变量告诉脚本现在有没有需要拖动的东西。
写完拖动我们再写点击拖动植物后会发生的事件。

拖动植物（这个我们在放大镜里面学过的！）

    //
	// 植物放置
	//
	if (playerMoving) {
		movingPlant.x=stage.mouseX;
		movingPlant.y=stage.mouseY;
		var plantRow=Math.floor((stage.mouseY-borderTop)/gridHeight);
		var plantCol=Math.floor((stage.mouseX-borderLeft)/gridWidth);
		//console.log("plantRow:"+plantRow);
		//console.log("plantCol:"+plantCol);
		// 鼠标在区域内
		if (plantRow>=0&&plantCol>=0&&plantRow<5&&plantCol<9) {
			selector.visible = true;// shows the selector
			selector.x=borderLeft+plantCol*gridWidth+30;
			selector.y=borderTop+plantRow*gridHeight+30;
		} else {
			selector.visible=false;// hide the selector
		}
	}

好的，现在拖动的植物会跟随鼠标啦！
下面写点击拖动的植物后发生的事情。

种下植物

//
// 放置植物
//
function placePlant(){
	
	var plantRow=Math.floor((stage.mouseY-borderTop)/gridHeight);
	var plantCol=Math.floor((stage.mouseX-borderLeft)/gridWidth);
	// 判断鼠标是否在放置区域内部并且上面没有植物
	if (plantRow>=0&&plantCol>=0&&plantRow<5&&plantCol<9&&plantsArray[plantRow][plantCol]==0) {
		var placedPlant=new lib.plantMc();// 构建一株植物，用来种植
		placedPlant.name="plant_"+plantRow+"_"+plantCol;// 给植物一个名字
		placedPlant.fireRate=48;//  植物的开火速率，单位帧
		placedPlant.recharge=48;// 当recharge 等于 fireRate时，植物已经准备好开火了
		placedPlant.plantRow=plantRow;// plant row
		plantContainer.addChild(placedPlant);// adds the plant
		placedPlant.x=plantCol*gridWidth+borderLeft+30;
		placedPlant.y=plantRow*gridHeight+borderTop+30;
		playerMoving=false;// tells the script the player is no longer moving
		movingPlant.removeEventListener("click",placePlant);// removes the CLICK listener from the draggable plant
		overlayContainer.removeChild(selector);// removes the selector
		overlayContainer.removeChild(movingPlant);// removes the plant itself
		plantsArray[plantRow][plantCol]=1;// 更新游戏区块信息
	}
}

好啦！现在我们可以点击种下植物了！

总结

结合上期的太阳，现在我们可以收集太阳种豌豆了！！！

下一篇讲讲怎么生成僵尸并且让僵尸吃菜。