推箱子小游戏

欢迎来到程序小院

玩法：用键盘上的上、下、左、右键移动小人，把箱子全部推到小球的位置即可过关。箱子只可向前推，不能往后拉，并且小人一次只能推动一个箱子^^

开始游戏

<canvas id="canvas" width="560" height="560"></canvas>css

{ width:560px; margin:50px auto; } ntainer-mgs{ display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1.8rem; font-size: 16px; line-height: 1; color: #4a4a4a; } ntainer-but{ display: block; margin: 10px auto; width: 120px; height: 42px; font-size: 13px; color: #fff; font-weight: 300; background: #f4645f; border: 0; text-align: center; border-radius: 3px; cursor: pointer; }js

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" : "/default/game/txz/block.gif", "wall" : "/default/game/txz/wall.png", "box" : "/default/game/txz/box.png", "ball" : "/default/game/txz/ball.png", "up" : "/default/game/txz/up.png", "down" : "/default/game/txz/down.png", "left" : "/default/game/txz/left.png", "right" : "/default/game/txz/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(){ msgnerHTML = "关卡" + (iCurlevel+1) +" <span style='margin-left:30px;'>移动: "+ moveTimes + "</span>"; } //克隆二维数组 function copyArray(arr){ var b=[];//每次移动更新地图数据都先清空再添加新的地图 for (var i=0;i<arr.length ;i++ ) { b[i] = arr[i]ncat();//链接两个数组 } return b; }

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处/d/file/gt/2023-09/ls0eutp0nhy Boxworld 14

Author: Thinking Rabbit

这个关卡网上有不少人问，大多是初学者，其实只要了解了死锁，就非常容易。

显然中间的B箱子不能推。

推A箱子也是同样的推法

很多初学者推到此处大多不会推了，其实箱子想推动必须要有空位，此图空位在左上，利用好就可以过关。

字符型答案：

dRluuRDrRuLrlrurrdLLdddrruLUluurrdLdllllddrUluRRlluurDldR

可用推箱快手识别上面的xsb格式关卡，和答案，下载地址：sokoban. cn/kuaishou/kuaishou.php

动画答案：

三国杀周年庆推箱子怎么推 周年庆推箱子50个关卡通关方法汇总

三国杀周年庆推箱子怎么推？周年庆推箱子有50个关卡，通关的方法其实很简单，但是由于关卡比较多，所以过起来也是很费时间的，下面小编就把推箱子的50个关卡详细的推箱子通关步骤分享出来，具体的大家可以参考下面的文章内容哦~

猜你喜欢：

新三国杀万符将怎么快速积攒

三国杀周年庆推箱子攻略大全

最近更新，大家期待已久的推箱子活动又出来了。明天就是周年庆，应该会有很多大活动出来。

推箱子比较简单。此外它的奖励确实挺丰厚的。

每次过一关都有1个箱子，全部通关还会有1颗史诗宝珠，集卡游戏也会有1颗史诗宝珠，相当于你整个游戏玩下来，相当于斗地主斗了两个月，这种力度你还不心动吗。具体玩法其实也蛮简单的，就是简单的推箱子嘛。

1-50关通关步骤一览

1-5关

第一关：下上左左右上上下右右

第二关：右右右上下左上下左左上右右

第三关：上左左下右右上右下左左左下下右右上上右上左

第四关：左上左上左左下右右右左上右

第五关：上左左下右右上右下左左左下下右右上下左左上上右右

6-10关

第六关：左上上右下下上上右右下左上左左下下右上左上右右

第七关：左上左下右右右下下左左右上右上左左

第八关：下右右上左右下下下左左上左上右右上右下左左左上右右

第九关：上左左右右下下左左右上右上上左左下右下右上

第十关：下左左右上上右上左下左

11-15关

第十一关：左左右右上上左左右右下下左上

第十二关：左左右上上右上左下左右下下右上上

第十三关：左左右上上左上左下右右右上左下下下右上上

第十四关：下下右左上上右下右右上左左右右下下下左上上右上左下左左下右上右右下下左上右上左左

第十五关：下上左左下右下下左上上右下下右右上左下左上上下右上下右上

16-20关

第十六关：下上右右下左下下左左上右下右右上上左上左下右右下下左上上下下左左上右下右上

第十七关：上左左左下下右上右上右下左左左上右右

第十八关：上左左下下上上右右下下下左左上上右左下下右右上上

第十九关：上左左下右左左下下右右右上上左左下

第二十关：下右上右下左左左下下右上上左上右右

21-25关

第二十一关：右上上左左右右下下左上右上左下左

第二十二关：右上上下下左左上上左下右下右右上上左上左右下右下下左左上右上右下左左左上右上右下

第二十三关：右右右上左上上右下下左下左左上右右

第二十四关：下下左下左左上右下右上

第二十五关：上下右右上左上上右下下左上上左左下右右下下左上右上上左左下右上右下

26-30关

第二十六关：右左上上右下右右上左左右右下下下左上上右上左下左左下右上右右下下左上右上左左

第二十七关：下左左左上上上右下左下下右右右上上上左右下下下左左左上上右右上右下下上左左下左下右

第二十八关：上上上左左下上右右下左左上左下右右右下下左左上下右右上上左上左左下右下下左上

第二十九关：下左下左上左上上右下左下右下右右上上左右下下左左上左上上右下

第三十关：上右右下上左左下右下下右右上左下左上上左上右右下左下下右右上左下左上上

31-35关

第三十一关：左上左左下右上右下右下下左左上上左上右下右下

第三十二关：左左下上右右下左下左上右上上左左下右上右下下

第三十三关：左下右下下左上右上上右右下左上左下下左下右上上上左下下

第三十四关：上右下右右上左左下左下下右上左上右上右右下左左右右下左左

第三十五关：右上右上上左下上左左下右下上上右右下下左下左右上右上上左左下右下下左上右上上左左下右下右上

36-40关

第三十六关：左左右右下下左下左左上右下右上右上上左左下右下右上左下下左左上右下右上左上右

第三十七关：左上左左下右下下左上上右上右右下左上左下左下下右右上上右上左下下左

第三十八关：下下左下左左上右左上上右下右左左下下右上下右上右上下左左左上上右下左下下右右上左下左上上右右

第三十九关：下上右右下左下下右上上左下下左左上右右下右上左上上左下右下下左左上右

第四十关：右右下下左下左左上右下右上右上上左左下右下右上左下下左左上右下右上左上右

41-45关

第四十一关：左左左上右右左左左上上上右右下左上左下右右下右右上左下左上下下左左上右上上左下右右右下下下右上

第四十二关：左上左下下右上右右上右下下左上上左左下左上右下下右下右上左上右下右上上

第四十三关：左下左下右右右左左上上上下右右上左上左下左下下右上右上上右左下下左下下右上

第四十四关：右右右右上上上上左左左左下下右右右左左上下下右上右下

第四十五关：上上左下左下下右上左上右下右上左左下下左左上上右右右

45-50关

第四十六关：左下下右右左上左上上右右右右下下左左右右下左左右右上上上左左下

第四十七关：上上左右上上左左下右下右上下下下左上左上上

第四十八关：左左上上下下右右上上左左右上上左下下右右下下左左左左上上右

第四十九关：右左下下下上右下左上上上右下右下下上左下左上上

第五十关：右上上右左下下右上右右下左左右右上上上左下右下下左左上左上右左左上上右下下右下下右右上上左右下左

具体的关卡步骤还是不难的，只要跟着小编的口令走就可以了，而且这一次的奖励也是超丰厚的，过的越多领取的也就越多，所以想要收藏建立的小伙伴一定不要错过这一次的周年庆福利哦~