jQuery推箱子小游戏

使用jquery来完成的推箱子小游戏案例。主要功能点有，使用map来构建数组，从而数据来创建地图，并且渲染地图，使用使用keydown来完成人物的移动位置，使用判断来判断是否是墙，通过数组判断墙的位置，并且人物移动箱子是通过检测碰撞判断箱子移动以及人物位置和判断箱子前面是不是墙和是不是俩的箱子的逻辑问题。

视频教程：https://xuexiluxian.cn/course/detail/36ce15bada2b461d8e1a227b77120f17

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 );}}
}

jQuery推箱子小游戏相关推荐

[原创]jQuery推箱子小游戏（100关且可扩展可选关）,休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全（附源码）
Sokoban 介绍 [原创]jQuery推箱子小游戏(100关且可扩展可选关),休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全(附源码) 游戏说明经典的推箱子是一个来自日本的古 ...
c++ 小游戏_C/C++编程笔记：C语言写推箱子小游戏，大一学习C语言练手项目
C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了.这个是我在大一学习 C语言后写的推箱子小游戏,自己的逻辑能力得到了提升,在这里同大家分享这个推箱子小游 ...
简单的c语言推箱子程序,完整版本的推箱子小游戏，最简单的纯C语言打造
/*推箱子小游戏 1.定义绘制样式用二维数组的方式 2.绘制图像 3.找出当前位置 4.逻辑判断,制造动作根据数学xy轴的规律,这里使用ij 上移,行轴上升,行数减少下移,行数下降,函数增加左 ...
c#推箱子小游戏代码_推箱子小游戏V1.0制作
小游戏实践推箱子简易版大家好,我是努力学习争取成为优秀的Game Producer的路人猿,今天来一起做一个推箱子的简易版本V1.0!下面跟我一起做吧~ 我们用到的软件如下: 编辑类 Visual ...
移动平台开发项目(推箱子小游戏）
项目目的:实现一个推箱子小游戏项目架构:使用三个活动类项目功能: 能在touch中的Action_down动作下,实现小人推着箱子走的效果,全部箱子到达旗帜为过关. 能使用底部Button键来前后 ...
win32GDI函数编程实现推箱子小游戏
利用GDI绘图函数实现推箱子小游戏,代码源于上一篇博客 C语言控制台推箱子. 实现方法很简单,把字符用绘图函数绘出的图形替换即可. 从字符控制台到win32界面编程,更加形象化. 代码量大增,主程序就 ...
C++ 简化推箱子小游戏完整代码参考网络资料命令行运行仅供初学者参考交流
C++ 简化推箱子小游戏完整代码参考网络资料命令行运行仅供初学者参考交流说明:学做了4关推箱子, 仅供初学者参考可用g++ 编译,可以将内容复制到TXT文件,将后缀改为".cp ...
手把手教你使用Python实现推箱子小游戏(附完整源码)
文章目录项目介绍项目规则项目接口文档项目实现过程前置方法编写 move核心方法编写项目收尾项目完善项目整体源码项目缺陷分析项目收获与反思项目介绍我们这个项目是一个基于Pytho ...
python推箱子小游戏
推箱子小游戏本次小游戏学习视频:https://www.bilibili.com/video/BV1gz411B71H 相关素材:点击这里 import turtle import levelms ...
PLC也能制作小游戏----Codesys编写推箱子小游戏
1.序言前文已介绍,Codesys编程软件拥有的各种编译方式,以及强大的可视化功能,完全可以实现类似的小游戏程序编写,让疲惫的工控人员在调机的空闲之余可以休闲下,本文编写另一个小游戏,也是十几年前的 ...

jQuery推箱子小游戏

jQuery推箱子小游戏相关推荐

最新文章

热门文章