当我提出带有开放性项目的游戏时，尤其是角色扮演游戏，我倾向于着手制作游戏。 我的想法经常归结为在基于网格的世界中徘徊的经典头像。 我想在响应中重新创建它，并提出了一个基准引擎供我在以后的项目中使用和改进。
网格组件
创建网格时，网格所接收的唯一道具是宽度，用于确定正方形的大小。 可以将其更新为动态的，也可以影响板上的各个正方形的大小。
网格组件将执行的功能主要分为三组。
首先，事件监听器：
componentDidMount =（）=> {
window.addEventListener（“ keydown”，this.handleKeyPress）
} componentWillUnmount =（）=> {
window.removeEventListener（“ keydown”，this.handleKeyPress）
}
在安装组件时，我们要确保我们正在监听窗口中的所有按键。 这样，当板子在屏幕上时，用户将始终能够移动其角色。
比如说，当我们卸载组件时，如果我们去了一个聚会屏幕来检查我们的角色统计数据，我们要确保我们删除了事件监听器。 如果不这样做，那么这将是一个单页应用程序，我们将有两个事件侦听器，每按一次将移动两个空格。
接下来，我们的运动：
handleKeyPress =（e）=> {
切换（e。哪个）{
案例87：
this.move（0，1）;
打破;
案例68：
this.move（1，1）;
打破;
案例83：
this.move（0，-1）;
打破;
案例65：
this.move（1，-1）;
打破;
}
}
switch语句-我选择影响运动的键是WASD。
移动=（目录更改）=> {
让坐标= this.state.selectedSquare
如果（（coords [dir] + change）> -1 &&
（坐标[dir] +更改）<this.props.gridWidth）{
坐标[dir] + =改变
}
this.setState（{
selectedSquare：坐标
}）
}
我们的移动功能沿一个方向（0表示上/下，1表示左/右）并沿该方向进行更改-增大或减小一个。 它检查以确保它没有突破板子的边缘，然后设置状态。
这将我们带到广场：
状态= {
selectedSquare：[0,0]
}
网格从原点开始将所选正方形保持在其状态。
makeSquares =（）=> {
const tile = [“红色”，“蓝色”，“黄色”，“紫色”，“绿色”]
让arr = []
让密钥= 0
for（让i = 0; i <（this.props.gridWidth）; i ++）{
for（let j = 0; j <this.props.gridWidth; j ++）{
arr.push（<平方
x = {j}
y = {i}
键= {键++}
tile = {tile [（Math.floor（Math.random（）* tile.length））]}
selectedSquare = {this.state.selectedSquare} />）
}
}
返回arr
}
这是makeSquares函数。 我们将在render函数中将其称为创建正方形。
我们有一系列可能的图块-在这种情况下为不同的颜色-这将为每个图块提供一个类，从而导致不同的样式。 然后，我们遍历整个网格，并让每个正方形都知道它是哪个正方形以及哪个正方形处于活动状态。
我们在渲染函数中称其为：
render（）{
返回（
<div className =“网格框”
style = {{“ width”：this.props.gridWidth * 150，“ height”：this.props.gridWidth * 150}}>
{this.makeSquares（）}
