带有功能性反应按钮的文字游戏

如何解决带有功能性反应按钮的文字游戏

按钮组：

在这种情况下，玩家有 6 步，因为玩家点击按钮，他的选择就会出现在屏幕上。只有一个正确的组合，即六个按钮（真）和两个错误的（假），在玩家选择了他的 6 个按钮后，必须点击按钮（检查）来检查游戏是否正确。如果你是对的，应该会出现一个文本字段，说你做对了，或者说你做错了，请重试。

问题：

当我点击第一个按钮时，计数器不工作，只在下一次点击时工作。
如何检查序列是否正确？请记住，如果您的 6 个按钮序列中有一个错误的按钮，则它是错误的，要使其正确，序列必须是 6 个按钮为真。
重启按钮是否刷新浏览器，是否还有其他选项可以重置所有内容并返回初始状态？

Demo

解决方法

在每个按钮中，您使用两个不同的事件 onClick 和 onMouseDown
处理点击通过创建对象数组检查序列是否正确，每个对象将是一个具有唯一 id 的按钮。您需要计算真正被点击的按钮的数量。
我们需要使用 react 而不是 Javascript BOM 重新启动游戏，将 buttons 和 count 设置为初始状态将重置游戏。

这是完整的工作代码

import "./styles.css";
import React,{ useState } from "react";

// We need to loop over this array to render buttons and answeres
// Id : to handle click on target button
// isRight : weather the answer is right or wrong
// clicked: weather button clicked or not
const initialState = [
  { id: 1,isRight: true,label: "True 1",clicked: false },{ id: 2,label: "True 2",{ id: 3,label: "True 3",{ id: 4,label: "True 4",{ id: 5,label: "True 5",{ id: 6,label: "True 6",{ id: 7,isRight: false,label: "False 7",{ id: 8,label: "False 8",clicked: false }
];

export default function App() {
  // Button Restart refresh Page
  // reset counter and count to their inital states will reset the game
  function resetGame() {
    setButtons(initialState);
    setCount(6);
    setCorrect(null);
  }

  const [buttons,setButtons] = useState(initialState);

  // Counter
  const [count,setCount] = useState(6);
  const [correct,setCorrect] = useState(null);

  // Click handler will handle both count and buttons changes
  const buttonClickHandler = (id) => {
    if (count === 0) {
      return;
    }
    setCount(count - 1);
   // Update an array of objects
    setButtons(
      buttons.map((item) =>
        item.id === id ? { ...item,clicked: !item.clicked } : item
      )
    );
  };

  // We are counting the clicked buttons which have a property isRight : true
  const checkIfCorrect = () => {
    let correct = buttons.filter(
      (item) => item.clicked === true && item.isRight === true
    ).length;
    if (correct === 6) {
      setCorrect(true)
    } else {
      setCorrect(false)
    }
  };

  return (
    <div className="App">
      <div>
        <button onClick={resetGame} refresh="true">
          RestartNew
        </button>
        <h3>Chances: 6</h3>
        {count}
      </div>

      <div>
        <h2>Answers</h2>
        {buttons.map(
          (button) =>
            button.clicked && <button key={button.id}>{button.label}</button>
        )}
      </div>
      <h2>Buttons Questions!</h2>
      {/* Question buttons */}
      {buttons.map((button) => (
        <button key={button.id} onClick={() => buttonClickHandler(button.id)}>
          {button.label}
        </button>
      ))}

      <br />
      <br />
      <h2>Checker</h2>
      <button onClick={() => checkIfCorrect()}>Check Answers</button>
      <br />
      <br />
      // Check correct and render your components
      {correct != null && correct && <div>correct</div>}
      {correct != null && !correct && <div>Wrong</div>}
    </div>
  );
}

Working Demo

对不起，我的英语不好^_^