（转）CocosCreator零基础制作游戏《极限跳跃》添加游戏主场景控制脚本

Posted 2020-11-18

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