CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本
前面简单的实现了主界面的UI设置，现在我们开始制作游戏的控制脚本。
在资源管理器的Script文件夹中，点击右键新建javascript文件，命名为GAME。
双击打开GAME脚本，在properties: 中添加属性代码。
01 |
//GAME.js |
02 |
03 |
cc.Class({ |
04 |
extends: cc.Component, |
05 |
properties: { |
06 |
|
07 |
// player 节点，用于获取主角弹跳的高度，和控制主角行动开关 |
08 |
player: { |
09 |
default: null, |
10 |
type: cc.Node |
11 |
}, |
12 |
// bgsprite1 节点，用于背景移动 |
13 |
bgsprite1: { |
14 |
default: null, |
15 |
type: cc.Node |
16 |
}, |
17 |
// bgsprite2 节点，用于背景移动 |
18 |
bgsprite2: { |
19 |
default: null, |
20 |
type: cc.Node |
21 |
}, |
22 |
// score label 的引用 |
23 |
scoreDisplay: { |
24 |
default: null, |
25 |
type: cc.Label |
26 |
}, |
27 |
}, |
保存好后，我们双击MainScene打开场景，点击Canvas，在右侧的属性检查器最底部，点击［添加组件］＝》［添加用户脚本组件］然后选择我们刚刚创建的脚本GAME.js。
添加好后就可以在属性检查器看到我们的属性组件来，然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。
这样我门就可以在GAME脚本里来操作节点了。
二、创建HeroPlayer脚本用来操作玩家主角
01 |
//HeroPlayer.js |
02 |
03 |
cc.Class({ |
04 |
extends: cc.Component, |
05 |
properties: { |
06 |
//主角跳跃高度 |
07 |
jumpHeight: 0, |
08 |
//主角跳跃持续时间 |
09 |
jumpTimes: 0, |
10 |
//掉落速度 |
11 |
maxMoveSpeed: 0, |
12 |
}, |
13 |
//跳跃 |
14 |
setJumpUpAction: function(){ |
15 |
// 跳跃上升 |
16 |
var jumpUp = cc.moveBy(this.jumpTimes, cc.p(0, this.jumpHeight)); |
17 |
//jumpUp.reverse(); |
18 |
return jumpUp; |
19 |
}, |
20 |
//掉落 |
21 |
setJumpDownAction: function(){ |
22 |
//下落 |
23 |
var jumpDown = cc.moveBy(this.jumpTimes, cc.p(0, - this.maxMoveSpeed)); |
24 |
return jumpDown; |
25 |
}, |
26 |
setJumpRunAction: function(){ |
27 |
// 初始化跳跃动作 |
28 |
this.jumpAction = this.setJumpUpAction(); |
29 |
//掉落动作 |
30 |
this.maxMoveSpeed = this.setJumpDownAction(); |
31 |
//包装动作 |
32 |
var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed); |
33 |
this.node.runAction(seq); |
34 |
}, |
35 |
//玩家不操作时，角色进行下坠 |
36 |
heroDownMove: function(){ |
37 |
//下落 |
38 |
var heroDown = cc.moveBy(0.8, cc.p(0, - 5)); |
39 |
return heroDown; |
40 |
}, |
41 |
// use this for initialization |
42 |
onLoad: function () { |
43 |
|
44 |
this.setJumpRunAction(); |
45 |
|
46 |
}, |
47 |
48 |
// called every frame, uncomment this function to activate update callback |
49 |
update: function (dt) { |
50 |
this.node.runAction(this.heroDownMove());//精灵移动 |
51 |
} |
52 |
|
53 |
|
54 |
}); |
角色有2种状态，一种是玩家点击屏幕会实现角色的跳跃，第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后，我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。
我门可以在里面初始化值。跳跃高度值，跳跃持续时间，掉落速度等。
脚本里主要实现了跳跃动作，掉落动作等。
然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听，实现监听触摸来调用主角的跳跃动作。
首先在顶部添加脚本引用，然后创建事件监听的方法。
01 |
//GAME.js |
02 |
var HeroPlayer = require("HeroPlayer"); |
03 |
//－－－－－ |
04 |
//事件监听 |
05 |
setEventControl: function(){ |
06 |
var self = this; |
07 |
var hero = self.player.getComponent(HeroPlayer);//角色绑定控件 |
08 |
|
09 |
cc.eventManager.addListener({ |
10 |
event: cc.EventListener.TOUCH_ONE_BY_ONE, |
11 |
swallowTouches: true, |
12 |
// 设置是否吞没事件，在 onTouchBegan 方法返回 true 时吞没 |
13 |
onTouchBegan: function (touch, event) { |
14 |
//实现 onTouchBegan 事件回调函数 |
15 |
var target = event.getCurrentTarget(); |
16 |
// 获取事件所绑定的 target |
17 |
|
18 |
var locationInNode = target.convertToNodeSpace(touch.getLocation()); |
19 |
cc.log("当前点击坐标"+locationInNode); |
20 |
|
21 |
hero.node.runAction(hero.setJumpUpAction());//精灵移动 |
22 |
//cc.log("跳跃：－－－－－－－－"); |
23 |
|
24 |
|
25 |
|
26 |
return true; |
27 |
}, |
28 |
onTouchMoved: function (touch, event) { // 触摸移动时触发 |
29 |
|
30 |
}, |
31 |
onTouchEnded: function (touch, event) { // 点击事件结束处理 |
32 |
|
33 |
// cc.log("跳跃后角色坐标：" + self.player.getPosition() ); |
34 |
} |
35 |
|
36 |
}, self.node) |
37 |
}, |
然后在onload方法实现初始化调用。
1 |
onLoad: function () { |
2 |
//触摸监听 |
3 |
this.setEventControl(); |
4 |
// 初始化计分 |
5 |
this.score = 0; |
6 |
|
7 |
}, |
我们可以来运行下，看下效果。
原文地址：https://www.byjth.com/jixiantiaoyue/69.html