react-dnd-dom

by Nicholas Vincent-Hill

尼古拉斯·文森特·希尔(Nicholas Vincent-Hill)

我如何使用react-dnd和react-flip-move构建React游戏 (How I built a React game with react-dnd and react-flip-move)

This is a high level overview of my implementation of a puzzle/word game built entirely in React. It’s not the prettiest code ever written, but I’m happy with my first browser-based game.

这是我完全使用React构建的益智/文字游戏的实现的高级概述。 这不是有史以来最漂亮的代码，但是我对我的第一个基于浏览器的游戏感到满意。

Here’s what I built:

这是我建造的：

Scrabblr —在获得大量乐趣的同时提高您的拼字游戏技能 (Scrabblr — Improve your Scrabble skills while having tons of fun)

背景 (Background)

I was looking at animation solutions in React.js and stumbled upon Joshua Comeau’s react-flip-move demo. I saw the potential to build all sorts of scrabble-like games with his cool drag-and-drop and animated motion interface.

我当时在看React.js中的动画解决方案，偶然发现了Joshua Comeau的react-flip-move 演示 。 我看到了通过其炫酷的拖放和动画运动界面来构建各种拼字游戏的潜力。

技术挑战 (Technical challenges)

装饰与通天塔 (Decorators with Babel)

Joshua Comeau’s react-flip-move requires function decorators, a language feature not supported by create-react-app’s compiler Babel.

Joshua Comeau的react-flip-move需要函数装饰器，create-react-app的编译器Babel不支持该语言功能。

The package react-app-rewired solves this problem by overriding create-react-app Webpack configs without ejecting (something that’s super scary for a noob like me who didn’t want to deal with Webpack’s complexity under the hood).

软件包react-app- rewired通过覆盖create-react-app Webpack配置而不弹出来解决了这个问题(对于像我这样不想接触Webpack复杂性的菜鸟来说，这是非常可怕的)。

The above code allowed me to inject the transform-decorators-legacy plugin (without ejecting) to handle decorators. One problem solved with many more to go.

上面的代码允许我注入transform-decorators-legacy插件(不弹出)来处理装饰器。 一个问题解决了很多。

创建游戏循环 (Creating a game loop)

To me, what separates a cool thing and a “game” is the concept of a game loop.

对我而言，将酷炫的事物和“游戏”分开的是游戏循环的概念。

The main game loop begins with user input (a button clicked to start a new game). The user shuffles tiles and finds words.

游戏的主要循环从用户输入(单击按钮以开始新游戏)开始。 用户洗牌并找到单词。

Every time the user changes the location of a tile, the game checks for any valid words. If the word is valid, it scores that word and increments the total score by the word’s score. It also adds that word to a “Found Words” array so it doesn’t double count if it’s found again in the future.

每次用户更改图块的位置时，游戏都会检查任何有效的单词。 如果该单词有效，它将对该单词进行评分，并将总得分增加该单词的得分。 它还将该单词添加到“ Found Words”数组中，因此将来再次找到它时不会重复计算。

When the user finds all possible words (see below for the implementation of the all possible matches problem) or gives up (clicks the surrender button) the game loop ends and a results modal appears.

当用户找到所有可能的单词(所有可能的匹配问题的实现，请参见下文)或放弃(单击投降按钮)时，游戏循环结束，并出现结果模式。

The data or source of truth is all contained in state and passed to my components with the new React.context API (to avoid prop-drilling). When a new game loop starts, these values are all reset in state.

事实的数据或来源都包含在state并通过新的React.context API传递给我的组件(以避免prop-drilling )。 当新的游戏循环开始时，这些值都将全部重置为state 。

访问图块位置以查找字符 (Accessing tile location to find characters)

This problem took me an embarrassingly long time to solve. The tile’s (x, y) position in the grid matrix is contained in state.tiles.

这个问题使我尴尬地解决了很长时间。 网格矩阵中图块的(x，y)位置包含在state.tiles 。

I needed to be able to scrape letters from tiles by their position and assemble a string to validate. My solution is a complete hack job and I won’t show it here — it’s the checkForWords() method in App.js on my Github, which is in desperate need of refactoring.

我需要能够按其位置从磁贴上刮下一些字母，并组装一个字符串进行验证。 我的解决方案是一项完整的黑客工作，在此不做介绍-这是我在Github上App.js中的checkForWords()方法，它非常需要重构。

验证字 (Validating words)

I also needed a quick way to check if a string of characters was a valid English word. The free dictionary API’s I considered had prohibitively low requests allowed per day and high latency. I needed a solution that allowed me to check an exhaustive local list quickly. The Object.hasOwnProperty() method invoked on a dictionary of 270,000+ key-value pairs works nicely and quickly.

我还需要一种快速的方法来检查字符串是否是有效的英语单词。 我认为免费字典API每天允许的请求数量过低，而延迟却很高。 我需要一个解决方案，使我能够快速检查详尽的本地列表。 在270,000多个键值对的字典上调用的Object.hasOwnProperty()方法可以很好且快速地工作。

The code below is my solution to find all possible valid words given an array of letters. This is how I calculate the number of words remaining to display to the user and know when to end the game loop.

下面的代码是我的解决方案，可以找到给定字母数组的所有可能有效单词。 这是我计算要显示给用户的剩余单词数以及知道何时结束游戏循环的方式。

My original attempt, without utilizing the Object.hasOwnProperty() method and speed optimizations took nearly ten seconds to calculate all possible valid words. This implementation appears nearly instantaneous to the user and is called at the start of a new game loop.

我最初的尝试，没有利用Object.hasOwnProperty()方法和速度优化，花费了将近十秒钟来计算所有可能的有效单词。 这种实现几乎对用户而言是瞬时的，并在新游戏循环开始时被调用。

结论 (Conclusion)

I learned a lot building this project and I’m proud of the result: my game runs fast and looks good. Eventually I’d like to add OAuth and data permanence, high score record keeping, and user-designed levels.

我在构建该项目方面学到了很多东西，我为结果感到骄傲：我的游戏运行速度很快，看起来不错。 最终，我想添加OAuth和数据永久性，高分记录保存以及用户设计的级别。

I’m still new to programming and web design — I’d love to hear your comments/suggestions/critiques in the comments.

我还是编程和网页设计的新手，很想听听您在评论中的评论/建议/评论。

Play Scrabblr here!

在这里玩Scrabblr！

Read Next:

继续阅读：

Introduction and a little about accessing IEX’s API with JavaScript

简介以及有关使用JavaScript访问IEX API的一些知识

翻译自: https://www.freecodecamp.org/news/how-i-built-a-react-game-with-react-dnd-and-react-flip-move-26300156a825/

react-dnd-dom