《cocos2d-js教学课件》3cocos2d-js实例-碰碰糖

Cocos2d-JS实例教程,鲍健运Cocos引擎技术布道师，开发者关系部,功能说明,功能说明,消除类游戏点击消除多个连续的糖果设定5种颜色的糖果同一颜色糖果（至少2个）连在一起时，点击可以同时消除糖果消失后，从正上方生成新的糖果下落补充简单关卡设计：每一关限制玩家在指定步数内获得足够多的分数，关卡越往后，难度越大,新建项目,新建项目,通过Cocos，新建Cocos2d-JS项目，使用WebStorm打开项目，游戏名称自定游戏尺寸720X1280（背景图）糖果居中排列10X10每个糖果尺寸64X64图片名称：1.png,2.png,3.png,4.png,5.png（糖果）bg.png（游戏背景）,新建项目,新建代码：app.js游戏核心GameScene类和GameLayer类，管理糖果的布局和消除逻辑Candy.js继承Sprite，专门用于加载一个糖果图片Constant.js常量列表GameUI.js游戏的UIStorage.js负责游戏的数据存储和读取,新建项目,resource.js,新建项目,main.js,新建项目,project.json,制作糖果,制作糖果,Candy.js扩展Sprite把糖果的加载工作封装起来每个糖果除了基本图片外，还有3个属性：类型（颜色）、列号、行号即function(type,column,row),制作糖果,Candy.js,通过基类的初始化方式，创建糖果的Sprite等价于newcc.Sprite(“res/”+(type+1)+“png”),制作糖果,Candy.js为什么需要type+1？因为糖果的图片是1.png5.png，而type的类型从04便捷的静态方法：,制作糖果,Candy.jsCandy.createRandomType方法：没有var静态方法，即不需要newnewCandy(type,column,row)由Candy的构造函数ctor决定Math.random()生成随机数方法，值（=0,1）Constant.CANDY_TYPE_COUNT糖果的种类数量(5)parseInt转化为数字即第一个参数的含义：随机取数字，值在04，并确保转化为数字类型,制作糖果,Constant.js常量设定,游戏界面,游戏界面,显示当前关卡、当前分数和剩余步数随着玩家的操作，这三个数字会不断变化使用LabelTTFGameUI.js扩展Layer，建立GameUI类,游戏界面,GameUI.jslevelText，scoreText，stepText表示在GameUI这个Layer的扩展类里，创建了以levelText，scoreText，stepText命名的临时变量，初始值为null，即空对象，并未指定类型,游戏界面,app.jsGameLayer显示背景图片运行查看效果，背景图片描绘,游戏界面,GameUI.js使用LabelTTF用于显示信息为了代码清晰，建立私有函数_initInfoPanel来完成信息栏的初始化三个信息除了数字之外，还需要三个标签：“Level”，“Score”，“Step”一共需要建立六个LabelTTF对象_initInfoPanel()，紧跟在ctor方法后写,游戏界面,GameUI.js私有函数_initInfoPanel,游戏界面,GameUI.js私有函数_initInfoPanel续,游戏界面,GameUI.js私有函数_initInfoPanel三个信息显示在屏幕上方，从左到右分别是Level、Score和Step为了更好的显示，设置LabelTTF纵向位置使窗口高度减去固定值的做法。好处：调整屏幕宽和高，只需要修改html和main.js就可以了，不需要逐个界面去调整为了便于后续修改信息，levelText、scoreText和stepText记录到GameUI类的私有属性中（this.levelText=levelText）,游戏界面,GameUI.js需要使用定时器，让信息栏不断刷新可以在构造函数中调用scheduleUpdate实现每帧不断刷新缺点：有点浪费性能，毕竟游戏不是每帧都发生信息变化优点：函数调用不用多写，便于代码实现。而且，信息栏只有3个LabelTTF，刷新消耗极小，是简单的做法解决数据来源：让GameLayer新建GameUI的时候将自身传递进来,游戏界面,GameUI.js,游戏界面,GameUI.js其中，从GameLayer获取当前关卡、分数、剩余步数等信息。这些预先假设GameLayer将有level、score等公共属性,游戏界面,GameUI.js显示胜利结果,游戏界面,GameUI.js显示胜利结果,游戏界面,GameUI.js显示失败结果,游戏界面,GameUI.js显示失败结果,遮罩（ClippingNode）,使用遮罩,app.js创建GameScene，游戏的唯一场景,使用遮罩,app.js创建GameLayerGameLayer中有三层内容：最底下的背景图、中间10X10的糖果矩阵、最上层的GameUI由于糖果矩阵和GameUI会继续访问到，所以在GameLayer中设计两个属性指向这两个内容：使用mapPanel指向糖果矩阵的层，使用ui指向GameUI其他的属性：当前分数score、当前关卡level、已用步数steps、限制步数limitStep、目标分数targetScore,使用遮罩,app.jsGameLayer基本创建,使用遮罩,app.js新建背景,使用遮罩,app.js新建糖果矩阵糖果会超出范围？,使用遮罩,app.js解决糖果超出范围的问题，使用ClippingNode利用遮罩让指定范围内的内容显示，超出范围的内容隐藏方法：1、需要添加内容（各种节点）到遮罩节点上2、给遮罩节点指定一个裁剪的模板，超出裁剪模板的内容将被隐藏需要640X640的正方形模板可以使用DrawNode，可以自由绘制图案，例如长方形、原形、曲线等,使用遮罩,app.js使用ClippingNode：1、新建一个ClippingNode，把其放到屏幕中间（指定起始的x、y坐标，width宽，height高）2、新建一个DrawNode，并利用drawRect方法绘制一个正方形，该正方形正好跟糖果矩阵640X640区域重叠,使用遮罩,app.js使用ClippingNode,使用遮罩,app.js初始化糖果矩阵_init：1、把游戏的核心数据和逻辑数据初始化2、新建10X10个随机糖果并添加糖果到矩阵中额外设计一个二位数组：this.map，逻辑上方便管理所有糖果，通过列号和行号快速索引到某个糖果,使用遮罩,app.js初始化糖果矩阵_init：,使用遮罩,app.js使用ClippingNode糖果矩阵宽高常量Constant.MAP_SIZE糖果图片宽高常量Constant.CANDY_WIDTHConstant.js设置,使用遮罩,app.js新建GameUI对象，添加到GameLayer,使用遮罩,点击消除,点击消除,游戏交互内容的制作需要监听鼠标和触摸事件GameLayer构造函数中添加代码：,点击消除,建立_onMouseDown和_onTouchBegan函数通过鼠标坐标和糖果宽高计算出当前点击的糖果在哪一列哪一行，将画面坐标转化为逻辑的行列,点击消除,_popCandy处理被点击糖果的逻辑算法设计：1、建立一个集合，存储全部相连的糖果。初始时只有被点击的糖果2、遍历集合中的糖果，判断该糖果的上下左右4方向的糖果是否跟该糖果是同一颜色的。如果是，则把旁边的糖果加到数组中。注意：添加前需要检查是否已经存在该集合中3、当遍历完集合的时候，相连的糖果就被找出来了,点击消除,_popCandy处理被点击糖果的逻辑逻辑设计：1、获得集合后，判断糖果个数2、如果只有1个，则不执行消除的动作3、如果大于等于2个，那么就删除这部分糖果，增加已用步数，并计算当前得到的分数4、删除糖果后，再执行生成新糖果的逻辑，同时检查游戏的进度（胜利或失败）5、为了确保糖果补充过程中，玩家不能再次添加，给GameLayer添加属性moving。即moving=true，_popCandy不做处理；当_popCandy执行后，设置moving为true,点击消除,_popCandy代码：,点击消除,检测糖果存在_checkCandyExist,点击消除,_popCandy代码：（续）,补充糖果,补充糖果,糖果的补充都以列为单位1、该列消除了多少糖果2、就会在该列正上方生成多少个新糖果3、落下补充恢复到10X10的糖果矩阵找到每个糖果需要下落距离的算法？,补充糖果,算法设计：1、遍历糖果矩阵的每一列，每列中再从下往上遍历该列的每个糖果2、每列遍历开始时，设置空位计数器为03、如某位置为null，则表示该位置的糖果已被_popCandy删除，此时把该列的空位计数器+1，并在整列的最上方添加一个新随机糖果，并添加到二维数组的该列数据中4、如某位置为糖果，则需安排这个糖果下落。当前空位计数器的数值正好就是该糖果需要下落的距离。设置糖果下落后，需要调整原位置为null，下落到的位置填入该糖果5、当遍历完该列最后一个糖果（包括刚新加的糖果）后，该列的检查工作完成了。需要把超出10的数组位置删除,补充糖果,下落效果，模拟自由落体动作的运动：根据自由落体公式：h=gt2则下落时间：Math.sqrt(2*下落距离/FALL_ACCELERATION)FALL_ACCELERATION设置为30当所有糖果下落完成后，把GameLayer的moving设置为false。可以使用scheduleOnce和_finishCandyFalls函数处理,补充糖果,补充糖果的函数_generateNewCandy的代码：,补充糖果,补充糖果的函数_generateNewCandy的代码：,关卡设计,关卡设计,分数来源：1、消除糖果，假设个数为N，那么分数为NXN2、过关后剩余步数转化为分数。简单处理，这里设置转化分数为剩余步数的30倍,关卡设计,Constant.js设置limitStep是限制步数，targetScore是目标分数,关卡设计,GameLayer的_init中，通过配置获取当前关卡的限制步数和目标分数,关卡设计,每次点击后，添加胜负判断：1、如果分数到达目标分数，则表示玩家已完成任务，显示过关提示，同时把剩余步数转化为分数2、如果分数没有到达目标，而且当前步数已大于或等于限制步数，则表示玩家失败，显示失败提示3、无论失败还是成功，3秒后将切换界面：胜利则进入下一关，失败则重新开始