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

1、Cocos2d-JS 实例教程,鲍健运 高级技术支持工程师，开发者关系部,功能说明,功能说明,消除类游戏 点击消除多个连续的糖果 设定5种颜色的糖果 同一颜色糖果（至少2个）连在一起时，点击可以同时消除 糖果消失后，从正上方生成新的糖果下落补充 简单关卡设计：每一关限制玩家在指定步数内获得足够多的分数，关卡越往后，难度越大,新建项目,新建项目,通过Cocos，新建Cocos2d-JS项目，使用WebStorm打开项目，游戏名称自定 游戏尺寸 720 X 1280 （背景图） 糖果居中排列 10 X 10 每个糖果尺寸 64 X 64 图片名称： 1.png, 2.png, 3.png, 4.p

2、ng, 5.png（糖果） bg.png （游戏背景）,新建项目,新建代码： app.js 游戏核心 GameScene 类和 GameLayer 类，管理糖果的布局和消除逻辑 Candy.js 继承Sprite，专门用于加载一个糖果图片 Constant.js 常量列表 GameUI.js 游戏的UI Storage.js 负责游戏的数据存储和读取,新建项目,resource.js,新建项目,main.js,新建项目,project.json,制作糖果,制作糖果,Candy.js 扩展 Sprite 把糖果的加载工作封装起来 每个糖果除了基本图片外，还有3个属性： 类型（颜色）、列号、行号

3、即 function ( type, column, row ),制作糖果,Candy.js,通过基类的初始化方式，创建糖果的Sprite 等价于new cc.Sprite (“res/” + (type+1) + “png”),制作糖果,Candy.js 为什么需要 type+1 ？ 因为糖果的图片是 1.png 5.png，而type的类型从0 4 便捷的静态方法：,制作糖果,Candy.js Candy.createRandomType 方法： 没有var 静态方法，即不需要new new Candy ( type, column, row) 由Candy的构造函数ctor决定 Math

4、.random() 生成随机数方法，值（=0,1） Constant.CANDY_TYPE_COUNT 糖果的种类数量(5) parseInt 转化为数字 即第一个参数的含义：随机取数字，值在04，并确保转化为数字类型,制作糖果,Constant.js 常量设定,游戏界面,游戏界面,显示当前关卡、当前分数和剩余步数 随着玩家的操作，这三个数字会不断变化 使用LabelTTF GameUI.js 扩展Layer，建立GameUI类,游戏界面,GameUI.js levelText，scoreText，stepText 表示在GameUI这个Layer的扩展类里，创建了以levelText，sco

5、reText，stepText命名的临时变量，初始值为null，即空对象，并未指定类型,游戏界面,app.js GameLayer显示背景图片 运行查看效果，背景图片描绘,游戏界面,GameUI.js 使用LabelTTF用于显示信息 为了代码清晰，建立私有函数_initInfoPanel来完成信息栏的初始化 三个信息除了数字之外，还需要三个标签： “Level”，“Score”，“Step” 一共需要建立六个LabelTTF对象 _initInfoPanel()，紧跟在ctor方法后写,游戏界面,GameUI.js 私有函数_initInfoPanel,游戏界面,GameUI.js 私有函数

6、_initInfoPanel 续,游戏界面,GameUI.js 私有函数_initInfoPanel 三个信息显示在屏幕上方，从左到右分别是Level、Score和Step 为了更好的显示，设置LabelTTF纵向位置使窗口高度减去固定值的做法。 好处：调整屏幕宽和高，只需要修改html和main.js就可以了，不需要逐个界面去调整 为了便于后续修改信息，levelText、scoreText和stepText记录到GameUI类的私有属性中（this.levelText = levelText）,游戏界面,GameUI.js 需要使用定时器，让信息栏不断刷新 可以在构造函数中调用schedu

7、leUpdate实现每帧不断刷新 缺点：有点浪费性能，毕竟游戏不是每帧都发生信息变化 优点：函数调用不用多写，便于代码实现。而且，信息栏只有3个LabelTTF，刷新消耗极小，是简单的做法 解决数据来源：让GameLayer新建GameUI的时候将自身传递进来,游戏界面,GameUI.js,游戏界面,GameUI.js 其中，从GameLayer获取当前关卡、分数、剩余步数等信息。这些预先假设GameLayer将有level、score等公共属性,游戏界面,GameUI.js 显示胜利结果,游戏界面,GameUI.js 显示胜利结果,游戏界面,GameUI.js 显示失败结果,游戏界面,Gam

8、eUI.js 显示失败结果,遮罩（ClippingNode）,使用遮罩,app.js 创建GameScene，游戏的唯一场景,使用遮罩,app.js 创建GameLayer GameLayer中有三层内容： 最底下的背景图、中间10 X 10的糖果矩阵、最上层的GameUI 由于糖果矩阵和GameUI会继续访问到，所以在GameLayer中设计两个属性指向这两个内容： 使用mapPanel指向糖果矩阵的层，使用ui指向GameUI 其他的属性：当前分数score、当前关卡level、已用步数steps、限制步数limitStep、目标分数targetScore,使用遮罩,app.js Game

9、Layer基本创建,使用遮罩,app.js 新建背景,使用遮罩,app.js 新建糖果矩阵 糖果会超出范围？,使用遮罩,app.js 解决糖果超出范围的问题，使用ClippingNode 利用遮罩让指定范围内的内容显示，超出范围的内容隐藏 方法： 1、需要添加内容（各种节点）到遮罩节点上 2、给遮罩节点指定一个裁剪的模板，超出裁剪模板的内容将被隐藏 需要640 X 640的正方形模板 可以使用DrawNode，可以自由绘制图案，例如长方形、原形、曲线等,使用遮罩,app.js 使用ClippingNode： 1、新建一个ClippingNode，把其放到屏幕中间 （指定起始的x、y坐标，wid

10、th宽，height高） 2、新建一个DrawNode，并利用drawRect方法绘制一个正方形，该正方形正好跟糖果矩阵640 X 640区域重叠,使用遮罩,app.js 使用ClippingNode,使用遮罩,app.js 初始化糖果矩阵_init： 1、把游戏的核心数据和逻辑数据初始化 2、新建10 X 10个随机糖果并添加糖果到矩阵中 额外设计一个二位数组：this.map，逻辑上方便管理所有糖果，通过列号和行号快速索引到某个糖果,使用遮罩,app.js 初始化糖果矩阵_init：,使用遮罩,app.js 使用ClippingNode 糖果矩阵宽高常量Constant.MAP_SIZE

11、糖果图片宽高常量Constant.CANDY_WIDTH Constant.js 设置,使用遮罩,app.js 新建GameUI 对象， 添加到 GameLayer,使用遮罩,点击消除,点击消除,游戏交互内容的制作 需要监听鼠标和触摸事件 GameLayer构造函数中添加代码：,点击消除,建立_onMouseDown和_onTouchBegan函数 通过鼠标坐标和糖果宽高计算出当前点击的糖果在哪一列哪一行，将画面坐标转化为逻辑的行列,点击消除,_popCandy处理被点击糖果的逻辑 算法设计： 1、建立一个集合，存储全部相连的糖果。初始时只有被点击的糖果 2、遍历集合中的糖果，判断该糖果的上下

12、左右4方向的糖果是否跟该糖果是同一颜色的。如果是，则把旁边的糖果加到数组中。注意：添加前需要检查是否已经存在该集合中 3、当遍历完集合的时候，相连的糖果就被找出来了,点击消除,_popCandy处理被点击糖果的逻辑 逻辑设计： 1、获得集合后，判断糖果个数 2、如果只有1个，则不执行消除的动作 3、如果大于等于2个，那么就删除这部分糖果，增加已用步数，并计算当前得到的分数 4、删除糖果后，再执行生成新糖果的逻辑，同时检查游戏的进度（胜利或失败） 5、为了确保糖果补充过程中，玩家不能再次添加，给GameLayer添加属性moving。即moving=true，_popCandy不做处理；当_po

13、pCandy执行后，设置moving为true,点击消除,_popCandy 代码：,点击消除,检测糖果存在_checkCandyExist,点击消除,_popCandy 代码：（续）,补充糖果,补充糖果,糖果的补充都以列为单位 1、该列消除了多少糖果 2、就会在该列正上方生成多少个新糖果 3、落下补充恢复到10 X 10的糖果矩阵 找到每个糖果需要下落距离的算法？,补充糖果,算法设计： 1、遍历糖果矩阵的每一列，每列中再从下往上遍历该列的每个糖果 2、每列遍历开始时，设置空位计数器为0 3、如某位置为null，则表示该位置的糖果已被_popCandy删除，此时把该列的空位计数器+1，并在整列

14、的最上方添加一个新随机糖果，并添加到二维数组的该列数据中 4、如某位置为糖果，则需安排这个糖果下落。当前空位计数器的数值正好就是该糖果需要下落的距离。设置糖果下落后，需要调整原位置为null，下落到的位置填入该糖果 5、当遍历完该列最后一个糖果（包括刚新加的糖果）后，该列的检查工作完成了。需要把超出10的数组位置删除,补充糖果,下落效果，模拟自由落体动作的运动： 根据自由落体公式：h = gt2 则下落时间： Math.sqrt(2*下落距离/FALL_ACCELERATION) FALL_ACCELERATION设置为30 当所有糖果下落完成后，把GameLayer的moving设置为fal

15、se。可以使用scheduleOnce和_finishCandyFalls函数处理,补充糖果,补充糖果的函数_generateNewCandy的代码：,补充糖果,补充糖果的函数_generateNewCandy的代码：,关卡设计,关卡设计,分数来源： 1、消除糖果，假设个数为N，那么分数为N X N 2、过关后剩余步数转化为分数。 简单处理，这里设置转化分数为剩余步数的30倍,关卡设计,Constant.js设置 limitStep是限制步数，targetScore是目标分数,关卡设计,GameLayer的_init中，通过配置获取当前关卡的限制步数和目标分数,关卡设计,每次点击后，添加胜负判断： 1、如果分数到达目标分数，则表示玩家已完成任务，显示过关提示，同时把剩余步数转化为分数 2、如果分数没有到达目标，而且当前步数已大于或等于限制步数，则表示玩家失败，显示失败提示 3、无论失败还是成功，3秒后将切换界面：胜利则进入下一关，失败