游戏链接：点击打开链接

效果图：

第100关有些难度，用了449步才过关（我用的是可跳关版的，直接玩的最后一关）

源码解读

源码一共3个文件：index.html(游戏界面加载，核心功能)，js/mapdata100.js（100个16阶矩阵，通过0,1,2,3,4分别对应游戏中5个元素的图片来定义每个地图），image文件夹（存放游戏所需元素图片）

源码下载

没积分的可以通过以下方式获取源码或留下邮箱或加我（QQ2743319061，微信DDZJ-ZXHY备注CSDN推箱子）获取源码

1. index.html

<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>HTML5 canvas小人推箱子小游戏</title><style>/*css样式表的衣柜*//*表示所有控件。1)margin: 0px 就是上、下左、右、均外补白0个像素2)padding: 0px上、下左、右、均内补白0个像素*/*{margin:0px;padding:0px;}body{overflow:hidden;/*隐藏溢出，链接 http://blog.csdn.net/hukaihe/article/details/51298665 */}.game{width:560px;margin:50px auto;}</style></head><body οnkeydοwn="doKeyDown(event)"><!--身体--><div class="game"><canvas id="canvas" width="560" height="560"></canvas><div id="msg"></div><input type="button" value="上一关" onClick="NextLevel(-1)"><input type="button" value="下一关" onClick="NextLevel(1)"><input type="button" value="重玩本关" onClick="NextLevel(0)"><input type="button" value="游戏说明" onClick="showHelp()"></div><script src="js/mapdata100.js">//调用100关的数据地图，参见3.2 </script><script>var can = document.getElementById("canvas");var msg = document.getElementById("msg");var cxt = can.getContext("2d");var w = 35,h = 35;var curMap;//当前的地图var curLevel;//当前等级的地图var curMan;//初始化小人var iCurlevel = 0;//关卡数var moveTimes = 0;//移动了多少次//预加载所有图片var oImgs = {"block" : "images/block.gif","wall" : "images/wall.png","box" : "images/box.png","ball" : "images/ball.png","up" : "images/up.png","down" : "images/down.png","left" : "images/left.png","right" : "images/right.png",}function imgPreload(srcs,callback){var count = 0,imgNum = 0,images = {};for(src in srcs){imgNum++;}for(src in srcs ){images[src] = new Image();images[src].onload = function(){//判断是否所有的图片都预加载完成if (++count >= imgNum){callback(images);}}images[src].src = srcs[src];}}var block,wall,box,ball,up,down,left,right;imgPreload(oImgs,function(images){//console.log(images.block);block = images.block;wall = images.wall;box = images.box;ball = images.ball;up = images.up;down = images.down;left = images.left;right = images.right;init();});//初始化游戏function init(){//InitMap();//DrawMap(levels[0]);initLevel();//初始化对应等级的游戏showMoveInfo();//初始化对应等级的游戏数据}//绘制地板function InitMap(){for (var i=0;i<16 ;i++ ){for (var j=0;j<16 ;j++ ){cxt.drawImage(block,w*j,h*i,w,h);}}}//小人位置坐标function Point(x,y){this.x = x;this.y = y;}var perPosition = new Point(5,5);//小人的初始标值//绘制每个游戏关卡地图function DrawMap(level){for (var i=0;i<level.length ;i++ ){for (var j=0;j<level[i].length ;j++ ){var pic = block;//初始图片switch (level[i][j]){case 1://绘制墙壁pic = wall;break;case 2://绘制陷进pic = ball;break;case 3://绘制箱子pic = box;break;case 4://绘制小人pic = curMan;//小人有四个方向 具体显示哪个图片需要和上下左右方位值关联//获取小人的坐标位置perPosition.x = i;perPosition.y = j;break;case 5://绘制箱子及陷进位置pic = box;break;}//每个图片不一样宽 需要在对应地板的中心绘制地图cxt.drawImage(pic,w*j-(pic.width-w)/2,h*i-(pic.height-h),pic.width,pic.height)}}}//初始化游戏等级function initLevel(){curMap = copyArray(levels[iCurlevel]);//当前移动过的游戏地图curLevel = levels[iCurlevel];//当前等级的初始地图curMan = down;//初始化小人InitMap();//初始化地板DrawMap(curMap);//绘制出当前等级的地图}//下一关function NextLevel(i){//iCurlevel当前的地图关数iCurlevel = iCurlevel + i;if (iCurlevel<0){iCurlevel = 0;return;}var len = levels.length;if (iCurlevel > len-1){iCurlevel = len-1;}initLevel();//初始当前等级关卡moveTimes = 0;//游戏关卡移动步数清零showMoveInfo();//初始化当前关卡数据}//小人移动function go(dir){var p1,p2;switch (dir){case "up":curMan = up;//获取小人前面的两个坐标位置来进行判断小人是否能够移动p1 = new Point(perPosition.x-1,perPosition.y);p2 = new Point(perPosition.x-2,perPosition.y);break;case "down":curMan = down;p1 = new Point(perPosition.x+1,perPosition.y);p2 = new Point(perPosition.x+2,perPosition.y);break;case "left":curMan = left;p1 = new Point(perPosition.x,perPosition.y-1);p2 = new Point(perPosition.x,perPosition.y-2);break;case "right":curMan = right;p1 = new Point(perPosition.x,perPosition.y+1);p2 = new Point(perPosition.x,perPosition.y+2);break;}//若果小人能够移动的话，更新游戏数据，并重绘地图if (Trygo(p1,p2)){moveTimes ++;showMoveInfo();}//重绘地板InitMap();//重绘当前更新了数据的地图DrawMap(curMap);//若果移动完成了进入下一关if (checkFinish()){alert("恭喜过关！！");NextLevel(1);}}//判断是否推成功function checkFinish(){for (var i=0;i<curMap.length ;i++ ){for (var j=0;j<curMap[i].length ;j++ ){//当前移动过的地图和初始地图进行比较，若果初始地图上的陷进参数在移动之后不是箱子的话就指代没推成功if (curLevel[i][j] == 2 && curMap[i][j] != 3 || curLevel[i][j] == 5 && curMap[i][j] != 3){return false;}}}return true;}//判断小人是否能够移动function Trygo(p1,p2){if(p1.x<0) return false;//若果超出地图的上边，不通过if(p1.y<0) return false;//若果超出地图的左边，不通过if(p1.x>curMap.length) return false;//若果超出地图的下边，不通过if(p1.y>curMap[0].length) return false;//若果超出地图的右边，不通过if(curMap[p1.x][p1.y]==1) return false;//若果前面是墙，不通过if (curMap[p1.x][p1.y]==3 || curMap[p1.x][p1.y]==5){//若果小人前面是箱子那就还需要判断箱子前面有没有障碍物(箱子/墙)if (curMap[p2.x][p2.y]==1 || curMap[p2.x][p2.y]==3){return false;}//若果判断不成功小人前面的箱子前进一步curMap[p2.x][p2.y] = 3;//更改地图对应坐标点的值//console.log(curMap[p2.x][p2.y]);}//若果都没判断成功小人前进一步curMap[p1.x][p1.y] = 4;//更改地图对应坐标点的值//若果小人前进了一步，小人原来的位置如何显示var v = curLevel[perPosition.x][perPosition.y];if (v!=2)//若果刚开始小人位置不是陷进的话{if (v==5)//可能是5 既有箱子又陷进{v=2;//若果小人本身就在陷进里面的话移开之后还是显示陷进}else{v=0;//小人移开之后之前小人的位置改为地板}}//重置小人位置的地图参数curMap[perPosition.x][perPosition.y] = v;//若果判断小人前进了一步，更新坐标值perPosition = p1;//若果小动了 返回true 指代能够移动小人return true;}//判断是否推成功//与键盘上的上下左右键关联function doKeyDown(event){switch (event.keyCode){case 37://左键头go("left");break;case 38://上键头go("up");break;case 39://右箭头go("right");break;case 40://下箭头go("down");break;}}//完善关卡数据及游戏说明function showMoveInfo(){msg.innerHTML = "第" + (iCurlevel+1) +"关 移动次数: "+ moveTimes;}//游戏说明var showhelp = false;function showHelp(){showhelp = !showhelp;if (showhelp){msg.innerHTML = "用键盘上的上、下、左、右键移动小人，把箱子全部推到小球的位置即可过关。箱子只可向前推，不能往后拉，并且小人一次只能推动一个箱子。";}else{showMoveInfo();}}//克隆二维数组function copyArray(arr){var b=[];//每次移动更新地图数据都先清空再添加新的地图for (var i=0;i<arr.length ;i++ ){b[i] = arr[i].concat();//链接两个数组}return b;}</script><div style="text-align:center;">
<p>友情链接<a href="http://video.lnkjdx.com/" target="_blank">VIP视频解析</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/2-2-200x300.jpg">支付宝天天领分10亿红包</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/2-1-207x300.jpg">支付宝新春送亲友礼包最高90元</a><a href="http://2a311.lnkjdx.com/wp-content/uploads/2018/03/NZ7WBYFTLOEWAWRPWNY-198x300.jpg">支付宝打赏</a><!-- JiaThis Button BEGIN -->
<div class="jiathis_style" style="text-align:center;"><span class="jiathis_txt">分享到：</span><a class="jiathis_button_cqq">QQ好友</a><a class="jiathis_button_qzone">QQ空间</a><a class="jiathis_button_weixin">微信</a><a class="jiathis_button_tsina">新浪微博</a><a href="http://www.jiathis.com/share?uid=2158478" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a><a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2158478" charset="utf-8"></script>
<!-- JiaThis Button END -->
</p><div style="text-align:center;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1273018669'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1273018669%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script></div>
</div>
</body>
</html>

2. js目录下mapdata100.js下载

3.image文件夹图片下载

【休闲游戏实战1】推箱子PC端小游戏（附源码）相关推荐

【Python】基于人脸识别的智能考勤系统（Pyqt5+MySQL+Opencv） [PC端部分-已附源码]
[Python]基于人脸识别的考勤系统 [PC端部分] 一.项目简介本项目编程语言Python3.6,编程工具pycharm,其他工具QT Designer.Navicat,表单信息保存在本地MyS ...
《推箱子》python小游戏（第二期）
欢迎加入我们卧虎藏龙的python讨论qq群:996113038 ┉┉┉┉┉┉ 『导语』 ┉┉┉┉┉┉ 上期给大家讲了最基本的推箱子原理也就是游戏元素怎么表示我们说了用"棋盘" ...
03【Verilog实战】UART通信协议，半双工通信方式（附源码）
脚本:makefile(点击直达) 应用工具:vcs 和 verdi 写在前面这个专栏的内容记录的是个人学习过程,博文中贴出来的代码是调试前的代码,方便bug重现. 调试后的程序提供下载,[下载地 ...
Java毕设项目校园外卖系统Web端计算机（附源码+系统+数据库+LW）
Java毕设项目校园外卖系统Web端计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
05【Verilog实战】AMBA 3 APB接口设计（附源码RTL/TB）
官方手册:点击下载脚本:makefile 工具:vcs & verdi 写在前面这个专栏的内容记录的是个人学习过程,博文中贴出来的代码是调试前的代码,方便bug重现. 调试后的程序 ...
Spring Cloud微服务实战：手把手带你整合eurekazuulfeignhystrix（附源码）
Spring Cloud微服务实战:手把手带你整合eureka&zuul&feign&hystrix(附源码) Spring Cloud简介 Spring Cloud是一个基于 ...
苏宁易购移动端页面（附源码）
苏宁易购移动端简写首页(附源码) 源码链接:https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码:nbnb 其中有一些属性计算教冗余,建议大家使用vs ...
《推箱子》python小游戏（第一期）
欢迎加入我们卧虎藏龙的python讨论qq群:729683466 ●导语 ● 以前,公众号推送小游戏代码的时候从没有仔细讲过代码的原理主要是代码细节太多了一期根本讲不完这一次我们准备分很多 ...
程序员带你回味童年，一起用C语言做一个“推箱子”玩！【文末源码】
这篇文章是用C语言做了一个推箱子小游戏,实现起来比较简单,和大家一起回味一下童年捧着按键机玩推箱子的日子!文末附带万字源码! 目录一.写在前面二.设计思路 1.主界面函数介绍 2.选择界面函数 3 ...

【休闲游戏实战1】推箱子PC端小游戏（附源码）

游戏链接：点击打开链接

效果图：

源码解读

源码下载

【休闲游戏实战1】推箱子PC端小游戏（附源码）相关推荐

最新文章

热门文章

【休闲游戏 实战1】推箱子PC端小游戏（附源码）

游戏链接 ：点击打开链接

效果图：

源码解读

源码下载

【休闲游戏 实战1】推箱子PC端小游戏（附源码）相关推荐

最新文章

热门文章

【休闲游戏实战1】推箱子PC端小游戏（附源码）

游戏链接：点击打开链接

【休闲游戏实战1】推箱子PC端小游戏（附源码）相关推荐