（转）CocosCreator零基础制作游戏《极限跳跃》七制作游戏结束场景并实现场景切换

Posted 2020-11-18 wodehao0808

CocosCreator零基础制作游戏《极限跳跃》七、制作游戏结束场景并实现场景切换

 

前面我们实现了游戏的碰撞检测，碰到障碍物我们的角色就会死掉并开始掉落，角色掉落到屏幕底部时候游戏结束，并跳到结束场景。

我们在资源管理器新建GameOver场景。双击打开场景，调整大小为480x800，添加界面需要的节点。如图。

这样我们的结束场景就制作好了。可以预览下。

制作好了，结束场景我们就需要把我们游戏的三个场景关联起来了。

首先我们双击打开我们的第一个场景WelcomeScene。然后在资源管理器创建playGo.js脚本。代码如下：

01	//playGo.js

02	cc.Class({

03	extends: cc.Component,

04	properties: {

05

// foo: {

06	//    default: null,

07	//    url: cc.Texture2D,  // optional, default is typeof default

08	//    serializable: true, // optional, default is true

09	//    visible: true,      // optional, default is true

10	//    displayName: ‘Foo‘, // optional

11	//    readonly: false,    // optional, default is false

12

// },

13

// ...

14

},

15	// use this for initialization

16	onLoad: function () {

17

},

18

//切换场景

19	toScene: function(){

20	cc.director.loadScene("MainScene")

21

}

22	// called every frame, uncomment this function to activate update callback

23	// update: function (dt) {

24

// },

25

});

 

这个脚本就实现一个功能，就是切换场景到MainScene场景，也就是第二个场景我们游戏的主场景。

下面我们为开始按钮绑定脚本事件。

这样我们的切换场景功能就实现了，同样的方法我们给GameOver场景中的重新开始按钮绑定脚本事件。

给退出游戏按钮添加事件脚本，创建脚本ExitScene。代码如下：

01	//ExitScene.js

02	cc.Class({

03	extends: cc.Component,

04	properties: {

05

// foo: {

06	//    default: null,

07	//    url: cc.Texture2D,  // optional, default is typeof default

08	//    serializable: true, // optional, default is true

09	//    visible: true,      // optional, default is true

10	//    displayName: ‘Foo‘, // optional

11	//    readonly: false,    // optional, default is false

12

// },

13

// ...

14

},

15	// use this for initialization

16	onLoad: function () {

17

},

18

19

//退出游戏

20	ExitScene: function(){

21	cc.director.end();

22

},

23	// called every frame, uncomment this function to activate update callback

24	// update: function (dt) {

25

// },

26

});

使用同样的方法，给退出游戏按钮绑定事件。

 

还剩下一个游戏结束的切换场景事件。打开GAME脚本。添加gameover方法，并在update添加判断和处理。

01

//GAME.js

02	//....省略..

03	//gameover方法 然后在update实现gameover判断

04	gameOver: function () {

05

06	cc.eventManager.removeAllListeners();//移除所有事件监听

07	this.player.stopAllActions(); //停止 player 节点的跳跃动作

08

09	cc.director.loadScene("GameOver");//切换场景到结束场景

10

},

11

//加载时执行

12	onLoad: function () {

13

//触摸监听

14	this.setEventControl();

15

// 初始化计分

16	this.score = 0;

17

//添加判断

18	this.isMoving = true;

19

20

},

21	//刷新update

22	update: function (dt) {

23

24	this.setBgMoveCreate();//检测背景

25

26	//gameOver判断 玩家坠落到屏幕底部游戏结束

27	if(this.player.getPositionY() <= -cc.view.getVisibleSize().height/2){

28	this.unscheduleAllCallbacks();

29

30	if(this.isMoving)

31

{

32	this.gameOver();

33	this.isMoving = false;

34

}

35

36

}

37

38

},

39	//......省略代码....

下面我们来测试下整个流程环节。双击WelcomeScene场景从第一个场景开始预览。

到此我们整个游戏流程以及完了，接下来完善积分系统，还有声音系统整个游戏就可以上线了。下面我们继续来做积分系统。。

 

原文地址：https://www.byjth.com/jixiantiaoyue/72.html