JavaScript写一个小乌龟推箱子游戏.docx

JavaScript写一个小乌龟推箱子游戏推箱子游戏是老游戏了， 网上有各种各样的版本， 说下推箱子游戏的简单实现，以及我找到的一些参考视频和实例；推箱子游戏的在线DEMO ： 打开如下是效果图：这个拖箱子游戏做了移动端的适配， 我使用了zepto的touch模块， 通过手指滑动屏幕就可以控制乌龟走不同的方向；因为推箱子这个游戏比较简单， 直接用了过程式的方式写代码， 模块也就是两个View 和 Model， 剩下就是用户的事件Controller， 用户每一次按下键盘的方向键都会改变数据模型的数据，然后重新生成游戏的静态html， 然后用innerHTML方式插入到界面， 自动生成DOM节点；游戏的关卡模型就是数据， 我把每一关的数据分为三块：地图数据，二维数组（地图数据包括板砖， 箱子要去的目标位置， 空白的位置）箱子数据，一维数组（箱子的初始位置）小乌龟的数据，json对象每一个关卡都有对应的游戏关卡数据， 模拟的数据如下：level:?[????????????????{????????????????????//0是空的地图?????????????????????//1是板砖?????????????????????//3是目标点?????????????????????state:[????????????????????????[0,0,1,1,1,0,0,0,0],????????????????????????[0,1,1,3,3,1,0,0,0],????????????????????????[0,1,0,0,0,0,1,0,0],????????????????????????[0,1,0,0,0,0,1,0,0],????????????????????????[0,1,1,1,1,1,1,0,0]????????????????????],????????????????????person:?{x?:?2,?y?:?2},????????????????????box:?[{x:3,?y?:?2},{x:4,y:2}]????????????????},????????????????//第二关?????????????????{????????????????????//0是空的地图?????????????????????//1是板砖?????????????????????//3是目标点?????????????????????state:[????????????????????????[0,1,1,1,1,1,0,0],????????????????????????[0,1,0,0,1,1,1,0],????????????????????????[0,1,0,0,0,0,1,0],????????????????????????[1,1,1,0,1,0,1,1],????????????????????????[1,3,1,0,1,0,0,1],????????????????????????[1,3,0,0,0,1,0,1],????????????????????????[1,3,0,0,0,0,0,1],????????????????????????[1,1,1,1,1,1,1,1]????????????????????],????????????????????person:?{x?:?2,?y?:?2},????????????????????box:?[{x:3,?y?:?2},?{x:2,y:5}?,{x:5,?y:6}]????????????????????/*????????????????????box?:?[????????????????????????{x:3,?y?:?1},????????????????????????{x:4,?y?:?1},????????????????????????{x:4,?y?:?2},????????????????????????{x:5,?y?:?5}????????????????????]????????????????????*/????????????????},????????????????//第三关?????????????????{????????????????????//0是空的地图?????????????????????//1是板砖?????????????????????//3是目标点?????????????????????state:[????????????????????????[0,0,0,1,1,1,1,1,1,0],????????????????????????[0,