推箱子小游戏代码html,js+Jquery 制作推箱子小游戏(示例代码)

Sokaban

.roads{width:50px;height:50px;background:url(img/roods.png);background-size:100% 100%;

}.people{width:50px;height:50px;background-size:100% 100%;

}.box{background:url(img/box.png) !important;background-size:100% 100%;

}.finish{background:url(img/finish.png);background-size:100% 100%;

}.walls{background:url(img/walls.png);background-size:100% 100%;

}

sokaban({"num":20,‘people‘:‘people‘,//人物样式

‘box‘:‘box‘,//盒子样式

‘walls‘:‘walls‘,//墙壁样式

‘finish‘:‘finish‘,//结束样式

‘roads‘:‘roads‘ //路的样式

})functionsokaban(obj) {varnum=obj.num+ 2,//地图大小

people=obj.people,//人物样式

box=obj.box,//盒子样式

walls=obj.walls,//墙壁样式

finish=obj.finish,//结束样式

roads=obj.roads,

$arry=[],

$walls=[];//路的样式

//创建地图

$(‘body‘).append(‘

$(‘#box‘).css({‘position‘:‘absolute‘,‘top‘:‘50px‘,‘left‘:‘50px‘,‘width‘: (50 *num)+ ‘px‘,‘height‘: (50 *num)+ ‘px‘});//循环出路

for(varm= 0; m

$(‘#box‘).append(‘

$(‘.‘ +roads).last().css({‘position‘:‘absolute‘,‘top‘: (top_now)+ ‘px‘,‘left‘: (left_now)+ ‘px‘});

}

}//循环出外墙

for(vark= 1; k<=num*num; k++) {if(k<=num- 1 ||k>num*(num- 1)) {

$(‘.check‘).eq(k- 1).addClass(walls);

$walls.push(k- 1);

}else if(k%num== 0 ||k%num== 1) {

$(‘.check‘).eq(k- 1).addClass(walls);

$walls.push(k- 1);

}

}//添加按钮

$(‘添加墙‘).appendTo(document.body);

$(‘删除‘).appendTo(document.body);

$(‘添加人‘).appendTo(document.body);

$(‘添加结束‘).appendTo(document.body);

$(‘添加箱子‘).appendTo(document.body);

$(‘GO！‘).appendTo(document.body);//为按钮绑定事件

$(‘#remove‘).click(function() {

$(‘.check‘).unbind(‘click‘);

$(‘.check‘).bind(‘click‘,function() {varflag= 1;for(vari= 0; i

flag= 0;

}

}if(flag) {

$(this).attr(‘class‘,‘‘);

$(this).addClass(roads);

$(this).addClass(‘check‘);

}

})

});//添加开始

$(‘#gogo‘).click(function() {

gogogo();

});//添加墙

$(‘#addwalls‘).click(function() {

$(‘.check‘).unbind(‘click‘);

$(‘.check‘).bind(‘click‘,function() {if($(this).hasClass(box)||$(this).hasClass(finish)||$(this).hasClass(people)) {return;

}

$(this).addClass(walls);

});

});//添加人

$(‘#addpeople‘).click(function() {

$(‘.check‘).unbind(‘click‘);

$(‘.check‘).bind(‘click‘,function() {if($(‘.‘ +people).length> 0) {return;

}if($(this).hasClass(box)||$(this).hasClass(finish)||$(this).hasClass(walls)) {return;

}

$(this).addClass(people);

$(‘‘).appendTo($(this));

});

});//添加终点

$(‘#addend‘).click(function() {

$(‘.check‘).unbind(‘click‘);

$(‘.check‘).bind(‘click‘,function() {if($(‘.‘ +finish).length> 5) {

alert(‘不可以大于6！‘);return;

}if($(this).hasClass(box)||$(this).hasClass(people)||$(this).hasClass(walls)) {return;

}

$(this).addClass(finish);

});

});//添加

$(‘#addbox‘).click(function() {

$(‘.check‘).unbind(‘click‘);

$(‘.check‘).bind(‘click‘,function() {if($(‘.‘ +box).length> 5) {

alert(‘不可以大于6！‘);return;

}if($(this).hasClass(finish)||$(this).hasClass(people)||$(this).hasClass(walls)) {return;

}

$(this).addClass(box);

});

});functiongogogo() {if($(‘.‘ +people).length== 0) {

alert(‘必须有人！‘);return;

}if($(‘.‘ +box).length< 1) {

alert(‘必须有箱子！‘);return;

}if($(‘.‘ +box).length!=$(‘.‘ +finish).length) {

alert(‘箱子和终点个数必须统一‘);return;

}

$(‘.check‘).unbind(‘click‘);

$(‘#remove‘).unbind(‘click‘);

$(‘#addwalls‘).unbind(‘click‘);

$(‘#addend‘).unbind(‘click‘);

$(‘#addbox‘).unbind(‘click‘);

$(‘#gogo‘).unbind(‘click‘);

$(window).keydown(function(event) {//当鼠标按下时，传入事件对象~

switch(event.keyCode) {//获取键值码

case 37://如果键值码为37，代表着我的键盘上的左键

move(-1,90)break;//跳出swich

case 38:

move(-num,180)break;//跳出swich

case 39:

move(1,-90)break;//跳出swich

case 40:

move(num,0)break;//跳出swich

}

})

}functionmove(target, deg) {var$index=$(‘.‘ +people).index();

$(‘.check‘).eq($index).find(‘img‘).css(‘transform‘,‘rotate(‘ +deg+ ‘deg)‘);if($(‘.check‘).eq($index+target).hasClass(walls)) {return;

}else if($(‘.check‘).eq($index+target).hasClass(box)) {if($(‘.check‘).eq($index+(target* 2)).hasClass(walls)) {return;

}else if($(‘.check‘).eq($index+(target* 2)).hasClass(box)) {return;

}

}

$(‘.check‘).eq($index).removeClass(people).find(‘img‘).remove();var$pic=$(‘‘);

$pic.css(‘transform‘,‘rotate(‘ +deg+ ‘deg)‘);

$(‘.check‘).eq($index+target).addClass(people).append($pic);if($(‘.check‘).eq($index+target).hasClass(box)) {

$(‘.check‘).eq($index+target).removeClass(box);

$(‘.check‘).eq($index+(target* 2)).addClass(box);var$trueNum= 0;for(varz= 0; z

$trueNum++;

}

}if($trueNum==$(‘.‘ +box).length) {//在这里，我使用了一个setTimeout是因为，在进行测试的时候，发现在chrome中alert会在我移动完之前就会弹出，导致了先出现了弹框，再执行了移动。firefox中的测试是移动箱子和弹框两者同时进行，为了避免在chrome中出现先弹出对话框再执行代码的问题，我使用了延迟100毫秒的方法。

setTimeout(function() {

alert(‘you win‘);

},100);

}

}

}

}