你的位置:首页 > 软件开发 > Java > JavaScript写一个小乌龟推箱子游戏

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

发布时间:2015-06-29 17:00:12
推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例;  推箱子游戏的在线DEMO : 打开  如下是效果图:  这个拖箱子游戏做了移动端的适配, 我使用了zepto的touch模块, 通过手指滑动屏幕就可以控制乌龟走不同的方向 ...

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

  推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频实例

  推箱子游戏的在线DEMO : 打开

  如下是效果图:

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

  这个拖箱子游戏做了移动端的适配, 我使用了zeptotouch模块, 通过手指滑动屏幕就可以控制乌龟走不同的方向;

  因为推箱子这个游戏比较简单, 直接用了过程式的方式写代码, 模块也就是两个ViewModel, 剩下就是用户的事件Controller, 用户每一次按下键盘的方向键都会改变数据模型的数据,然后重新生成游戏的静态html, 然后用innerHTML方式插入到界面, 自动生成DOM节点;

  游戏的关卡模型就是数据, 我把每一关的数据分为三块

  1.   地图数据,二维数组(地图数据包括板砖, 箱子要去的目标位置, 空白的位置)
  2.   箱子数据,一维数组(箱子的初始位置)
  3.   小乌龟的数据,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,1,1,1,0,0,0,0,1,0],            [1,1,3,0,0,1,1,0,1,1],            [1,3,3,0,0,0,0,0,0,1],            [1,3,3,0,0,0,0,0,1,1],            [1,1,1,1,1,1,0,0,1,0],            [0,0,0,0,0,1,1,1,1,0]          ],          person: {x : 8, y : 3},          box: [{x:4, y : 2}, {x:3,y:3} ,{x:4, y:4},{x:5, y:3},{x:6, y:4}]        },        //第四关        {          //0是空的地图          //1是板砖          //3是目标点          state:[            [0,1,1,1,1,1,1,1,0,0],            [0,1,0,0,0,0,0,1,1,1],            [1,1,0,1,1,1,0,0,0,1],            [1,0,0,0,0,0,0,0,0,1],            [1,0,3,3,1,0,0,0,1,1],            [1,1,3,3,1,0,0,0,1,0],            [0,1,1,1,1,1,1,1,1,0]          ],          person: {x : 2, y : 3},          box: [{x:2, y : 2}, {x:4,y:3} ,{x:6, y:4},{x:7, y:3},{x:6, y:4}]        },        //第五关        {          //0是空的地图          //1是板砖          //3是目标点          state:[            [0,0,1,1,1,1,0,0],            [0,0,1,3,3,1,0,0],            [0,1,1,0,3,1,1,0],            [0,1,0,0,0,3,1,0],            [1,1,0,0,0,0,1,1],            [1,0,0,1,0,0,0,1],            [1,0,0,0,0,0,0,1],            [1,1,1,1,1,1,1,1]          ],          person: {x : 4, y : 6},          box: [{x:4, y : 3}, {x:3,y:4} ,{x:4, y:5}, {x:5,y:5}]          /*           box : [           {x:3, y : 1},           {x:4, y : 1},           {x:4, y : 2},           {x:5, y : 5}           ]           */        },          //第六关        {          //0是空的地图          //1是板砖          //3是目标点          state:[            [0,0,0,0,1,1,1,1,1,1,1,0],            [0,0,0,0,1,0,0,1,0,0,1,0],            [0,0,0,0,1,0,0,0,0,0,1,0],            [1,1,1,1,1,0,0,1,0,0,1,0],            [3,3,3,1,1,0,0,0,0,0,1,1],            [3,0,0,1,0,0,0,0,1,0,0,1],            [3,0,0,0,0,0,0,0,0,0,0,1],            [3,0,0,1,0,0,0,0,1,0,0,1],            [3,3,3,1,1,1,0,1,0,0,1,1],            [1,1,1,1,1,0,0,0,0,0,1,0],            [0,0,0,0,1,0,0,1,0,0,1,0],            [0,0,0,0,1,1,1,1,1,1,1,0]          ],          person: {x : 5, y : 10},          box: [            {x:5, y:6},            {x:6, y:3},            {x:6, y:5},            {x:6, y:7},            {x:6, y:9},            {x:7, y:2},            {x:8, y:2},            {x:9, y:6}          ]        }      ]

原标题:JavaScript写一个小乌龟推箱子游戏

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。