js推箱子小游戏步骤代码解析


Posted in Javascript onJanuary 10, 2018

推箱子小游戏大家肯定都玩过,之所以写这篇文章,是觉得这个小游戏足够简单好理解

demo:

js推箱子小游戏步骤代码解析

步骤解析:

本文代码已经放在了github上面了,里面也进行了很详细的代码注释,可以copy下来,在本地运行一下看看。

1. 渲染地图

html结构:

js推箱子小游戏步骤代码解析

html结构十分简单,只要弄一堆div,来放置地图的class就可以了,我这里初始化了12*9个div,地图里最多九行高度。
这些div都是同样大小,地图渲染出来区别的只是颜色的不同。

地图函数:

var box=$('.box div'); //地图使用的div集合
 function create(){ //创建地图函数
 box.each(function(index){ //index的数量是固定的,是box div下面div的数量
  // 每次创建地图初始化div
  box.eq(index).removeClass();
 });
 box.each(function(index,element){ //循环整个div的数量 二维数组里数量不够的 默认为空白
 //level为关卡数 根据关卡渲染地图 builder为二维数组,为地图关卡
  if(builder[level][index]){ //过滤0
   box.eq(index).addClass('type'+builder[level][index]);
  }
 });
 box.eq(origin[level]).addClass("pusher"); //推箱人 皮卡丘位置
 }
 //第一关的地图长这样(下面只是栗子,不是代码),0代表不可抵达区域,1代表目标(要被推到的地方),
 //2代表普通路径(可以走的),3代表墙,4代表箱子
 [0,0,0,0,3,3,3,0,0,0,0,0,
 0,0,0,0,3,1,3,0,0,0,0,0,
 0,0,0,0,3,2,3,3,3,3,0,0,
 0,0,3,3,3,4,2,4,1,3,0,0,
 0,0,3,1,2,4,2,3,3,3,0,0,
 0,0,3,3,3,3,4,3,0,0,0,0,
 0,0,0,0,0,3,1,3,0,0,0,0,
 0,0,0,0,0,3,3,3,0,0,0,0]

2. 捕获键盘事件,判断是否可以移动
使用$(document).keydown()jqery事件,捕获键盘事件。

捕获键盘事件,上下左右以及wsad。

$(document).keydown(function (e) {
 var key=e.which;
 switch(key){
 //col 的值为12,上下移动要12个div为一个周期
 //方向键上或者w
 case 87:
 case 38:
  move(-col);//判断移动函数
 break;
 //方向键下或者s
 case 83:
 case 40:
  move(col);
 break;
 //方向键左或者a
 case 65:
 case 37:
  move(-1);
 break;
 //方向键右或者d
 case 68:
 case 39:
  move(1);
 break;
 }
 setTimeout(win,500); //按键之后调判断是否过关
 });

判断是否可以移动。
分为两个判断条件:一个是推箱子,一个是不推箱子 自然移动,否则不移动皮卡丘。

function move(step){ //是否移动判断
   // 分为两个判断条件一个是推箱子,一个是不推箱子 自然移动。 否则不移动皮卡丘
   //step 上下是12个div一个周期,左右是1个div positin是皮卡丘的原来位置
  var pikaqiu1=box.eq(position);//皮卡丘现在的地方
  var pikaqiu2=box.eq(position+step);//皮卡丘要去的下一个地方
  var pushBox=box.eq(position+step*2);//箱子要去的下一个地方
  if(!pikaqiu2.hasClass('type4')&&( pikaqiu2.hasClass('type1')||pikaqiu2.hasClass('type2'))){ //自然移动
   //判断:如果下一个div的class不包含type4(箱子),并且 下一个div含有type1(目标位置),或者type2(普通路径)
   //这一步和下一步判断是否有type4的原因是普通路径会变成有type4的路径,这时候就会出现问题
   pikaqiu1.removeClass("pusher"); //移除当前皮卡丘
   pikaqiu2.addClass("pusher");//移动皮卡丘到下一个位置
   position=position+step;//增加position值
  }
  else if((pikaqiu2.hasClass('type4'))&&(!pushBox.hasClass('type4'))&&(pushBox.hasClass('type1')|| pushBox.hasClass('type2')) ) {
   //推箱子 
   //如果下一个div的class包含type4(箱子)并且 不包含重叠type4(箱子) 并且 包含class type1(目标位置)或者 包含type2(空路)
   pikaqiu2.removeClass('type4');//移除当前箱子
   pikaqiu1.removeClass("pusher");//移除当前皮卡丘
   pushBox.addClass('type4');//移动箱子到下一个位置
   pikaqiu2.addClass("pusher").addClass("type2");//
   //本来是type4 移除之后,这里没有class了,要变成普通路径
   position=position+step;//增加position值 
  }
 }

3.胜利判断:
每次移动都要调用这个胜利判断。

function win(){ //胜利条件判断
 if($(".type1.type4").length===goal){ //推的箱子与关卡设置通过箱子的数量对比
  if(level<9) {
   alert("666,挑战下一关吧--OBKoro1");
   level++; //关卡+1
   goal = goalList[level];
   position = origin[level];
   create();
  }else {
   alert("厉害啊 大佬 通关了都");
  }
 }
}

代码地址

demo地址

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 #Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 #Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 #Javascript
10个经典的网页鼠标特效代码
Jan 09 #Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 #Javascript
JavaScript实现多重继承的方法分析
Jan 09 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
vue 指定组件缓存实例详解
2018/04/01 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python之import机制详解
2014/07/03 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python循环输出三角形图案的例子
2019/11/22 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
大学活动策划书范文
2014/01/10 职场文书
护士辞职信模板
2014/01/20 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
暑假家长评语大全
2014/04/17 职场文书
保护环境倡议书300字
2014/05/19 职场文书
音乐学专业求职信
2014/07/22 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
党支部审查意见
2015/06/02 职场文书
民政局未婚证明
2015/06/15 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书