反应字母游戏

Question

react.js 开发的具有功能组件的命中注定游戏**

Answer 1

您缺少的是点击按钮的顺序以及正确答案的顺序。

创建一个状态来维护按钮的 ID 序列，按它们被点击的顺序排列：

const [sequence, setSequence] = useState([]);

按正确（预期）顺序创建一个包含按钮 ID 的数组：

const correctSequence = [1, 5, 3, 8, 2, 4];

然后在 buttonClickHandler 中添加此代码：

setSequence([...sequence, id]);

也在resetGame函数中添加这段代码：

setSequence([]);

最后将 checkIfCorrect 函数更改为：

  const checkIfCorrect = () => {
    if (correctSequence.length === sequence.length) {
      for (let i = 0; i < sequence.length; i++) {
        if (sequence[i] !== correctSequence[i]) {
          setCorrect(false);
          return;
        }
      }
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };

Answer 2

我们可以通过向 buttons 添加另一个道具来实现这一点，点击后无需更改 initialState：我只发布了修改后的代码，完整示例在 codesandbox.

 const buttonClickHandler = (id) => {
    if (count === 0) {
      return;
    }
    setCount(count - 1);
    // Update an array of objects
     setButtons(
      initialState.map((element) =>
        [...buttons]
          .sort((a, b) => (b.label < a.label ? 1 : -1))
          .map((item, index) =>
            item.id === id
              ? {
                  ...item,
                  clicked: true,
                  inOrder: !index
                    ? item.isRight
                    : item.isRight &&
                      buttons.sort((a, b) => (b.label < a.label ? 1 : -1))[
                        index - 1
                      ].clicked,
                  disabled: true
                }
              : item
          )
          .find((item) => item.id === element.id)
      )
    );
  };
...
const checkIfCorrect = () => {
    let correct = buttons.filter(
      (item) => item.clicked === true && item.isRight === true && item.inOrder
    ).length;
    if (correct === 6) {
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };

反应字母游戏

React letter game

arrays

reactjs

react-functional-component