【分享】javascript 拼图游戏
近2个月来没有阅读技术书籍，感觉有点盲目。
期间看了《明朝那些事儿》（1，2，3）、《FBI教你破解身体语言》 我看书很慢。
现在又迷上了手机拼图游戏，写了一个JS版本的，本想可以利用小键盘在3*3的拼图上提高速度，最后发现其实在手机上才能最快。（一个普通的3*3数字拼图15内秒可以完成，30%可以10秒类完成）！
JS版本的数字拼图在这里 GIT PUZZLE
手机上的拼图游戏名字叫：拼图（数字）游戏（可以在市场中找到，LOGO是一朵花）
顺便提供一下RAR 下载JS拼图游戏
源码如下----------------------------
View Code
//一个puzz类
var Puzz = function(index, width, height, size, wrap, url, end){//顺序 宽度，高度，比例，父容器，url, 是否是最后一个元素
this.ele = null;
this.left = 0;
this.top = 0;
this.defaultBackground = "#fff";
this.width = width;
this.height = height;
this.size = size;
this.wrap = wrap;
this.url = url;
this.end = end;//标识是否最后一个
this.index = index + 1;
this.x = 0;
this.y = 0;
};
Jun.mix(Puzz.prototype, {
init:function(){
this.create();
},
setLeft:function(value){
this.left = value+'px';
},
setTop:function(value){
this.top = value+'px';
},
setDefaultBackground:function(color){
this.defaultBackground = color;
},
getProperty:function(key){
return this[key];
},
move:function(x, y){//移动到一个坐标
this.setLeft( x * this.width );
this.setTop( y * this.height );
this.update();
this.x = x;
this.y = y;
},
create:function(){
var div = Jun.dom.create('div');
div.className = "puzz-item";
div.style.width = this.width+"px";
div.style.height = this.height+"px";
this.ele = div;
var lie = parseInt((this.index-1)/this.size);
var row = parseInt((this.index-1)%this.size);
if(this.url && this.end == false){
this.setShowBackground("url("+ this.url +") no-repeat -"+(row*this.width)+"px -"+(lie*this.height)+"px");
}else{
this.setShowBackground(this.defaultBackground);
}
this.move(row, lie);
},
setShowInt:function(){
var p = Jun.dom.create('p');
p.innerText = this.index;
Jun.dom.append(this.ele, p);
},
setShowBackground:function(background){
this.ele.style.background = background;
},
update:function(){
this.ele.style.left = this.left;
this.ele.style.top = this.top;
},
isOkay:function(){
return parseInt((this.index - 1) / this.size) == this.y && parseInt((this.index-1)%this.size) == this.x;
},
drawing:function(x, y){
Jun.dom.append(this.wrap, this.ele);
},
click:function(callback, obj){
var _this = this;
this.ele.onclick = function(){
callback.call(obj, _this.y, _this.x);
}
}
});
var Puzzie = function(id, width, height, url, size, isNunber){//容器ID，宽度，高度，图片url, 拆分模块数量, 是否拼数字
var dom = Jun.dom;
this.dom = dom;
this.ele = dom.$(id);
this.url = url;
this.width = width;
this.height = height;
this.size = size;
this.itemList = [];//全部item
this.listOrder = [];//顺序 多维
this.isNunber = isNunber != false ? true : false;//undefined
this.init();
};
Jun.mix(Puzzie.prototype, {
init:function(){
this.ele.style.background = "url("+this.url+")";
this.itemWidth = this.width / this.size;
this.itemHeight = this.height / this.size;
this.itemList = [];
this.create();
},
create:function(){
var list = this.itemList;
var item = null;
var end = false;
var url = '';
for(var i=0, len = this.size * this.size; i<len; i++){
end =(i+1 == len ? true : false);
item = new Puzz(i, this.itemWidth, this.itemHeight, this.size, this.ele, this.url, end);//new 新的item
item.init();
if(this.isNunber == true && end == false){
item.setShowInt();
}
list.push( item );
}
if(this.size == 3){
this.bindWindow();//绑定键盘事件 可以用小键盘操作
}
},
regEvent:function(x, y){//判断移动
var size = this.size;
var list = this.itemList;
var order = this.listOrder;
var j = null ;
if(x > 0 && list[order[x-1][y]].end){//上
list[order[x][y]].move(y, x-1);
list[order[x-1][y]].move(y, x);
j = order[x][y];
order[x][y] = order[x-1][y];
order[x-1][y] = j;
}else if(y < order.length-1 && list[order[x][y+1]].end){//右边
list[order[x][y]].move(y+1, x);
list[order[x][y+1]].move(y, x);
j = order[x][y];
order[x][y] = order[x][y+1];
order[x][y+1] = j;
}else if(x < order.length-1 && list[order[x+1][y]].end){//下边
list[order[x][y]].move(y, x+1);
list[order[x+1][y]].move(y, x);
j = order[x][y];
order[x][y] = order[x+1][y];
order[x+1][y] = j;
}else if(y > 0 && list[order[x][y-1]].end){//左边
list[order[x][y]].move(y-1, x);
list[order[x][y-1]].move(y, x);
j = order[x][y];
order[x][y] = order[x][y-1];
order[x][y-1] = j;
}
if(this.isOkay()){
this.success();
};
},
start:function(){
var list = this.itemList;
for(var i=0, len=list.length; i<len; i++){
list[i].drawing();
list[i].click(this.regEvent, this);
};
this.shuffle();
},
sort:function(array){
return array.sort(function(){
return Math.random() - 0.5;
});
},
shuffle:function(){//洗牌
if(this.itemList.length == 0){
this.init();
this.start();
return ;
}
var order = [];//位置序列
for(var i=0; i<this.size * this.size; i++){
order.push(i);
};
order = this.sort(order);
order = this.sort(order);
order = this.sort(order);
var size = this.size;
var listOrder = this.listOrder = [];
var itemList = this.itemList;
for(i=0; i<size ; i++){//矩阵
listOrder.push(order.slice(i*size, (i+1)*size));
};
var list = this.itemList;
for(i=0,len=listOrder.length; i<len; i++){
for(var j=0; j<listOrder[i].length; j++){
itemList[listOrder[i][j]].move(j, i);
}
};
},
isOkay:function(){
var okay = true;
var list = this.itemList;
for(var i=0, len=list.length; i<len; i++){
if( !list[i].isOkay() ){
okay = false;
break;
};
};
return okay;
},
success:function(){//完成
this.itemList = [];
this.ele.innerHTML = '';
},
keyMove:function(index){
var lie = parseInt((index-1)/this.size);
var row = parseInt((index-1)%this.size);
this.regEvent(lie , row);
},
bindWindow:function(){
var _this = this;
//var keyboard = {97:1,98:2,99:3,100:4,101:5,102:6,103:7,104:8,105:9};//正常键盘
var keyboard = {97:7,98:8,99:9,100:4,101:5,102:6,103:1,104:2,105:3};//反转键盘 789 = 123
document.onkeyup = function(event){
var e = event || window.event;
var index = keyboard[e.keyCode];
if(index){
_this.keyMove(index);
}
}
}
});
var PuzzTest = {// 测试api
order1:[0,1,2,3,4,5,7,6,8],
shuffleOrder:function(order){//按照order的顺序来刷新
var size = this.size;
var listOrder = this.listOrder = [];
var itemList = this.itemList;
for(i=0; i<size ; i++){//矩阵
listOrder.push(order.slice(i*size, (i+1)*size));
};
var list = this.itemList;
for(i=0,len=listOrder.length; i<len; i++){
for(var j=0; j<listOrder[i].length; j++){
itemList[listOrder[i][j]].move(j, i);
}
};
}
};