js推盒游戏步骤代码分析

大家一定都玩过推箱子的小游戏。我写这篇文章的原因是这个小游戏简单易懂

演示：

步进分辨率：

本文的代码已经放在github上，并在其中做了详细的代码注释。您可以复制它并在本地运行它。

1.渲染地图

Html结构：

Html的结构很简单，只需要获取一堆div来放置地图的类。我在这里初始化了12*9个div，地图最大高度为9行。这些div的大小都一样，渲染地图时唯一的区别就是颜色。

地图功能：

var box=$('。box div’)；//map函数create()使用的div集{ //创建map函数box . each(function(index){//index)的个数是固定的，也就是box div//Initialize div box . eq(index)下的div个数。每次创建地图时，remove class()；});盒子。每个(函数(索引，元素){//循环整个div的编号。如果2D数组中的数字不足，则默认值为空。//level是级别数。根据级别渲染地图。构建器是一个2D数组，过滤器是0box。eq(指数)。添加类(' type' builder [level])。} });box.eq(原点[级别])。addCLaSS(' pusher ')；//推盒者皮卡丘位置}//第一层地图是这样的(以下只是栗子，不是代码)，0代表无法到达的区域，1代表目标(待推的地方)，//2代表公共路径(可行走)，3代表墙，4代表盒子[0，0，0，3，3，0] 0，3，2，3，3，3，3，3，0，0，3，3，4，2，4，1，3，0，0，0，3，1，2，4，3，3，3，3，4，3，4，4，5，5，6，6，7，8，10，0，0，0，3，1，2，4，2，3，3

捕捉键盘事件，向上和向下，向左和向右，以及wsad。

$(文档)。keydown(函数(e){ var key=e . what；switch(key){ //col的值为12，上下移动以12 div为一个周期。//在方向键或WCase 87: CASE 383360 MOVE(-col)上；//判断移动功能中断；//在方向键或scase 8: case 40: move(col)下；打破；//箭头键为左或case 65: case 373360 move(-1)；打破；//箭头键为右或DCA se 68: case 393360 move(1)；打破；} setTimeout(win，500)；//按下按钮调整判断是否过关})；判断是否可以移动。判断条件有两个：一是推箱子，二是不推箱子自然移动，否则皮卡丘不会移动。

函数move(step){ //是否移动//分为两个判断条件：一个是推盒，一个是不推盒自然移动。否则不要移动皮卡丘//step，上下有12个div循环，一个div positin是皮卡丘的原始位置，var pikaqiu1=box.eq(位置)；//Pikaqiu的当前位置var Pikaqiu2=box.eq(位置步长)；//皮卡丘下一个要去的地方var push box=box.eq(位置step * 2)；//盒子要去的下一个地方如果(！Pikaqiu2。hasclass ('type4') (pikaqiu2。hasclass ('type1') | | pikaqiu2。has class(' type2 ')){//自然移动//判断：如果下一个div的类不包含type4 (box)，下一个div包含type1(目标位置)或type 2(普通路径)//判断这一步和下一步是否有type4的原因是普通路径会变成有type4的路径，那么就会出现pikaqiu1.removeClass('pusher ')的问题；//移除当前的pikaqiu 2 . addCLaSS(' pusher ')；//将皮卡丘移动到下一个位置位置=位置步长；//增加位置值} else if((pikaqiu 2 . has class(' type 4 '))(！推box.hasclass ('type4 ')(推box.hasclass ('Type1') | |推box . has class(' Type2 '))){//推框//如果下一个div的类包含type4(框)且不包含重叠的type4(框)，并且包含class type1(目标位置)或type 2(空路径)pikaqiu 2 . remove class(' type 4 ')；//移除当前框pikaqiu 1 . remove class(' pusher ')；//移除当前的皮卡丘推盒. addclass(' type 4 ')；//将方框移到下一个位置pikaqiu2。addclass ('pusher ')。add class(' type 2 ')；////原来，type4去掉后，这里就没有类了，需要改成正常路径位置=位置步长；//增加位置值}} 3。胜利判断：每次移动都要调用这个胜利判断。

函数win(){ //胜利条件判断if($(. type 1 . type 4 ')。length===goal){//如果(level9) {alert('666，挑战下一个关卡- OBKoro1 ')，将推送的方块数与关卡设置传递的方块数进行比较；水平；//一级目标=goal list[level]；位置=原点[级别]；create()；}else {alert('真棒，大兄弟通关了')；}}}代码地址

演示地址