Quick-Cocos2d-x-3.2中示例Coinfilp总结（二）

这里具体分析实例中某些功能的实现：

一，信息条的添加（AdBar.lua文件）

function AdBar.new()                --一个进行二次封装的精灵，目的是方便代码的复用，而且方便外部调用，    local sprite = display.newSprite("#AdBar.png")<span style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, STheiti, Arial, Tahoma, 微软雅黑, sans-serif, serif; font-size: 14.44444465637207px; line-height: 27.77777862548828px;">if判断语句，如果params.prepare 为空则不会执行</span>    sprite:align(display.BOTTOM_CENTER, display.cx, display.bottom)    return spriteendreturn AdBar--这里当调用new（）时，将自动创建并返回一个设置好精灵帧   ，  锚点   ，  x坐标   ，y坐标  的精灵屏幕底部的

 

二，泡沫按钮的添加（BubbleButton.lua文件）BubbleButton气泡按钮传入四个参数image，sound，prepare和listener（这俩可看做一个）

这段代码主要做了四个工作：

（一），创建一个PushButton（按钮），根据从MenuScene.lua中调用的new方法（后面都用new方法来表示）传过来的image参数为按钮设置normal（没按）状态下的图片

（二），将new方法中传入的回调函数listener用本地变量listener保存（不建议用同名保存）， 因为下一步要重新定义params.listener的执行内容（设置泡沫效果），但是泡沫效果执行之后仍然要执行原本listener方法中跳转到其他场景的方法。所以保存起来到后面调用。

（三），重定义参数params.listener的执行内容，即实现气泡功能

1，if语句判断，如果params.prepare为空，则不执行。也就是说这个prepare元素不是必填项，更通俗点就是，如果new方法中不设置播放音效内容的话，可以忽略，没必要非得加点击按钮时的音效；

2，定义两个本地函数zoom1，zoom2.各自包含moveTo和scaleTo方法。

3，button:setButtonEnabled(false)，设置按钮的点击功能无效，防止在还没做完动作又被玩家点上该按钮。

4，zoom1，zoom2之间通过回调函数，使动作连续。根据此实例中的数据。第一组zoom1和zoom2的调用，实现：向下移，变扁；上移，变圆（即变回原来位置和状态）。然后继续回调第二组。由于偏移量变小：微下移，微扁；复原。这样形成了气泡一样弹动的效果

5，button:setButtonEnabled(true)                               效果结束后开启按钮功能
                        listener(tag)                                               最后调用本地变量listener保存的原来的方法（这个是真正效果，即跳转到下一场景）

   （四）， button:onButtonClicked(function(tag)                       --设置按钮的点击响应事件
        params.listener(tag)                                  --点击后，执行我们重定义的listener方法，即点击时，有按钮像泡沫浮动的视效
    end) 

三，等级列表的建立

1，cc.rect创建一个矩形，这个即是列表框，里面属性分别是四个坐标（左，下，右，上）；

2，调用LevelList的构造方法 （查看LevelList.lua文件）

（1）LevelsList.super.ctor      先执行父类PageControl的定义方法PageControl:onTouchEndedWithoutTap(x, y) 

这里重写了其父类ScrollView触摸时未点击到button时的onTouchEndedWithoutTap(x, y)函数，  该函数会根据偏移量设置翻到的那一页的页数index和其x，y坐标；

最后调用父类ScrollView的scrollToCell(index, true) 方法， 这个函数中对index进行了判断和处理，设置当前页数，根据滚动方向设置偏移量，

最后调用ScrollView类的setContentOffset方法（根据偏移量进行判断然后设置moveTo的x，y坐标进行翻页动作），并添加事件scrollToCell

如图所示：  

这就是LevelList中第一句话LevelsList.super.ctor(self, rect, PageControl.DIRECTION_HORIZONTAL)    所实现的内容 ~~~

（2）添加7个cell，并添加事件监听onTapLevelIcon

（3），添加指示灯

（4），重写scrollToCell方法，添加指示灯的动作效果，里面首先也要先执行祖父类ScrollView里的scrollToCell方法，然后根据动作参数执行moveTo，实现指示灯随翻页

而移动。

（5），定义函数onTapLevelIcon, 委派事件onTapLevelIcon，使点击图标时委派这样一个事件

OK，第二句话到此结束~~

3，监听事件，调用自身onTapLevelIcon方法

结合上面2（5），点击图标委派一个事件，然后这里监听到这个事件后执行对应的方法，这里方法内执行这两句：

audio.playSound(GAME_SFX.tapButton)                   --播放音效

  app:playLevel(event.levelIndex)        --app==MyApp，打开MyApp.lua，里面有个MyApp:playLevel(levelIndex)方法，执行会跳转到对应关卡的PlayLevelScene

这样，就实现了点击关卡按钮进入对应关卡数的游戏场景~~

4，添加这个等级列表到容器中  

到此，等级列表建立好了~~~

四，硬币板的建立（Board.lua）游戏内容核心和玩法都集中在这儿                                     引入Levels和Coin这两个自定义类

1，levels建立了100关的硬币布局的数组，local levelsData = {}；

Levels.NODE_IS_WHITE  = 1                     --正面，金色面 （white，白色）
Levels.NODE_IS_BLACK  = 0                     --反面，银色面。。。。不要在乎这些细节（black，黑色）
Levels.NODE_IS_EMPTY  = "X"                   --空，表示没有硬币

2，Coin

（1），建立硬币精灵图片。根据Board传入的nodeType的值判断。0时，建立反面银色硬币；1时，建立正面金色硬币；index=8，代表反面  ：硬币图片为Coin0001到Coin0008。（以传入参数决定决定index的值，再已index的值创建精灵，最后继续依靠index的值决定sprite.isWhite此属性。）

（2），定义flip函数，执行硬币翻转特效            创建精灵帧数组，并以此播放动画；添加翻转时的缩放动作

--action【1】，0.04，x方向1.1倍，y方向不变；action【1】，0.04，x方向复原，y方向1.1倍。 放大
--action【2】，0.032，x方向1.1*0.95，y不变；action【2】，0.032，x方向复原，y方向1.1*0.95. 此后缩小
--以此类推。。。
--8个精灵帧，翻转动作要翻7次。                            
    --cc.ScaleTo:create(0.15, 1.5)             第一次
    --cc.ScaleTo:create(0.1, 1.0)
    --cc.CallFunc:create(function()中for循环进行5次翻转，
    --时间越来越小，for循环第一次（实际第二次）放大，
    --for循环第二次（实际第三次）翻转开始缩小，第5次比例0.85左右
    --actions[#actions + 1] = cc.ScaleTo:create(0, 1.0, 1.0)   --action【6】，时间0，不缩放
    --此为实际第7次，这次翻转后为最终状态，所以缩放比例为1

（3），翻转硬币后

self.isWhite = not self.isWhite          --反转这个属性。改变硬币状态

3，直接上图将讲吧~

*关于Board构造方法中放置硬币，坐标的确定，因为使用批量渲染对象，该坐标为相对坐标   

x = col * NODE_PADDING + offsetX        行数*边长+起始x坐标                      起始x坐标为-250，原因如下图：

                                                                                                  

剩下没什么了吧。。。