可以在这里感受一下这款游戏的完成形态：
https://nsyqqq.github.io/Nsy_KingRun/star-catcher/index.html
一、安装Cocos Creator，配置代码编辑环境（Windows 8）
- 访问Cocos Creator官网，下载Cocos Creator V2.0.10版本，安装并配置好。
- 访问Visual Studio Code官网，下载VSCodeUserSetup-x64-1.35.1版本，安装并配置好。
- 访问curl官网，下载curl-7.64.1版本，安装并配置好。
二、准备工作
- 打开Cocos Creator，创建一个空白项目，项目名称取名为KingRun。
- 创建animation（动画 Clip）、scene（场景文件）、script（脚本文件）、texture（图片资源）四个文件夹。
- 把背景图片、猴哥图片、导弹图片放入texture文件夹内。
- 在scene文件夹内新建一个scene场景文件，取名为Game。
三、背景动画
- 将Bg_game_long背景图片拖入到Canvas节点中。
- 在animation文件夹内新建一个animation Clip，取名为bg_roll。
- 在场景编辑器中选中背景（Bg_game_long）节点，在右侧属性面板中添加Animation组件，并将刚刚创建好的Clip拖入到Default Clip中。
- 点击动画编辑器开始编辑动画，给动画添加x属性，也就是让背景横着移动。
- 添加两个关键帧，第一个关键帧让背景图在最左边，第二个关键帧让背景图在最右边，间隔时间设置为15秒，并修改WrapMode的值为loop（循环播放）。
- 点击保存，这样背景动画就制作完成了。
四、猴哥动画
- 将king猴哥图片拖入到Canvas节点中。
- 在animation文件夹内新建一个animation Clip，取名为king_run。
- 在场景编辑器中选中猴哥（King）节点，在右侧属性面板中添加Animation组件，并将刚刚创建好的Clip拖入到Default Clip中。
- 点击动画编辑器开始编辑动画，给动画添加cc.Sprite.spriteFrame属性，让猴哥能够跑起来。
- 每隔0.01秒添加一个关键帧，并将king.plist下的12张图片依次拖入时间轴中，一共添加12个关键帧，并修改WrapMode的值为loop（循环播放）。
- 点击保存，这样猴哥的动画也制作完成了。
五、导弹动画
- 将bomb_red导弹图片拖入到Canvas节点中。
- 在animation文件夹内新建两个animation Clip，分别取名为bomb_high、bomb_low。
- 在场景编辑器中选中导弹（Bomb）节点，在右侧属性面板中添加Animation组件，并将刚刚创建好的两个Clip都拖入到Default Clip中。
- 点击动画编辑器开始编辑动画，给动画添加position属性，让导弹能够从一个位置移动到另一个位置。
- 添加两个位置的关键帧，一个从猴哥的头上飞过，一个从猴哥的脚下飞过。
- 这里需要给导弹添加几个帧事件，在导弹到达猴哥头上的几个帧上添加judgeDown事件，当导弹到达猴哥头上，猴哥还没低头，那就游戏结束，低空导弹同理，需要猴哥跳起。
- 点击保存，这样导弹的动画也制作完成了。
六、结束场景
- 在scene文件夹内新建一个scene场景文件，取名为Over。
- 在Canvas节点下添加一个Button按钮，设置Label值为再来一次。
在scrip文件夹内创建一个Over.js脚本文件，在Over.js里添加reTry（再来一次）的方法。
cc.Class({ extends: cc.Component, properties: { }, reTry: function(){ cc.director.loadScene('Game'); }, onLoad: function () { }, });然后将这个方法添加为Over场景的Canvas组件。
七、游戏脚本
Game.js
cc.Class({ extends: cc.Component, properties: { king:{ default:null, type:cc.Node, } }, onLoad: function () { var self = this; //左侧蹲，右侧跳 this.node.on('touchstart',function(event){ var visibleSize = cc.view.getVisibleSize(); //var visibleSize =cc.director.getVisibleSize(); if(event.getLocationX()<visibleSize.width/2){ self.king.getComponent('King').down(); }else{ self.king.getComponent('King').jump(); } }); //左侧松手就恢复跑的状态 this.node.on('touchend',function(event){ var visibleSize = cc.view.getVisibleSize(); //var visibleSize = cc.director.getVisibleSize(); if(event.getLocationX()<visibleSize.width/2){ self.king.getComponent('King').downRelease(); }else{ // self.king.getComponent('King').jump(); } }); }, });King.js
cc.Class({ extends: cc.Component, properties: { // 主角跳跃高度 jumpHeight: 0, // 主角跳跃持续时间 jumpDuration: 0, //主角状态 state:'run', }, //跑 run:function(){ this.getComponent(cc.Animation).play('king_run'); this.state = 'run'; }, //跳 jump:function(){ if(this.state == 'run'){ this.state = 'jump'; this.getComponent(cc.Animation).stop(); this.node.runAction(cc.sequence(cc.jumpBy(this.jumpDuration, cc.p(0,0), this.jumpHeight, 1), cc.callFunc(function() { this.run(); }, this))); } }, //弯腰跑 down:function(){ if(this.state == 'run'){ this.state = 'down'; this.node.runAction(cc.scaleTo(0.05, 1, 0.5)); } }, //腰累了 downRelease:function(){ if(this.state == 'down'){ this.node.runAction(cc.sequence(cc.scaleTo(0.05, 1, 1), cc.callFunc(function() { this.run(); }, this))); } }, });Bomb.js
cc.Class({ extends: cc.Component, properties: { king:{ default:null, type:cc.Node, } }, //判断高空导弹来时，猴哥是否蹲下 judgeDown:function(){ if(this.king.getComponent('King').state == 'down'){ console.log("down---------------------"); }else{ cc.director.loadScene('Over'); } }, //判断低空导弹来时，猴哥是否跳起 judgeJump:function(){ if(this.king.getComponent('King').state == 'jump'){ console.log("jump---------------------"); }else{ cc.director.loadScene('Over'); } }, onLoad: function () { let self = this; //每隔2秒随机发射高空和低空导弹 this.schedule(function(){ if(Math.random()>0.5){ this.getComponent(cc.Animation).play('bomb_high'); }else{ this.getComponent(cc.Animation).play('bomb_low'); } },3.5); }, });
笔记
Animation Clip属性：
position、X、Y、scaleX、scaleY、Rotation、Width、Height、Color、Opacity、anchorX、anchorY、cc.Sprite.enabled、cc.Sprite.spriteFrame、cc.Sprite.fillType、cc.Sprite.fillCenter、cc.Sprite.fillStart、cc.Sprite.fillRange。节点：
（1）渲染节点：Sprite（精灵）、Sprite（单色）、Label（文字）、RichText（富文本）、ParticleSystem（粒子）、TiledMap（地图）、Tiledtile（地图块）。
（2）UI节点：Layout（布局）、Button（按钮）、Canvas（画布）、ScrollView（滚动视图）、ProgressBar（进度条）、Toggle（复选按钮）、ToggleContainer（单选按钮）、ToggleGroup（旧版单选按钮）、EditBox（输入框）、VideoPlayer（播放器）、WebView（网页视图）。ERROR：
Simulator: E/jswrapper (271): ERROR: Uncaught TypeError: cc.director.getVisibleSize is not a function, location: assets/script/Game.js:0:0 STACK: [0]anonymous@assets/script/Game.js:31 [1]174.CallbacksInvoker.invoke@src/cocos2d-jsb.js:28949 [2]_doDispatchEvent@src/cocos2d-jsb.js:7926 [3]dispatchEvent@src/cocos2d-jsb.js:8574 [4]_touchEndHandler@src/cocos2d-jsb.js:7818 [5]_onTouchEventCallback@src/cocos2d-jsb.js:20027 [6]_dispatchEventToListeners@src/cocos2d-jsb.js:20112 [7]_dispatchTouchEvent@src/cocos2d-jsb.js:20060 [8]dispatchEvent@src/cocos2d-jsb.js:20313 [9]handleTouchesEnd@src/cocos2d-jsb.js:26951 [10]anonymous@src/cocos2d-jsb.js:27124 [11]anonymous@src/cocos2d-jsb.js:27144 [12]dispatchEvent@jsb-adapter/jsb-builtin.js:2805 [13]anonymous@jsb-adapter/jsb-builtin.js:2876 at HTMLElement.print-simulator-log (C:\Users\Administrator\Desktop\CocosCreator\resources\app.asar\editor\builtin\scene\panel\messages\scene.js:1:1501) at Object.e._dispatch (C:\Users\Administrator\Desktop\CocosCreator\resources\app.asar\editor-framework\lib\renderer\panel.js:1:1941) at EventEmitter.o.on.s (C:\Users\Administrator\Desktop\CocosCreator\resources\app.asar\editor-framework\lib\renderer\ipc.js:1:2921) at emitMany (events.js:127:13) at EventEmitter.emit (events.js:204:7)
解决办法：Cocos Creator 2.0之后的版本，把cc.director.getVisibleSize换成了cc.view.getVisibleSize。
方法：
onLoad: function () { let self = this; //每隔4秒随机发射高空和低空导弹 this.schedule(function(){ if(Math.random()>0.5){ this.getComponent(cc.Animation).play('bomb_high'); }else{ this.getComponent(cc.Animation).play('bomb_low'); } },3.5); },
this.schedule(回调函数,延迟时间);
Math中的random方法返回一个大于0小于1的随机数。
图片
- 游戏制作图
- 游戏效果图
