您的位置：首页 > Web前端 > JQuery

jq游戏----推箱子

2015-06-24 15:27 537 查看

jq游戏----推箱子

参考妙趣课堂视频所写的游戏，练练手还是很不错的，下面附上代码:

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="div1">

</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>index.js
$(document).ready(function(){
Game.init($('#div1')); //初始化
// alert("a");
});

var Game = {
gk: [
{//第一关
map : [
1,1,4,4,4,4,1,1,
1,1,4,2,2,4,1,1,
1,4,4,3,2,4,4,1,
1,4,3,3,3,2,4,1,
4,4,3,3,3,3,4,4,
4,3,3,4,3,3,3,4,
4,3,3,3,3,3,3,4,
4,4,4,4,4,4,4,4
],
xiangzi : [
{x: 4, y: 3},
{x: 3, y: 4},
{x: 4, y: 5},
{x: 5, y: 5}
],
me : {x:3 ,y:6}
}
],

init:function(id){
this.oParent = id;
this.createmap(0);
},
createmap: function(inow){
this.oParent.empty();
this.nowJson = this.gk[inow];

this.oParent.css('width',Math.sqrt(this.nowJson.map.length)*50);
$.each(this.nowJson.map , $.proxy(function(i,elem){ //$.proxy替换this指针
this.oParent.append('<div class="bg'+elem +'"></div>')
},this));
this.createBox();
this.createMe();
},
createBox :function(){ //创建箱子
$.each(this.nowJson.xiangzi,$.proxy(function(i,elem){
var oBox = $('<div class="xiangzi"></div>');
oBox.css({
"left":elem.x*50,
"top":elem.y*50
});
this.oParent.append(oBox);
},this))

},
createMe : function(){ //创建我
var oP = $('<div class="me"></div>');
oP.css({
"left":this.nowJson.me.x*50,
"top":this.nowJson.me.y*50
});
oP.data('x',this.nowJson.me.x);
oP.data('y',this.nowJson.me.y);
this.oParent.append(oP);
this.bindMe(oP);

},
bindMe : function(oP){ //操作人
$(document).keydown($.proxy(function(ev){
switch(ev.which){
case 37://←

this.runMe(oP,{x:-1});
break;
case 38://shang
this.runMe(oP,{y:-1});
break;
case 39://you
this.runMe(oP,{x:1});
break;
case 40://xia
this.runMe(oP,{y:1});
break;
}
},this));

},
runMe :function(oP,opt){
var stepX = opt.x||0;
var stepY = opt.y||0;
if(this.nowJson.map[(oP.data('y')+stepY)*Math.sqrt(this.nowJson.map.length)+oP.data('x')+stepX] !=4){
oP.data('x',oP.data('x')+stepX);
oP.data('y',oP.data('y')+stepY);
oP.css('left' , oP.data('x')*50);
oP.css('top' , oP.data('y')*50);

$('.xiangzi').each($.proxy(function(i,elem){
if(this.pz(oP,$(elem))&&this.nowJson.map[(oP.data('y')+stepY)*Math.sqrt(this.nowJson.map.length)+oP.data('x')+stepX] !=4){//判断是否碰到墙。碰到小乌龟弹回来
$(elem).css('left',(oP.data('x')+stepX)*50);
$(elem).css('top',(oP.data('y')+stepY)*50);

$('.xiangzi').each($.proxy(function(j,elem2){//遇到两个箱子的情况
if(this.pz($(elem),$(elem2))&&elem!=elem2){
$(elem).css('left',(oP.data('x'))*50);
$(elem).css('top',(oP.data('y'))*50);

oP.data('x',oP.data('x')-stepX);
oP.data('y',oP.data('y')-stepY);
oP.css('left' , oP.data('x')*50);
oP.css('top' , oP.data('y')*50);
}
},this));
}else if (this.pz(oP,$(elem))){
oP.data('x',oP.data('x')-stepX);
oP.data('y',oP.data('y')-stepY);
oP.css('left' , oP.data('x')*50);
oP.css('top' , oP.data('y')*50);
}
},this));
}
this.nextShow();

},
nextShow :function(){//下一关
var iNum =0;
$('.bg2').each($.proxy(function(i,elem){
$('.xiangzi').each($.proxy(function(j,elem2){
if(this.pz($(elem),$(elem2))){
iNum++;
}
},this));
},this));

if(iNum==$('.xiangzi').size()){
alert("下一关");
this.createMap(1);
}
},
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(L1>=R2||R1<=L2||B1<=T2||T1>=B2){
return false;
}else{
return true;
}
}
};

index.css

* {margin: 0; padding: 0;}
li {list-style: none;}

#div1 {
position: relative;
margin: 20px auto;
}
.bg1 {
width: 50px;
height: 50px;
float: left;
background-color: #ccc;
}
.bg2 {
width: 50px;
height: 50px;
float: left;
background-color: red;
}
.bg3 {
width: 50px;
height: 50px;
float: left;
background-color: blue;
}
.bg4 {
width: 50px;
height: 50px;
float: left;
background: url(../images/qiang.png) no-repeat;
}
.xiangzi {
position: absolute;
width: 50px;
height: 50px;
background: url(../images/xiangzi.png) no-repeat;
}
.me {
position: absolute;
width: 50px;
height: 50px;
background: url(../images/me.png) no-repeat;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 游戏 jquery web前端

相关文章推荐

新的分享

章节导航