HTML5推箱子小游戏源码共100关哦！

推箱子小游戏
源码链接地址：https://github.com/shunyue1320/sokoban.git
[h1]推箱子小游戏展示效果图：[/h1]

[h1]源码链接地址：https://github.com/shunyue1320/sokoban.git[/h1]进入后执行如下图步骤就能下载到自己电脑上啦！

[h1]接下来了解一下我们用到的素材吧：[/h1]目标点 / 草坪 / 箱子 / 人物 / 障碍物

[h1]html样式就这么简单通过canvas绘制游戏地图：[/h1]

[/code][code]

复制代码

[h1]游戏关卡我们使用 mapdata100.js封存！[/h1]

//1：围墙 2：目标点 3：箱子 4：人物

复制代码

var levels=[];

复制代码

levels[0]=[

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],

复制代码

[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],

复制代码

[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],

复制代码

[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

复制代码

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];

复制代码

[h1]通过关卡的坐标值我们选择对应的图片填入canvas画布：[/h1]

//绘制每个游戏关卡地图

复制代码

function DrawMap(level){

复制代码

[code] for (var i=0;i

HTML5推箱子小游戏 源码 共100关哦！

HTML5推箱子小游戏源码共100关哦！