使用Cocos-Creator制作一个十五数字推盘游戏教程4

发表于   |   阅读次数

这一篇我们为游戏添加开始及结束场景

添加开始场景

1.资源管理器Scene目录下新建Scene，重命名为welcomeScene
2.层级管理器Canvas节点下添加一个Sprite重命名为bg,大小设置为640x960，颜色设置为#34b4cd;
添加一个Label,命名为name,string设置为“数字华容道”;添加一个Button,命名为startBtn,子节点Lable的
string设置为“开始游戏”

3.为开始游戏添加点击事件
资源管理器Script目录下新建javscipt脚本，命名为startGame.添加startGame方法

1
2
3
startGame: function(){
	cc.director.loadScene("MainScene");
}

回到开始场景中,选择startBtn,将startGame脚本添加到属性检查器中.
Events属性修改为1,将startBtn结点拖拽到第一个框，第二个框选择startGame脚本,第三个框选择startGame
方法
4.保存并预览.
点击开始游戏按钮,场景切换到游戏主场景

添加结束场景

1.资源管理器Scene目录下新建Scene，重命名为overScene
2.添加背景等结点如下图

然后restartBtn按钮绑定startGame事件
3.编写游戏成功逻辑
MainScript添加一个全局变量corrects,代表的是正确归位的数字块的个数,当它为15时即为挑战成功,
同时将

1
2
3
4
5
window.Global = {
    positions: [],
	emptyIndex: 15,
	corrects: 0,
};

Global.Corrects初始化:完善createBlocks方法,判断数字块初始序号与它的数字是否相等,是的话corrects
加一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
createBlocks :  function(){
	var arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
	var disorderArr = this.disorder(arr);
	for(var i = 1; i <= 15;i++){
		var newBlock = cc.instantiate(this.blockPrefab);
		newBlock.getComponent("block").number.string = i;
		newBlock.setPosition(Global.positions[disorderArr[i - 1]].x,Global.positions[disorderArr[i - 1]].y);
		newBlock.currentIndex = disorderArr[i - 1];
		if(disorderArr[i - 1] === (i - 1)){
			Global.corrects += 1;
		}
		this.pan.addChild(newBlock);
	}
},

block脚本完善moveEvent事件逻辑:数字块移动之前判断数字块的currectIndex与数字块的数字是否相同,相同的话Global.corrects减1.
数字块移动之后，交换currentIndex与emptyIndex的值,然后再次做判断,如果currentIndex与数字块的数字相同,则Global.corrects加1.
然后判断如果Global.corrects等于15,跳转到结束场景.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
moveEvent: function(event){
	var target = event.target;
	let currentIndex = target.currentIndex,emptyIndex = Global.emptyIndex;
	if((emptyIndex - currentIndex) === 1 || (emptyIndex - currentIndex) === -1 || (emptyIndex - currentIndex) === 4 || (emptyIndex - currentIndex) === -4){
		if(target.currentIndex == (this.number.string - 1)){
			Global.corrects -= 1;
		}
		var moveAction = cc.moveTo(0.5,Global.positions[emptyIndex].x,Global.positions[emptyIndex].y);
		this.node.runAction(moveAction);
		Global.emptyIndex = currentIndex;
		target.currentIndex = emptyIndex;
		if(target.currentIndex == (this.number.string - 1)){
			Global.corrects += 1;
		}
		if(Global.corrects === 15){
				cc.director.loadScene("overScene");
		}
	}
}

到此完成了数字块复位后场景转到overScene的逻辑

4.结束场景中显示所用时长
完善倒计时逻辑,当Global.corrects等于15时,把times保存到localStorage,然后停止计时器

1
2
3
4
5
6
7
8
updateOne: function(dt){
	this.times += 1;
	this.timesDisplay.string = this.times.toString() + 's';
	if (Global.corrects === 15) {
		cc.sys.localStorage.setItem("TimeDis", this.times);
		this.unschedule(this.updateOne);
	}
},

新建GameOver脚本,添加times属性和disTime方法,并在onLoad中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
properties: {
	times: {
		default: null,
		type: cc.Label
	}
},
onLoad () {
	this.time = 0;
	this.disTime();
},
disTime: function(){
	this.time = cc.sys.localStorage.getItem("TimeDis");
	this.times.string = this.time.toString()+ 's';
},

回到overScene,添加GameOver脚本,将Time结点拖拽到Times属性框中

到这里,数字华容道就制作完成了,预览一下看看自己用多久玩一局.