用 React 猜数字

React 是一个流行的前端 JavaScript 框架，可以用来构建交互性更强的网站和应用程序。猜数字游戏是一个简单的程序，它可以帮助你学习如何使用 React。

游戏规则

游戏开始时，程序会生成一个 4 位数字，每位数字都在 0-9 之间，且不重复。玩家需要猜出这个数字，每次可以猜测一个 4 位数字，并得到两个提示：

• 猜中了几个数字，并且位置正确的个数。
• 猜中了几个数字，但是位置不正确的个数。

玩家可以根据这些提示，继续猜测直到猜中所有数字。

技术实现

组件结构

我们可以将游戏分成若干个组件，减少代码耦合度，方便维护和复用。以下是游戏组件的结构：

• App 组件
  • Header 组件
  • Game 组件
    • Info 组件
    • Inputs 组件
  • Footer 组件

App 组件

App 组件是整个游戏的入口，它负责渲染 Header、Game 和 Footer 组件，并且传递状态和函数作为 props。以下是 App 组件的代码片段：

import React, { useState } from "react";
import Header from "./Header";
import Game from "./Game";
import Footer from "./Footer";

function App() {
  const [answer, setAnswer] = useState(generateAnswer());
  const [guesses, setGuesses] = useState([]);

  function generateAnswer() {
    // 生成一个不重复的 4 位数字
  }

  function handleGuess(guess) {
    // 处理玩家的猜测
  }

  function handleReset() {
    // 重置游戏并生成新的答案
  }

  return (
    <>
      <Header />
      <Game answer={answer} guesses={guesses} onGuess={handleGuess} onReset={handleReset} />
      <Footer />
    </>
  );
}

export default App;

Game 组件

Game 组件是游戏的主体，它负责渲染 Info 和 Inputs 组件，并且传递状态和函数作为 props。以下是 Game 组件的代码片段：

import React from "react";
import Info from "./Info";
import Inputs from "./Inputs";

function Game({ answer, guesses, onGuess, onReset }) {
  function getFeedback(guess) {
    // 生成猜测的反馈，即“数字和位置都正确的个数”和“数字正确但位置不正确的个数”
  }

  return (
    <div className="game">
      <Info answer={answer} guesses={guesses} />
      <Inputs onGuess={onGuess} onReset={onReset} />
    </div>
  );
}

export default Game;

Info 组件

Info 组件展示玩家猜测的结果和游戏提示。以下是 Info 组件的代码片段：

import React from "react";

function Info({ answer, guesses }) {
  return (
    <div className="info">
      {/* 展示猜测次数和答案 */}
      {/* 展示猜测结果和游戏提示 */}
    </div>
  );
}

export default Info;

Inputs 组件

Inputs 组件负责接收玩家的猜测和重置游戏。以下是 Inputs 组件的代码片段：

import React, { useState } from "react";

function Inputs({ onGuess, onReset }) {
  const [guess, setGuess] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    onGuess(guess);
    setGuess("");
  }

  return (
    <div className="inputs">
      {/* 展示输入框和猜测按钮 */}
      {/* 展示重置按钮 */}
    </div>
  );
}

export default Inputs;

总结

以上是使用 React 实现猜数字游戏的一个示例，使用 React 进行组件化开发，分而治之，减小代码的复杂度和耦合度，有助于提高代码质量和可维护性。如果你对 React 还不熟悉，建议先了解一下 React 的基础知识，熟悉 React 的语法和组件的生命周期，再来尝试编写一个小应用程序。