使用jquery来完成的推箱子小游戏案例。主要功能点有，使用map来构建数组，从而数据来创建地图，并且渲染地图，使用使用keydown来完成人物的移动位置，使用判断来判断是否是墙，通过数组判断墙的位置，并且人物移动箱子是通过检测碰撞判断箱子移动以及人物位置和判断箱子前面是不是墙和是不是俩的箱子的逻辑问题。
HTML代码：
<body>
<div id='container'></div>
<script type="text/javascript" src='js/jquery-1.11.min.js'></script>
<script type="text/javascript" src='js/script.js'></script>
</body>
CSS代码：
<style type="text/css">
*{margin: 0;padding:0;}
#container{
position: relative;
margin:50px auto;
}
.pos0{
float:left;
width:50px;
height: 50px;
background: blue;
}
.pos1{
float:left;
width:50px;
height: 50px;
background: #666;
}
.pos2{
float:left;
width:50px;
height: 50px;
background: url(images/wall.png) no-repeat;
}
.pos3{
float:left;
width:50px;
height: 50px;
background:red;
}
.box{
position: absolute;
width:50px;
height: 50px;
background: url(images/box.png) no-repeat;
}
.person{
position: absolute;
width:50px;
height: 50px;
background: url(images/person.png) no-repeat;
}
</style>
JS代码：
$(function(){
game.init( $('#container') )
});
var game = {
//地图数据
gk:[
{
map:[
1,1,2,2,2,2,1,1,
1,1,2,3,3,2,1,1,
1,2,2,0,3,2,2,1,
1,2,0,0,0,3,2,1,
2,2,0,0,0,0,2,2,
2,0,0,2,0,0,0,2,
2,0,0,0,0,0,0,2,
2,2,2,2,2,2,2,2
],
box:[
{x:4,y:3},
{x:3,y:4},
{x:4,y:5},
{x:5,y:5}
],
person:{x:3,y:6}
},
{
map:[
1,1,2,2,2,2,1,1,
1,1,2,3,3,2,1,1,
1,2,2,0,3,2,2,1,
1,2,0,0,0,3,2,1,
2,2,0,0,0,0,2,2,
2,0,0,2,0,0,0,2,
2,0,0,0,0,0,0,2,
2,2,2,2,2,2,2,2
],
box:[
{x:4,y:3},
{x:3,y:4},
{x:4,y:5},
{x:5,y:5}
],
person:{x:4,y:6}
}
],
//初始化方法 ===> 开始执行游戏
init:function( selector ){
//可以让其他方法使用，把selector弄成对象的属性
this.selector = selector;
//执行绘制地图
this.createMap( 0 );
},
//创建地图
createMap:function( num ){
this.selector.empty();
document.title = '第'+(num+1)+'关';
//获取到地图数据
this.newMap = this.gk[num];
//设置父元素的宽度
this.selector.css('width',Math.sqrt(this.newMap.map.length) * 50 );
//往父元素中添加子元素(添加地图元素)
$.each(this.newMap.map,$.proxy(function(index,item){
this.selector.append('<div class="pos'+ item +'"></div>');
},this));
//创建箱子
this.createBox();
//创建人物
this.createPerson();
},
//创建箱子
createBox:function(){
$.each( this.newMap.box , $.proxy(function(index,item){
var oBox = $('<div class="box"></div>');
oBox.css('left', item.x * 50 );
oBox.css('top', item.y * 50 );
this.selector.append(oBox);
},this));
},
//创建人物
createPerson:function(){
var oPerson = $('<div class="person"></div>');
oPerson.css('left',this.newMap.person.x * 50);
oPerson.css('top',this.newMap.person.y * 50);
//存储当前人物的位置
oPerson.data('x',this.newMap.person.x);
oPerson.data('y',this.newMap.person.y);
this.selector.append(oPerson);
//人物移动调用
this.bindPerson( oPerson );
},
//人物移动
bindPerson:function(oPerson){
$(document).keydown($.proxy(function(e){
var code = e.keyCode;
switch(code){
case 37:
oPerson.css('backgroundPosition','-150px 0');
this.movePerson(oPerson,{x:-1});
break;
case 38:
oPerson.css('backgroundPosition','0 0');
this.movePerson(oPerson,{y:-1});
break;
case 39:
oPerson.css('backgroundPosition','-50px 0');
this.movePerson(oPerson,{x:1});
break;
case 40:
oPerson.css('backgroundPosition','-100px 0');
this.movePerson(oPerson,{y:1});
break;
}
},this))
},
//移动函数
movePerson:function(oPerson,obj){
//移动的方向值
var xValue = obj.x || 0;
var yValue = obj.y || 0;
//判断走的位置是不是墙
if( this.newMap.map[ (oPerson.data('y') + yValue ) * Math.sqrt( this.newMap.map.length) + (oPerson.data('x') + xValue) ] !=2 ){
//之前记录的原始值
oPerson.data('x',oPerson.data('x') + xValue );
oPerson.data('y',oPerson.data('y') + yValue );
//位置移动
oPerson.css('left',oPerson.data('x') * 50 );
oPerson.css('top',oPerson.data('y') * 50 );
//箱子移动
$('.box').each($.proxy(function(index,ele){
//检测箱子和人物碰撞情况
if( this.pz( oPerson,$(ele) ) && this.newMap.map[ (oPerson.data('y') + yValue ) * Math.sqrt( this.newMap.map.length) + (oPerson.data('x') + xValue) ] !=2 ){
$(ele).css('left',(oPerson.data('x') + xValue)*50);
$(ele).css('top',(oPerson.data('y') + yValue)*50);
//俩个箱子的情况
$('.box').each($.proxy(function( i ,element ){
if( this.pz( $(ele),$(element) ) && ele != element ){
$(ele).css('left',oPerson.data('x') * 50);
$(ele).css('top',oPerson.data('y') * 50);
oPerson.data('x',oPerson.data('x') - xValue );
oPerson.data('y',oPerson.data('y') - yValue );
oPerson.css('left',oPerson.data('x') * 50);
oPerson.css('top',oPerson.data('y') * 50);
}
},this))
//让人物回到该回的位置
}else if( this.pz( oPerson,$(ele) ) ){
oPerson.data('x', oPerson.data('x') - xValue );
oPerson.data('y', oPerson.data('y') - yValue );
oPerson.css('left' , oPerson.data('x') * 50 );
oPerson.css('top' , oPerson.data('y') * 50 );
}
},this));
}
//进入到下一关
this.nextShow();
},
//检测碰撞
pz:function( obj1,obj2 ){
//人物的位置
var L1 = obj1.offset().left;
var R1 = obj1.offset().left + obj1.width();
var T1 = obj1.offset().top;
var B1 = obj1.offset().top + obj1.height();
//箱子的位置
var L2 = obj2.offset().left;
var R2 = obj2.offset().left + obj2.width();
var T2 = obj2.offset().top;
var B2 = obj2.offset().top + obj2.height();
if( R1 <= L2 || L1 >= R2 || T1 >= B2 || B1 <= T2 ){
return false;
}else{
return true;
}
},
//进入到下一关
nextShow:function(){
var isNum = 0;
$('.box').each($.proxy(function(index,ele){
$('.pos3').each($.proxy(function( i , element ){
if( this.pz( $(ele) ,$(element) ) ){
isNum++;
}
},this))
},this))
if( isNum == this.newMap.box.length ){
this.createMap( 1 );
}
}
}
