vue实现推箱子小游戏

思路

在我们平时玩的推箱子游戏中，一般是由人，箱子，终点，在终点的箱子，空地和墙这几个元素组成，由玩家控制人的上下左右移动从而推动箱子，只要所有的箱子都被推到终点，就算是游戏结束。当然，完成基本的游戏功能之后，我们可以自己在展开想象，给自己写的东西添加一些有趣的元素。

规则

确定了基本元素，接下来就要确定游戏规则，这里我只是完成了最基本的规则，也可以自己适当的添加自己想要的规则上去：

1. 人在空地上显示人，箱子在空地上显示箱子，终点在空地上显示终点；
2. 人只能推动箱子，若箱子前面有障碍物（墙，箱子之类的），则无法推动;
3. 人，箱子，终点不能离开墙内；

能想到的规则目前就是这些，不是很详细，但是也没关系，反正我们对这款游戏都是比较熟悉。

实现思路

1. 首先是素材，并不难找，百度一下就可以找到基本完成游戏的一套素材，可能需要自己裁剪一下之类的。
2. 人的移动，这一块比较容易实现，我们可以定下键盘按下什么键，对应着什么样的操作，而我们只需要监听键盘按下的动作即可。
3. 接下来就是这个游戏中唯一的难点，如何走动这个动作。就比如，人经过一个空地，那么这里就会显示为人，人离开了，又会显示为空地，对于箱子，终点也是一样的。

物体移动<