发表于   |   阅读次数

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

添加开始场景

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属性框中

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

发表于   |   阅读次数

这一篇我们给数字块添加点击事件并且添加计时器

编辑目标点击事件

1.资源管理器Script目录中双击打开block脚本，添加moveEvent方法,该方法将被点击的数字块的currentIndex(位置序号)与Global.emptyIndex(空格子序号)进行比较
如果两者的差值是1(代表空格子在被点击数字块的右侧)或者-1(代表空格子在被点击数字块的左侧)或者-4(代表空格子在被点击数字块的上方)
或者4(代表空格子在被点击数字块的下方)，则将被点击方块移动到空格子的位置，同时交换currentIndex与Global.emptyIndex的值

1
2
3
4
5
6
7
8
9
10
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){
		var moveAction = cc.moveTo(0.5,Global.positions[emptyIndex].x,Global.positions[emptyIndex].y);
		this.node.runAction(moveAction);
		Global.emptyIndex = currentIndex;
		target.currentIndex = emptyIndex;
	}
}
  1. 事件绑定
    资源管理器中双击block预制,将右侧属性检查器Click Events 0改为1,层级管理器block节点拖拽到[0]的第一空，第二空选择block，第三空选择moveEvent
    点击场景编辑器中保存按钮,然后点击关闭按钮

    3.预览项目
    点击空格子相邻数字块，数字块移动到空格子的位置

添加计时器

  1. 添加Label节点
    层级管理器在Canvas结点下新建两个Label节点,一个命名为timeDisplay,string属性设置为 “用时:”,另一个命名为time,string属性设置为 “0s”.
  2. 脚本添加属性
    打开MainScript脚本,添加下面的代码
    1
    2
    3
    4
    5
    6
    7
      properties: {
          ...
    timesDisplay: {
    	default: null,
    	type: cc.Label
    }
      },

3.节点绑定属性
层级管理器,选择Canvas节点，然后将time结点拖拽到属性检查器的Times Display属性中
4.编辑计时逻辑
打开MainScript,添加下面的代码

1
2
3
4
5
6
7
8
9
10
   onLoad () {
	...
	this.times = 0;
	this.schedule(this.updateOne,1);		
},
updateOne: function(dt){
	this.times += 1;
	this.timesDisplay.string = this.times.toString() + 's';
},

预览游戏看一下计时效果

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

发表于   |   阅读次数

这一篇我们会创建数字块预制，以及在推盘上生成打乱的数字块

创建数字块预制

1.层级管理器中添加一个Button控件,重命名为block,属性设置W:100，H:100,Color:#F2B17B;子节点Label
重命名为number,属性设置:Color: #FFFFFF,String: 0.
2.将block拖拽到资源管理器中,block预制就生成了,会看到前面有一个灰色的四方门洞图标，代表的就是预制。

3.资源管理器 Script上右键-新建-javascript,重命名为block.，双击脚本进入编辑界面,然后添加属性

1
2
3
4
5
6
properties: {
	number : {
		default : null,
		type : cc.Label
	}
},

双击block预制进入编辑界面，属性检查器下方的添加组件按钮-添加用户脚本组件-选择block,block脚本就被添加到预制中
将层级管理器number拖拽到属性管理器的Number属性框中.在场景编辑器中点保存，然后点关闭

4.在层级管理器中把block删除

使用脚本动态生成乱序数字块

1.新建游戏主逻辑脚本
资源管理器 Script上右键-新建-javascript,重命名为MainScript.

2.编辑脚本
双击Mainscript文件就会用已安装好的文本编辑器打开脚本

首先添加生成推盘所需要的属性

1
2
3
4
5
6
7
8
9
10
properties: {
	pan: {
		default: null,
		type: cc.Node
	},
	blockPrefab: {
		default: null,
		type: cc.Prefab
	},
},

回到层级管理器，点Canvas节点，属性检查器下方的添加组件按钮-添加用户脚本组件-选择MainScript,
然后拖拽层级管理器中pan结点到右边Pan属性上,拖拽资源管理器block预制到右边Block Prefab上.

3.编写生成逻辑
回到MainScript文本编辑,添加全局变量positions代表推盘每个位置中心点的集合、emptyIndex代表
空格子的序号,初始值为15

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

然后在onLoad方法中为positions赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
   onLoad () {
	Global.positions = [{
		x : -165,
		y : 165
	},{
		x : -55,
		y: 165
	},{
		x: 55,
		y: 165
	},{
		x: 165,
		y: 165
	},
	{
		x : -165,
		y : 55
	},{
		x : -55,
		y: 55
	},{
		x: 55,
		y: 55
	},{
		x: 165,
		y: 55
	},
	{
		x : -165,
		y : -55
	},{
		x : -55,
		y: -55
	},{
		x: 55,
		y: -55
	},{
		x: 165,
		y: -55
	},
	{
		x : -165,
		y : -165
	},{
		x : -55,
		y: -165
	},{
		x: 55,
		y: -165
	},{
		x: 165,
		y: -165
	}]
},

编写createBlocks方法:目的是添加15个数字预制块到pan上;disorder方法:目的是将位置序号打乱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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];
		this.pan.addChild(newBlock);
	}
},
disorder : function(arr){
	var result =[];
	while(arr.length > 0){
		var index = parseInt(Math.random()*(arr.length - 1));
		result.push(arr[index]);
		arr.splice(index,1);
	}
	return result
}

然后在onload里调用createBlocks方法

1
2
3
4
   onLoad () {
	...
	this.createBlocks();
},

4保存并预览
保存脚本,回到游戏编辑器中,点击工具栏上的如图符号按钮

自动打开浏览器,

推盘就做好了

下一篇我们给数字块添加点击事件

发表于   |   阅读次数

这篇我们来创建项目，并且建立主场景

新建项目

打开Cocos Creator软件
1.切换到新建项目选项卡
2.点选默认Hello World项目
3.修改项目路径为项目名称，在这里我命名为N-puzzle
4.点击新建项目按钮.

游戏项目创建成功，在E盘code目录下可以看到整个游戏项目文件

新建游戏主场景

1.新建项目后就进入了项目编辑页面,在右下的资源管理器中是游戏的资源文件，在Scene目录上右键-新建-Scene, 并重命名为MainScene
2.双击MainScene文件，就切换到了游戏主场景
3.修改场景大小：在左上层级管理器中点击Canvas节点，右侧属性检查器中便会显示该节点的属性，默认canvas W是960，H是640,我们修改W为640，H为960.
中间场景编辑器中canvas自动刷新成修改后的大小.

在场景中添加内容

1.添加背景
层级管理器，右键Canvas节点-创建节点-创建渲染节点-Sprite(单色),Canvas下添加了新节点,也可以直接从空间库中把Sprite拖拽到Canvas上,点击新节点把名称改为bg.
在右侧属性检查器中,把Size修改为W:640,H:960,并修改Color为#34b4cd,这样我们就添加了一个与场景同等大小的彩色背景

2.添加推盘背景
跟上一步类似,名称改为pan,Size修改为W:430,H:430,Color为#DEBF91

下一篇我们会创建数字块预制，以及在推盘上生成打乱的数字块

发表于   |   阅读次数

今日问题总结

1.arttemplate helper多参数传递

1
2
3
4
5
6
tepmlate.helper('name',function(content,parameter){
       /*
           your code
       */
       return content;
   });

简洁语法模式下的调用

1
{{content | name : parameter}}

2.iscroll动态加载dom完成后初始化

若是dom未加载完成即初始化会导致页面内容显示不完全，且页面无法滑动到底部
思路：在dom最后增加mark dom，设置计时器判断mark dom是否加载完成，如果加载完成再执行iscroll 初始化

1
2
3
4
5
6
7
8
9
10
11
12
function initScroll(){
       intervalTime = setInterval(function (){
           var resultContentH = $("#finish-mark").height();
           if (resultContentH > 0) {  //判断数据加载完成的条件
               console.log("dom动态加载完成！");
               setTimeout(function () {
                   clearInterval(intervalTime);
                   var myScroll = new IScroll("#wrapper",{mouseWheel: true, click: true,tap: true});
               }, 100)
           }
       }, 10);
   };

加载dom结尾添加

1
<div id="finish-mark"></div>

3.gulp合并文件指定文件顺序

  • 使用gulp－order
  • 按合并顺序放置或重命名文件
  • gulp.src[ a.js , b.js , c.js]

发表于   |   阅读次数

github是一个很不错的代码托管网站，利用它可以托管自己的项目，还可以搭建个人博客，实乃各类小猿必备利器。
那么如何将本地代码上传到github上呢？

阅读全文 »

发表于   |   阅读次数

安装hexo比想象的简单许多

准备活动：github、npm、hexo、支持markdown的编辑器