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

Question

按钮组：

在这种情况下，玩家有 6 步移动，当玩家点击按钮时，他的选择会出现在屏幕上。只有一个正确的组合，即六个按钮 (True) 和两个错误的组合 (False)，玩家选择了他的 6 个按钮后必须点击按钮 (check) 来检查游戏是否正确。如果你是对的，应该出现一个文本字段，说你做对了或者说你做错了再试一次。

问题：

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

Demo

Answer 1

在每个按钮中，您使用两个不同的事件处理点击 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, isRight: true, label: "True 2", clicked: false },
  { id: 3, isRight: true, label: "True 3", clicked: false },
  { id: 4, isRight: true, label: "True 4", clicked: false },
  { id: 5, isRight: true, label: "True 5", clicked: false },
  { id: 6, isRight: true, label: "True 6", clicked: false },
  { id: 7, isRight: false, label: "False 7", clicked: false },
  { id: 8, isRight: false, 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

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

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

word game with buttons with functional react

javascript

buttonclick

reactjs

react-functional-component

use-state