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

},

我们可以来运行下，看下效果。