使用React的猜谜游戏

Question

我正在尝试使用react.js构建一个猜谜游戏，但有两个问题。

我需要算法方面的帮助。我不希望游戏中的（数组）两次返回相同的数字。

我还想在用户失败时将数字保留在内存中，直到他们正确猜出数字，然后游戏中的（数组）应该给出一个新数字。

请查看我的代码：

import {useState, useEffect} from "react"
import { ToastContainer, toast } from 'react-toastify';


const Game = () => {

    const [guessNumber, setGuessNumber] = useState("");

    const [randomNumber, setRandomNumber] = useState()

    const [restart, setRestart] = useState(false);


    const generateRandomNumbers = () => {
        const value = Math.floor(Math.random() * 10);
        return value;
    }

 useEffect(() => {
        setRandomNumber(guessFunction())
    }, [restart])


    

    const handleNumberGuess = (e) => {
        e.preventDefault();
        console.log(randomNumber);
        if (guessNumber == randomNumber){
            // setMessage('You guessed correctly!');
            toast.success('Congratulations! You guessed the number.', {
                position: "top-right",
                autoClose: 5000
            });
            setRestart(true);
          } else {
            // setMessage('Try again!');
            toast.error('Oops! Wrong guess. Try again.', {
                position: "top-right",
                autoClose: 5000,
            });
            setRestart(false);
        }
    }

return (

<Game component /> // UI goes here.......

)

export default Game

Answer 1

为了解决您的问题，我们首先修改算法以确保生成的随机数不会重复。我们可以通过维护一个已经被猜测的数字列表并生成一个新的随机数直到它不在该列表中来实现这一点。

以下是更新代码的方法：

import React, { useState, useEffect } from "react";
import { ToastContainer, toast } from 'react-toastify';

const Game = () => {
    const [guessNumber, setGuessNumber] = useState("");
    const [randomNumber, setRandomNumber] = useState();
    const [guessedNumbers, setGuessedNumbers] = useState([]);
    const [restart, setRestart] = useState(false);

    const generateRandomNumbers = () => {
        const value = Math.floor(Math.random() * 10);
        return value;
    }

    const guessFunction = () => {
        let num;
        do {
            num = generateRandomNumbers();
        } while (guessedNumbers.includes(num));
        return num;
    }

    useEffect(() => {
        setRandomNumber(guessFunction());
    }, [restart]);

    const handleNumberGuess = (e) => {
        e.preventDefault();
        console.log(randomNumber);
        if (guessNumber === randomNumber) {
            toast.success('Congratulations! You guessed the number.', {
                position: "top-right",
                autoClose: 5000
            });
            setRestart(true);
            setGuessedNumbers([]);
        } else {
            toast.error('Oops! Wrong guess. Try again.', {
                position: "top-right",
                autoClose: 5000,
            });
            setRestart(false);
            setGuessedNumbers([...guessedNumbers, guessNumber]);
        }
    }

    return (
        <div>
            <form onSubmit={handleNumberGuess}>
                <input type="number" value={guessNumber} onChange={(e) => setGuessNumber(e.target.value)} />
                <button type="submit">Guess</button>
            </form>
            <ToastContainer />
        </div>
    );
}

export default Game;

在此代码中：

guessFunction：此函数生成一个随机数，但使用

do...while loop

确保该数字不在guessedNumbers 数组中。 在

handleNumberGuess

中，如果用户猜对了，我们通过设置

setRestart(true)

并清除guessedNumbers数组来重置游戏。如果猜测错误，我们将猜测的数字添加到guessedNumbers 数组中。 guessedNumbers 状态跟踪整个游戏中所有猜测的数字。 每次重新启动游戏时，guessedNumbers 数组都会被清除，并生成一个新的随机数。