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

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

2、游戏核心 GameScene 类和 GameLayer 类，管理糖果的布局和消除逻辑 继承Sprite，专门用于加载一个糖果图片 常量列表 游戏的UI 负责游戏的数据存储和读取新建项目 r新建项目新建项目制作糖果制作糖果 Candy.js 扩展 Sprite 把糖果的加载工作封装起来 每个糖果除了基本图片外，还有3个属性： 类型（颜色）、列号、行号 即 function ( type, column, row )制作糖果通过基类的初始化方式，创建糖果的Sprite等价于new cc.Sprite (“res/” + (type+1) + “png”)制作糖果 为什么需要 type+1 ？ 因为

3、糖果的图片是 ，而type的类型从0 4 便捷的静态方法：制作糖果 Candy.createRandomType 方法： 没有var 静态方法，即不需要new new Candy ( type, column, row) 由Candy的构造函数ctor决定 Math.random() 生成随机数方法，值（=0,1） Constant.CANDY_TYPE_COUNT 糖果的种类数量(5) parseInt 转化为数字 即第一个参数的含义：随机取数字，值在04，并确保转化为数字类型制作糖果 Constant.js 常量设定游戏界面游戏界面 显示当前关卡、当前分数和剩余步数 随着玩家的操作，这三个

4、数字会不断变化 使用LabelTTF GameUI.js 扩展Layer，建立GameUI类游戏界面 levelText，scoreText，stepText 表示在GameUI这个Layer的扩展类里，创建了以levelText，scoreText，stepText命名的临时变量，初始值为null，即空对象，并未指定类型游戏界面 GameLayer显示背景图片 运行查看效果，背景图片描绘游戏界面 使用LabelTTF用于显示信息 为了代码清晰，建立私有函数_initInfoPanel来完成信息栏的初始化 三个信息除了数字之外，还需要三个标签： “Level”，“Score”，“Step” 一

5、共需要建立六个LabelTTF对象 _initInfoPanel()，紧跟在ctor方法后写游戏界面 私有函数_initInfoPanel游戏界面 私有函数_initInfoPanel 续游戏界面 私有函数_initInfoPanel 三个信息显示在屏幕上方，从左到右分别是Level、Score和Step 为了更好的显示，设置LabelTTF纵向位置使窗口高度减去固定值的做法。 好处：调整屏幕宽和高，只需要修改html和就可以了，不需要逐个界面去调整 为了便于后续修改信息，levelText、scoreText和stepText记录到GameUI类的私有属性中（this.levelText =

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

7、lippingNode）使用遮罩 创建GameScene，游戏的唯一场景使用遮罩 创建GameLayer GameLayer中有三层内容： 最底下的背景图、中间10 X 10的糖果矩阵、最上层的GameUI 由于糖果矩阵和GameUI会继续访问到，所以在GameLayer中设计两个属性指向这两个内容： 使用mapPanel指向糖果矩阵的层，使用ui指向GameUI 其他的属性：当前分数score、当前关卡level、已用步数steps、限制步数limitStep、目标分数targetScore使用遮罩 GameLayer基本创建使用遮罩 新建背景使用遮罩 新建糖果矩阵 糖果会超出范围？使用遮罩

8、 解决糖果超出范围的问题，使用ClippingNode 利用遮罩让指定范围内的内容显示，超出范围的内容隐藏 方法： 1、需要添加内容（各种节点）到遮罩节点上 2、给遮罩节点指定一个裁剪的模板，超出裁剪模板的内容将被隐藏 需要640 X 640的正方形模板 可以使用DrawNode，可以自由绘制图案，例如长方形、原形、曲线等使用遮罩 使用ClippingNode： 1、新建一个ClippingNode，把其放到屏幕中间 （指定起始的x、y坐标，width宽，height高） 2、新建一个DrawNode，并利用drawRect方法绘制一个正方形，该正方形正好跟糖果矩阵640 X 640区域重叠使

9、用遮罩 使用ClippingNode使用遮罩 初始化糖果矩阵_init： 1、把游戏的核心数据和逻辑数据初始化 2、新建10 X 10个随机糖果并添加糖果到矩阵中 额外设计一个二位数组：，逻辑上方便管理所有糖果，通过列号和行号快速索引到某个糖果使用遮罩 初始化糖果矩阵_init：使用遮罩 使用ClippingNode 糖果矩阵宽高常量 糖果图片宽高常量 Constant.js 设置使用遮罩新建GameUI对象，添加到GameLayer使用遮罩点击消除点击消除 游戏交互内容的制作 需要监听鼠标和触摸事件 GameLayer构造函数中添加代码：点击消除 建立_onMouseDown和_onTouc

10、hBegan函数 通过鼠标坐标和糖果宽高计算出当前点击的糖果在哪一列哪一行，将画面坐标转化为逻辑的行列点击消除 _popCandy处理被点击糖果的逻辑 算法设计： 1、建立一个集合，存储全部相连的糖果。初始时只有被点击的糖果 2、遍历集合中的糖果，判断该糖果的上下左右4方向的糖果是否跟该糖果是同一颜色的。如果是，则把旁边的糖果加到数组中。注意：添加前需要检查是否已经存在该集合中 3、当遍历完集合的时候，相连的糖果就被找出来了点击消除 _popCandy处理被点击糖果的逻辑 逻辑设计： 1、获得集合后，判断糖果个数 2、如果只有1个，则不执行消除的动作 3、如果大于等于2个，那么就删除这部分糖果

11、，增加已用步数，并计算当前得到的分数 4、删除糖果后，再执行生成新糖果的逻辑，同时检查游戏的进度（胜利或失败） 5、为了确保糖果补充过程中，玩家不能再次添加，给GameLayer添加属性moving。即moving=true，_popCandy不做处理；当_popCandy执行后，设置moving为true点击消除 _popCandy 代码：点击消除 检测糖果存在_checkCandyExist点击消除 _popCandy 代码：（续）补充糖果补充糖果 糖果的补充都以列为单位 1、该列消除了多少糖果 2、就会在该列正上方生成多少个新糖果 3、落下补充恢复到10 X 10的糖果矩阵 找到每个糖果

12、需要下落距离的算法？补充糖果 算法设计： 1、遍历糖果矩阵的每一列，每列中再从下往上遍历该列的每个糖果 2、每列遍历开始时，设置空位计数器为0 3、如某位置为null，则表示该位置的糖果已被_popCandy删除，此时把该列的空位计数器+1，并在整列的最上方添加一个新随机糖果，并添加到二维数组的该列数据中 4、如某位置为糖果，则需安排这个糖果下落。当前空位计数器的数值正好就是该糖果需要下落的距离。设置糖果下落后，需要调整原位置为null，下落到的位置填入该糖果 5、当遍历完该列最后一个糖果（包括刚新加的糖果）后，该列的检查工作完成了。需要把超出10的数组位置删除补充糖果 下落效果，模拟自由落体

13、动作的运动： 根据自由落体公式：h = gt2 则下落时间： Math.sqrt(2*下落距离/FALL_ACCELERATION) FALL_ACCELERATION设置为30 当所有糖果下落完成后，把GameLayer的moving设置为false。可以使用scheduleOnce和_finishCandyFalls函数处理补充糖果 补充糖果的函数_generateNewCandy的代码：补充糖果 补充糖果的函数_generateNewCandy的代码：关卡设计关卡设计 分数来源： 1、消除糖果，假设个数为N，那么分数为N X N 2、过关后剩余步数转化为分数。 简单处理，这里设置转化分数为剩余步数的30倍关卡设计 设置 limitStep是限制步数，targetScore是目标分数关卡设计 GameLayer的_init中，通过配置获取当前关卡的限制步数和目标分数关卡设计 每次点击后，添加胜负判断： 1、如果分数到达目标分数，则表示玩家已完成任务，显示过关提示，同时把剩余步数转化为分数 2、如果分数没有到达目标，而且当前步数已大于或等于限制步数，则表示玩家失败，显示失败提示 3、无论失败还是