【分享】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);
}
};
}
};





posted @ 2011-10-30 11:36  Jun.lu  阅读(2797)  评论(6编辑  收藏