前言最近写的文章不多，停了好久。学前端一年多了，快两年了。与刚开始相比，我的学习热情并没有太大的变化，只是学习的动力似乎时断时续。就好像没有目标一样，不知道现在应该学什么，从哪里提高自己，是为了工作还是为了程序员的职业生涯。我沉醉了一会儿，果然出现了平躺的状态。我不知道今天发生了什么。突然想起来，好久没有写博客了。一边想着写什么，一边找我之前的github项目。正好看到之前给别人写的一个推箱子的小游戏，就记下来了。本文。思路在我们平时玩的推箱子游戏中，一般是由人、箱子、终点、终点处的箱子、空地和墙组成的。玩家控制人上下左右移动来推动箱子。只要把所有的箱子都推到最后，就算游戏结束了。当然，在完成了基本的游戏功能后，我们还可以扩展自己的想象力，在写的东西中加入一些有趣的元素。规则确定了基本要素，接下来就是确定游戏规则了。这里我只完成了最基本的规则，大家还可以添加自己想要的规则：people在空地上显示人，boxes在空地上显示box，endpoint在空地上显示终点；人只能推箱子，如果箱子前面有障??碍物（墙壁、箱子等）不能推；人、箱子、终点不能离开墙；能想到的规则就是这些，不是很详细，不过没关系，反正我们对这个游戏还是比较熟悉的。实现的想法首先是素材，素材不难找。随便百度一下就能找到一套基本完成游戏的素材，可能还需要自己裁剪。人体运动相对容易实现。我们可以判断键盘上按下了什么键，对应什么样的操作，我们只需要监听按下键盘的动作即可。接下来就是这个游戏唯一的难点，如何绕过这个动作。例如，如果一个人经过一个空地，就会显示为一个人，如果人离开，就会再次显示为一个空地。对于盒子，终点是相同的。对象移动到这里，我给每个元素都设置了一个值。首先是设置最基本元素的值，比如1为box。下面的代码是对不同状态元素的简单配置：mapElementName:{0:{name:'Wallspace',icon:require('@/assets/image/wallspace.png'),type:'move'//可移动类型，表示在任何情况下都可以移动},1:{name:'box',icon:require('@/assets/image/box.png'),type:'MF'//move&&fix,表示不确定类型，可移动或不可移动},2:{name:'endpoint',icon:require('@/assets/image/endpoint.png'),type:'move'},3:{name:'box&&endpoint',icon:require('@/assets/image/box&&endpoint.png'),类型:'MF'},10:{name:'person',icon:require('@/assets/image/person.png'),type:'fix'},12:{name:'person',icon:require('@/assets/image/person.png'),type:'fix'},109:{name:'人',icon:require('@/assets/image/Person.png'),类型:'fix'},98:{name:'Wall',icon:require('@/assets/image/wall.png'),type:'fix'},99:{name:'wallspace',icon:require('@/assets/image/wallspace.png'),典型e:'move'}}，简单解释就是：2表示终点，10表示人，人移动到终点，即10+2=12，那么12表示人移动的时候到终点，人一走，就是12-10=2，2代表终点上面的思路理解了，接下来就可以写代码了相关实现代码监听键盘上下左右//循环判断人物当前位置this.mapArray.forEach((item,index)=>{item.forEach((array,temp)=>{if(this.mapElementName[array].name==='person'){this.manPosition=[index,temp]}})})//判断点击的键盘//传递的参数：人在哪里，人要移动的位置的相关元素信息和下一个信息constman=this.manPositionconstarray=this.mapArrayconstname=this.mapElementNameswitch(e.keyCode){case38:this.toTop(name[array[man[0]-1][man[1]]],man[0]-2<0?false:name[array[man[0]-2][man[1]]])breakcase40:this.toBottom(名称[array[man[0]+1][man[1]]],man[0]+3>this.maxRow?false:name[array[man[0]+2][man[1]]])打破case37:this.toLeft(name[array[man[0]][man[1]-1]],man[1]-2<0?false:name[array[man[0]][man[1]-2]])中断案例39：this.toRight(name[array[man[0]][man[1]+1]],man[1]+3>this.maxColumn?false:name[array[man[0]][man[1]+2]])}当敲击键盘时，因为我们控制的是一个人，所以先循环判断人当前位置，然后移动这段代码。可以很明显的看出，每次敲击键盘，一直在循环中找出人的位置，这是不合理的。我们可以定义一个变量来存储人的当前位置。（不想改之前的代码，只是解释一下：clown_face::clown_face:)然后根据点击不同的键执行不同的操作，下面是向下操作的代码（其他操作类型）：//1.bottomoftheperson是一堵墙if(next.type==='fix'){return}//2.人的底部是一个盒子，盒子的底部是一个盒子还是一个盒子&&the终点或墙if(next.type==='MF'&&doubleNext){if(doubleNext.type==='MF'||doubleNext.type==='fix'){return}//开始移动//人的位置减10，下面的位置减去box加人，往下面的位置加boxthis.mapArray[this.manPosition[0]][this.manPosition[1]]-=10this.mapArray[this.manPosition[0]+1][this.manPosition[1]]-=1this.mapArray[this.manPosition[0]+1][this.manPosition[1]]+=10this.mapArray[this.manPosition[0]+2][this.manPosition[1]]]+=1}//3.人的底部是空地或者终点if(next.type==='move'){//人的位置减10，最下面的位置加10this.mapArray[this.manPosition[0]][this.manPosition[1]]-=10this.mapArray[this.manPosition[0]+1][this.manPosition[1]]+=10}//刷新页面this.$forceUpdate()嗯，有几种情况，但是当我看到这个.$forceUpdate()的时候，不由的摇了摇头(:clown_face::clown_face:)一般一个基本的推箱子游戏就玩完了，总体难度是不大，适合练习。最终效果：资料片是因为推箱子的地图收集（太费时间，不同的人心里可能会有自己的关卡），为了增加游戏的灵活性，我当时，我加入了我自己的DIY模式，让玩家可以设计自己的地图。实现思路大致分为以下几个步骤：提供选项，自己选择地图的大小；根据玩家选择的地图大小，生成相应大小的地图网格。每个格子默认是墙上的一块空地，玩家可以点击格子，会有一个可以设置为地图元素的选项，你可以自由设计。每个方块中可以设置的元素是不同的，以保证玩家设计的地图可以玩。当然，代码可以随意改，生成的图也可以随意改。实现效果最后，从整体实现来看，推箱子的逻辑并不复杂。当然，因人而异，可以设计得很复杂。给我项目地址的原链接
