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

《《cocos2d-js教学课件》3cocos2d-js实例-碰碰糖.pptx》由会员分享，可在线阅读，更多相关《《cocos2d-js教学课件》3cocos2d-js实例-碰碰糖.pptx（70页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、（游戏背景）新建项目新建代码：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通过基类的初始

3、化方式，创建糖果的Sprite等价于new cc.Sprite(“res/”+(type+1)+“png”)制作糖果Candy.js为什么需要 type+1？因为糖果的图片是 1.png 5.png，而type的类型从0 4便捷的静态方法：制作糖果Candy.jsCandy.createRandomType 方法：没有var 静态方法，即不需要newnew Candy(type,column,row)由Candy的构造函数ctor决定Math.random()生成随机数方法，值（=0,1）Constant.CANDY_TYPE_COUNT 糖果的种类数量(5)parseInt 转化为数字即第一

4、个参数的含义：随机取数字，值在04，并确保转化为数字类型制作糖果Constant.js 常量设定游戏界面游戏界面显示当前关卡、当前分数和剩余步数随着玩家的操作，这三个数字会不断变化使用LabelTTFGameUI.js 扩展Layer，建立GameUI类游戏界面GameUI.jslevelText，scoreText，stepText表示在GameUI这个Layer的扩展类里，创建了以levelText，scoreText，stepText命名的临时变量，初始值为null，即空对象，并未指定类型游戏界面app.jsGameLayer显示背景图片运行查看效果，背景图片描绘游戏界面GameUI.j

5、s使用LabelTTF用于显示信息为了代码清晰，建立私有函数_initInfoPanel来完成信息栏的初始化三个信息除了数字之外，还需要三个标签：“Level”，“Score”，“Step”一共需要建立六个LabelTTF对象_initInfoPanel()，紧跟在ctor方法后写游戏界面GameUI.js私有函数_initInfoPanel游戏界面GameUI.js私有函数_initInfoPanel 续游戏界面GameUI.js私有函数_initInfoPanel 三个信息显示在屏幕上方，从左到右分别是Level、Score和Step为了更好的显示，设置LabelTTF纵向位置使窗口高度减

6、去固定值的做法。好处：调整屏幕宽和高，只需要修改html和main.js就可以了，不需要逐个界面去调整为了便于后续修改信息，levelText、scoreText和stepText记录到GameUI类的私有属性中（this.levelText=levelText）游戏界面GameUI.js需要使用定时器，让信息栏不断刷新可以在构造函数中调用scheduleUpdate实现每帧不断刷新缺点：有点浪费性能，毕竟游戏不是每帧都发生信息变化优点：函数调用不用多写，便于代码实现。而且，信息栏只有3个LabelTTF，刷新消耗极小，是简单的做法解决数据来源：让GameLayer新建GameUI的时候将自身

7、传递进来游戏界面GameUI.js游戏界面GameUI.js其中，从GameLayer获取当前关卡、分数、剩余步数等信息。这些预先假设GameLayer将有level、score等公共属性游戏界面GameUI.js显示胜利结果游戏界面GameUI.js显示胜利结果游戏界面GameUI.js显示失败结果游戏界面GameUI.js显示失败结果遮罩（ClippingNode）使用遮罩app.js创建GameScene，游戏的唯一场景使用遮罩app.js创建GameLayerGameLayer中有三层内容：最底下的背景图、中间10 X 10的糖果矩阵、最上层的GameUI由于糖果矩阵和GameUI会继

8、续访问到，所以在GameLayer中设计两个属性指向这两个内容：使用mapPanel指向糖果矩阵的层，使用ui指向GameUI其他的属性：当前分数score、当前关卡level、已用步数steps、限制步数limitStep、目标分数targetScore使用遮罩app.jsGameLayer基本创建使用遮罩app.js新建背景使用遮罩app.js新建糖果矩阵糖果会超出范围？使用遮罩app.js解决糖果超出范围的问题，使用ClippingNode利用遮罩让指定范围内的内容显示，超出范围的内容隐藏方法：1、需要添加内容（各种节点）到遮罩节点上2、给遮罩节点指定一个裁剪的模板，超出裁剪模板的内容将

9、被隐藏需要640 X 640的正方形模板可以使用DrawNode，可以自由绘制图案，例如长方形、原形、曲线等使用遮罩app.js使用ClippingNode：1、新建一个ClippingNode，把其放到屏幕中间 （指定起始的x、y坐标，width宽，height高）2、新建一个DrawNode，并利用drawRect方法绘制一个正方形，该正方形正好跟糖果矩阵640 X 640区域重叠使用遮罩app.js使用ClippingNode使用遮罩app.js初始化糖果矩阵_init：1、把游戏的核心数据和逻辑数据初始化2、新建10 X 10个随机糖果并添加糖果到矩阵中额外设计一个二位数组：this.

10、map，逻辑上方便管理所有糖果，通过列号和行号快速索引到某个糖果使用遮罩app.js初始化糖果矩阵_init：使用遮罩app.js使用ClippingNode糖果矩阵宽高常量Constant.MAP_SIZE糖果图片宽高常量Constant.CANDY_WIDTHConstant.js 设置使用遮罩app.js新建GameUI对象，添加到GameLayer使用遮罩点击消除点击消除游戏交互内容的制作需要监听鼠标和触摸事件GameLayer构造函数中添加代码：点击消除建立_onMouseDown和_onTouchBegan函数通过鼠标坐标和糖果宽高计算出当前点击的糖果在哪一列哪一行，将画面坐标转化

11、为逻辑的行列点击消除_popCandy处理被点击糖果的逻辑算法设计：1、建立一个集合，存储全部相连的糖果。初始时只有被点击的糖果2、遍历集合中的糖果，判断该糖果的上下左右4方向的糖果是否跟该糖果是同一颜色的。如果是，则把旁边的糖果加到数组中。注意：添加前需要检查是否已经存在该集合中3、当遍历完集合的时候，相连的糖果就被找出来了点击消除_popCandy处理被点击糖果的逻辑逻辑设计：1、获得集合后，判断糖果个数2、如果只有1个，则不执行消除的动作3、如果大于等于2个，那么就删除这部分糖果，增加已用步数，并计算当前得到的分数4、删除糖果后，再执行生成新糖果的逻辑，同时检查游戏的进度（胜利或失败）5

12、、为了确保糖果补充过程中，玩家不能再次添加，给GameLayer添加属性moving。即moving=true，_popCandy不做处理；当_popCandy执行后，设置moving为true点击消除_popCandy 代码：点击消除检测糖果存在_checkCandyExist点击消除_popCandy 代码：（续）补充糖果补充糖果糖果的补充都以列为单位1、该列消除了多少糖果2、就会在该列正上方生成多少个新糖果3、落下补充恢复到10 X 10的糖果矩阵找到每个糖果需要下落距离的算法？补充糖果算法设计：1、遍历糖果矩阵的每一列，每列中再从下往上遍历该列的每个糖果2、每列遍历开始时，设置空位计数

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

14、RATION设置为30当所有糖果下落完成后，把GameLayer的moving设置为false。可以使用scheduleOnce和_finishCandyFalls函数处理补充糖果补充糖果的函数_generateNewCandy的代码：补充糖果补充糖果的函数_generateNewCandy的代码：关卡设计关卡设计分数来源：1、消除糖果，假设个数为N，那么分数为N X N2、过关后剩余步数转化为分数。简单处理，这里设置转化分数为剩余步数的30倍关卡设计Constant.js设置limitStep是限制步数，targetScore是目标分数关卡设计GameLayer的_init中，通过配置获取当

15、前关卡的限制步数和目标分数关卡设计每次点击后，添加胜负判断：1、如果分数到达目标分数，则表示玩家已完成任务，显示过关提示，同时把剩余步数转化为分数2、如果分数没有到达目标，而且当前步数已大于或等于限制步数，则表示玩家失败，显示失败提示3、无论失败还是成功，3秒后将切换界面：胜利则进入下一关，失败则重新开始关卡设计胜负判断代码_checkSucceedOrFail保存进度如何读/写数据保存进度使用localStorage进行数据的读/写通过获取localStorage对象通过getItem和setItem方法读/写数据注意：getItem得到的数据都是字符串保存进度Storage.js代码保存进度使用读/写保存进度使用读/写Contact us:商务邮箱：触控开发者平台： 谢谢！