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
},
我们可以来运行下,看下效果。