使用Quick-Cocos2d-x开发植物大战僵尸04-展示植物卡片与僵尸

上一篇我们讲了加载场景的实现，现在我们来说说主菜单场景的实现，主菜单场景中我们知道有“关于”、“选项”、“帮助”、“退出”、“开始游戏”这一些按钮，在这里我们就讲开始游戏的按钮的创建与功能回调，其余的就不说了（一通百通嘛！聪明的小伙伴们肯定能够子自己搞定的啦啦），我们再src/sceces下创建一个MenuScene类，在里面添加一个开始游戏按钮，点击之后跳到主游戏场景久OK啦！代码如下

local MenuScene = class("MenuScene",function()
return display.newScene("MenuScene")
end)


function MenuScene:ctor()
-- 背景图片
local bgSpr=display.newSprite("menu/main_menu_bg.jpg")
:pos(display.cx, display.cy)
:addTo(self)
-- 开始游戏按钮 这里使用cc.ui.UIPushButton创建按钮
local startBtn=cc.ui.UIPushButton.new({
-- 默认显示图片
normal="menu/start_adventure_default.png",
-- 按下显示图片
pressed="menu/start_adventure_press.png"
})
:pos(display.width/4*3-30, display.cy-25)
-- 回调函数
:onButtonClicked(function()
-- 跳转到主游戏场景
app:enterScene("MainScene",nil,"crossFade",0.5)
end)
:addTo(self)
startBtn:setScale(0.6)
end


return MenuScene

我们主要看看来看看我们这个游戏中最难的一个场景，大部分逻辑都会在这个场景中类实现，同样的我们先在src/sceces下创建一个MainScene类，我们先来实现把前面编辑好的瓦片地图添加到场景中，然后地图向左移动到边缘，展示僵尸，把可以任玩家选择的植物卡片面板给创建并添加到场景中来，具体和我一起看代码：

因为要用到僵尸和植物卡片，所以我们会在MainScene文件中导入植物卡片类PlantCard和普通僵尸类NormalZombies，

local NormalZombies = require("app.zombies.NormalZombies")

local PlantCard = require("app.Card.PlantCard")

这两个类的内容也比较多，所以我们留到后面的章节再来细讲这些类的实现，现在我们只需要知道有这样的两个类就行了

因为使用卡片是需要消耗能量的，我把向能量这种东西的数据写到一个数据层DataLayer中，我们来看看DataLayer.lua文件

在src/app/layers下创建DataLayer.lua文件，这个类也比较简单，只有一个能量数据，代码如下：

----------------------------------------------DataLayer.lua文件开始----------------------------------------------

local DataLayer = class("DataLayer", function()
return display.newLayer()
end)
--构造函数的参数是玩家所持有的能量数
function DataLayer:ctor(current_energy)
-- 不屏蔽事件
self:setTouchSwallowEnabled(false)
-- 玩家所持有的能量
self.energy=current_energy
-- 显示能量数据的label
self.energyLab=display.newTTFLabel({
text=self.energy,
font="fonts/arial.ttf",
size=10,
color=cc.c3b(255, 0, 0)
})
:pos(17, display.height-32)
:addTo(self)
end
-- 能量增加
function DataLayer:addEnergy(energy)
self.energy=self.energy+energy
self.energyLab:setString(self.energy)
end
-- 能量减少
function DataLayer:loseEnergy(energy)
self.energy=self.energy-energy
self.energyLab:setString(self.energy)
end


return DataLayer

----------------------------------------------DataLayer.lua文件结束----------------------------------------------

----------------------------------------------MainScene.lua文件开始----------------------------------------------

--普通僵尸类

local NormalZombies = require("app.zombies.NormalZombies")

--植物卡片类
local PlantCard = require("app.Card.PlantCard")

--数据类 
local DataLayer = require("app.layers.DataLayer")

--主场景
local MainScene = class("MainScene", function()
    return display.newScene("MainScene")
end)


function MainScene:ctor()
-- 创建瓦片地图
self.map=cc.TMXTiledMap:create("fight_map.tmx")
:addTo(self)
-- 我的植物方框 用来存放我所拥有的植物
local myPlantWindow=display.newSprite("fight/chose/fight_chose.png")
:align(display.LEFT_TOP,0, display.height)
:addTo(self)
-- 这是tag，方便后面获取
myPlantWindow:setTag(MY_PLANT_WINDOW_TAG)
myPlantWindow:setScale(0.5)
-- 通过:创建对象，self会隐式的作为函数的第一个参数传递给构造函数，.则不会
self.dataLayer=DataLayer.new(500)
:addTo(self)
-- 对战前，存放用来显示的僵尸
self.showZombiesList={}
-- 存放玩家选择的植物卡片
self.myPlants={}
-- 存放能被选择的植物卡片
self.canChooseplants={}
-- 添加展示用的僵尸
self:addShowZombies()
-- 显示植物选择窗口
self:showChooseWindow()
end

function MainScene:addShowZombies()
-- 从我们的瓦片地图中通过对象组的名字获取到对象组ObjectGroup，通过对象组获取对象组中的所有对象，返回一个数组
local objects=self.map:getObjectGroup("zombies"):getObjects()
-- 遍历这个数组
for i=1,#objects do
-- 获取对象 其实对象的本质是一个HashMap 键值对的集合体 存放这一些属性信息，可以是自定义的，通过属性名，也就是key，可以获取相应的数据
local object = objects[i]
-- 如果对象存在
if object then
-- 对象所在的x坐标
local x=object["x"]
-- 对象所在的y坐标
local y=object["y"]
-- 创建僵尸对象 并添加到地图上
local normalZombies=NormalZombies.new()
:pos(x,y)
:addTo(self.map)
-- 将展示的僵尸添加到tabel中，方便后期清除
table.insert(self.showZombiesList,normalZombies)
end
end
end

function MainScene:showChooseWindow()
-- 地图平移的距离
local distance=self.map:getContentSize().width-display.width
-- 地图平移过去之后，展示僵尸
self.map:runAction(cc.Sequence:create(cc.MoveBy:create(1.0,cc.p(-distance,0)),cc.CallFunc:create(function()
-- 获取玩家植物面板
local myPlantWindow=self:getChildByTag(MY_PLANT_WINDOW_TAG)
-- 创建植物选择面板
local choosePlantWindow=display.newSprite("fight/chose/fight_choose.png")
   :align(display.LEFT_TOP,0, display.height-myPlantWindow:getContentSize().height*0.5)
   :addTo(self)
   -- 创建选择完毕按钮
   local startBtn=cc.ui.UIPushButton.new({
    normal="fight/chose/fight_start.png"
    })
   :align(display.RIGHT_TOP,choosePlantWindow:getContentSize().width, display.height-myPlantWindow:getContentSize().height*0.5-choosePlantWindow:getContentSize().height)
   :addTo(self)
   -- 选择完毕按钮回调
   startBtn:onButtonClicked(function()

                   print("选择玩植物，开始对战");

   end)
   -- 添加被选择卡牌
   self:addCanChoosePlant()
end)))
end

function MainScene:addCanChoosePlant()
local row=0
-- 总共有九种类型的植物
for i=1,9 do
-- 通过植物类型创建卡片 PLANT_TYPES是卡片类型数组，在config.lua中配置
local plant=PlantCard.new(PLANT_TYPES[i])
:align(display.LEFT_TOP, 15+57*((i-1)%4), 260-(row*56))
:addTo(self)
if i%4==0 then
row=row+1
end
-- 被选择卡片的初始化
plant:init()
-- 将可以被选择的卡片放到canChooseplants数组中
table.insert(self.canChooseplants,plant)
end
end

----------------------------------------------MainScene.lua结束----------------------------------------------

现在我们待加载页面加载完成之后，点击开始游戏，可以看到

这一篇就先讲到这里，下一篇我们来看看植物卡片类应该具有哪些功能，以及应该怎么去实现它。