如何在React Native中创建纵横字谜

9rnv2umw 于 2023-02-05 发布在 React

关注(0)|答案(2)|浏览(107)

我正在react native中创建一个填字游戏。我在启动游戏板时遇到了问题。我想我应该将填字游戏存储在一个对象中，例如

{
    across: {
        1:  {
        question: "test",
        answer: "test",
        position:(0,0),
        length: 4,
        }
    }
    down:{}
}

创建一个0代表黑色方块、1代表白色方块、2代表单词起始方块的矩阵，然后使用一个平面列表来可视化地构建这个矩阵，这样做有意义吗？
任何帮助或建议的另一种方式做这件事将不胜感激。
干杯，
我试过使用平面列表，但是索引变得非常复杂，我希望有一个更好的方法。

react-native

来源：https://stackoverflow.com/questions/75304641/how-to-create-a-crossword-board-in-react-native

2条答案

按热度按时间

6mzjoqzu1#

我做了一个React Pathfinding可视化工具，基本上只有一个数组，我通过状态来跟踪它是否被填充。Map/ForEach那个网格，然后把你想要的作为另一个组件，我们可以说Node，传递任何需要的信息作为 prop 。
这个例子可能不是最好的，因为它是React而不是React Native（差别真的很小）......而且有很多地方不适用于您的场景，但我认为它显示了我在开始时提到的内容。

<div className="grid">
          {grid.map((row, rowId) => {
            return (
              <div key={rowId}>
                {row.map((node, nodeId) => {
                  const { row, col, isFinish, isStart, isWall } = node;
                  return (
                    <Node
                      key={nodeId}
                      row={row}
                      col={col}
                      isStart={isStart}
                      isFinish={isFinish}
                      isWall={isWall}
                      mouseIsPressed={this.state.mouseIsPressed}
                      onMouseDown={(row, col) => this.handleMouseDown(row, col)}
                      onMouseEnter={(row, col) =>
                        this.handleMouseEnter(row, col)
                      }
                      onMouseUp={() => this.handleMouseUp()}
                    ></Node>
                  );
                })}
              </div>
            );
          })}
</div>

赞(0）回复(0）举报 2023-02-05

nnsrf1az2#

我将纵横字谜数据Map到一个字段数组中，纵横字谜中有三种类型的字段：问题块、可填充块和死块。
在算法上，有无数种选择，其中一种是先将每个问题转换成它的块，然后将所有这些块转换成一个扁平的块数组，并组合起来。
额外提示：考虑使用问题数组而不是用数字索引的对象，这些索引并不重要。

赞(0）回复(0）举报 2023-02-05