拼图游戏笔记2

拼图游戏中截止目前为止，所做的步骤有：

1，创建两个界面：

开始界面：一张背景图，两个按钮，一个关卡的提示文本框。

游戏界面：一个背景层容器，一个图片容器，一个返回按钮。

2，添加所有组件，并显示到舞台。

3，开始界面里需要实现的功能：

点击左右按钮加减关卡，其中形成一个数字的循环滚动效果。按钮左点击数字减小，当小于最低关卡时，设置文本框内容为最大关卡，按钮是右一回事。

点击确定按钮切进入游戏界面，需要一个场景切换的方法做回按钮点击事件的回调方法。

---------------------------------------游戏核心------------------------------------------------

1，首先就是从10长图片中随机获取一种图片作为背景，背景图片需要设置锚点，坐标，还有透明度

2，生成碎片，需要用到矩形的属性（锚点，坐标，大小），通过两个for循环可以生成指定数量的碎片。

3，碎片点击选中的原理，需要将鼠标点击的事件坐标（即图层上的坐标），转换成碎片的节点坐标，然后比较，如果在图片的矩形范围内，则判定点中。

4，拖拽功能的实现，将节点的坐标加上将鼠标移动时的偏移实现跟随鼠标移动功能。

5，吸附，当图片拖拽至正确正确位置一定的偏移范围内时判定游戏完成，并且图片不再移动

这是目前所以理解的大概，很明显比较模糊，还有很多细节没有涉及到，这一块需要花大力气。

今天还讲了一个汉诺塔的玩法及规律，单数找双数，小的优先动，以下是欢哥的代码（虽然目前还看不懂）：

<span style="background-color: rgb(255, 255, 255);">var HelloWorldLayer = cc.Layer.extend({
_s: null,
_t: null,
_e: null,
_n: null,
_lockPos:null,
_tempNum:null,
ctor:function () {
this._super();
this._init();
},
_init:function(){
this._s = [];
this._t = [];
this._e = [];
this._n = 10;
this._index = 0;
this._lockPos = 1;
for(var i=this._n; i>0; i--)  this._s.push(i);
this._checkFirst();
},
/*
*  开始检查
* */
_check: function(){
var a = this._s[this._s.length-1];
var b = this._t[this._t.length-1];
var c = this._e[this._e.length-1];
this._lockPos = this._getPos(a,b,c);
this._changePos(a,b,c);
cc.log("次数---", ++this._index);
cc.log("a---", this._s.toString());
cc.log("b---", this._t.toString());
cc.log("c---", this._e.toString());
if(this._e.length < this._n) this._check();
},
/*
*  获取位置
* */
_getPos:function(a,b,c){
if(this._lockPos == 1){
if(b == undefined) return 3;
else if(c == undefined) return 2;
else return (b<c)?2:3;
}
else if(this._lockPos == 2){
if(a == undefined) return 3;
else if(c == undefined) return 1;
else return (a<c)?1:3;
}
else if(this._lockPos == 3){
if(a == undefined) return 2;
else if(b == undefined) return 1;
else return (a<b)?1:2;
}
},
/*
*  获取位置  1表示返回前面一个值  (b,a,c)
* */
_getV: function(x,y,z){
if(x%2 == 0){
if(y==undefined){
if(z%2 != 0 && x < z) return 2;
return 1;
}else{
if(y%2 != 0 && x < y) return 1;
return 2;
}
}else{
if(y==undefined){
if(z%2 == 0 && x < z) return 2;
return 1;
}else{
if(y%2 == 0 && x < y) return 1;
return 2;
}
}
},
/*
*
* */
_changePos:function(a,b,c){
if(this._lockPos == 1){
if(this._getV(a,b,c) == 1){
this._t.push(this._s.pop());
this._lockPos = 2;
}
else{
this._e.push(this._s.pop());
this._lockPos = 3;
}
}
else if(this._lockPos == 2){
if(this._getV(b,a,c) == 1){
this._s.push(this._t.pop())
this._lockPos = 1;
}else{
this._e.push(this._t.pop());
this._lockPos = 3;
}
}
else if(this._lockPos == 3){
if(this._getV(c,a,b) == 1){
this._s.push(this._e.pop())
this._lockPos = 1;
}else {
this._t.push(this._e.pop());
this._lockPos = 2;
}
}
},
/*
*  第一次
* */
_checkFirst: function(){
if(this._n%2 == 0) {
this._t.push(this._s.pop());
this._lockPos = 2;
}
else{
this._e.push(this._s.pop());
this._lockPos = 3;
}
this._check();
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
</span>