React学习-推箱子游戏

游戏效果图（共100关）
代码地址：https://download.csdn.net/download/qq_20698983/12740361

目录

• 简述
• 游戏布局
• 按键监听
• 推动箱子和移动人物
• 判断胜利
• 步数器/上一关/下一关/返回上一步

简述

本游戏抛去贴图，可以将游戏界面看成是一个二维数组，游戏的人物、墙、箱子等物体的坐标都是事先定好的，我称它为地图，故本游戏还没开始做时，我就在网上找了两样东西，一是游戏的素材(草地、人物、箱子等图片)，二是游戏地图(一个二维数组)。

游戏布局

布局-数据部分
地图上的每个格子都包含几个属性，即：坐标、格子宽高、贴图、层级(在其它元素上方/下方)，其中坐标就是游戏地图中的坐标，格子宽高是自定义的，贴图上面已经说过了是在网上找的，层级根据元素值去决定，例：箱子肯定要在草地的上面(不能被草地挡住)，所以箱子的层级肯定要比草地高。

加载到游戏地图的二维数组后，对数组进行遍历，定义一个mapNodes变量，将所有坐标保存起来，除此之外，整张地图都需要有草地的贴图，故草地部分需要全部保存。

游戏地图

坐标保存逻辑

布局-元素部分
经过上面的步骤，准备好了数据后，我们开始进行元素布局，我单独定义了一个box组件，用于渲染组件，有一个position属性值得注意，我通过这个属性将所有元素都设置成共用一个中心点，通过设置top和left，计算出该元素所要位移的距离，最终形成整个地图
Box组件逻辑

定义好该组件后，我们只需要将数据部分准备好的mapNodes的值全部遍历，生成地图即可，除此之外我还在游戏地图下方定义了一些按钮，具体内容见下图

按键监听

按键监听极其简单，至于处理逻辑，接着往后看

推动箱子和移动人物

注册按键监听后，会调用到 this.keyClickEvent 方法，我在这个方法中处理哪些键进行响应(这里只监听wasd和右边的键盘方向键)，具体看逻辑

人物如何移动只需要根据方向改变坐标就行了，但移动往往没这么简单，比如说前面是箱子，就需要连着箱子一起推动，前面是空地就只需要人物进行移动，我们先看如何根据方向改变坐标

根据要移动的位置，分别区分有箱子和无箱子的移动法（细心的朋友可以看到我在移动的时候进行了计数和记录历史步骤的逻辑）

无箱子的移动其实就是改变人物的坐标为要到达的坐标
有箱子的移动则是箱子到达目标位置+1，而人物只需要到达目标位置

判断胜利

判断胜利的方法极其简单，因为有两个条件是已知的，使用计数法相当的方便

步数器/上一关/下一关/返回上一步

步数器： 在移动箱子那一节已经讲过了，逻辑异常简单就不在复述
上一关和下一关： 根据当前关卡，加一或减一，重新获取地图数据就行了
返回一上步： 该功能在移动箱子时就已经将当前地图存进了historyStep数组中，在此处则只需要取一下最后一步的数据，将数据塞给当前地图并同时将人物的坐标初始化即可

总结

推箱子游戏主要是为了自己学习React而做的一个小游戏，通过实践清楚的明白了constructor、componentDidMount、render的加载顺序，并通过查阅资料对react整个生命周期也进行了了解，其次是通过提取Box组件，让整个调用逻辑看起来比较清晰简单，后续会通过象棋游戏对React加深了解。