使用React的猜词游戏

使用React的猜词游戏

在本文中,我们将使用ReactJS创建交互式猜词游戏。猜词游戏基本上是一个猜谜游戏,根据提示你需要猜出单词。

该项目基本上实现了功能组件并相应地管理状态。这个游戏允许用户与游戏进行互动,并通过选择字母来猜测隐藏的单词,这个有趣游戏的目的是通过一个互动游戏来测试词汇量。游戏提供了一个提示系统,玩家可以请求一个提示,揭示隐藏单词中的一个字母。这个功能可以帮助那些卡住或者需要一点帮助来进步的玩家。当用户猜错太多次时,游戏结束屏幕会显示。

让我们来看看我们最终项目的交互界面:

使用React的猜词游戏

使用/先决条件的技术:

  • ReactJS
  • CSS
  • JSX
  • React中的函数组件

方法:

开发的Word Guess游戏遵循基于函数组件的方法,创建一个交互和友好的猜词游戏。游戏利用了ReactJS的高效状态管理功能和用于流畅和响应式用户界面的特性。用户可以从屏幕上显示的英文字母中选择字母来猜测隐藏的单词,正确的猜测会更新单词显示,错误的猜测会减少剩余的猜测次数。开发的游戏还包括一些功能,如提示,帮助用户获得关于隐藏单词的一些提示。根据用户的游戏情况,游戏以获胜和失败的场景结束。

创建应用程序的步骤:

步骤1:VSCode IDE中使用以下命令设置React项目。

npx create-react-app <<name of project>>
JavaScript

步骤2: 通过执行以下命令,导航到新创建的项目文件夹中。

cd <<Name_of_project>>
JavaScript

项目结构:

使用React的猜词游戏

package.json中的依赖项将如下所示:

{
  "name": "word-game-gfg",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},
JSON

示例: 将下面的代码插入到上面目录结构中的App.js和App.css文件中。

  • App.js: 此文件包含了游戏的整个逻辑、行为和结构。这里使用了一个钩子(useState)来管理应用程序的状态。为控制应用程序创建了各种按钮。
  • App.css 此文件用于为应用程序提供美观的样式,通过此文件可以实现各种效果、颜色和宽度-高度的管理。
//App.js 
import React, { useState, useEffect } from "react"; 
import "./App.css"; 
  
const sampleWords = [ 
    { 
        word: "HELLO", 
        description: "A common greeting to say hi."
    }, 
    { 
        word: "WORLD", 
        description: "The planet we live on, which is full of land and water."
    }, 
    { 
        word: "JAVASCRIPT", 
        description: "A popular programming language for building interactive websites and provides behaviour to applications."
    }, 
    { 
        word: "REACT", 
        description: "A Javascript library in which we have written this project code"
    }, 
    { 
        word: "PROGRAMMING", 
        description: "The process of developing code to assist computers to perform tasks."
    }, 
    { 
        word: "GEEKSFORGEEKS", 
        description: "An educational website for computer science 'geeks.'"
    } 
]; 
  
const getRandomWord = () => { 
    const randomPlace = Math.floor(Math.random() * sampleWords.length); 
    return sampleWords[randomPlace]; 
}; 
  
const GFGWordGame = () => { 
    const [wordData, setWordData] = useState(getRandomWord()); 
    const [msg, setMsg] = useState(""); 
    const [chosenLetters, setChosenLetters] = useState([]); 
    const [hints, setHints] = useState(3); 
    const [displayWord, setDisplayWord] = useState(false); 
    const [gameOver, setGameOver] = useState(false); 
    const [wrongGuesses, setWrongGuesses] = useState(0); 
  
    useEffect(() => { 
        if (wrongGuesses >= 3) { 
            // Code to show the popup or message for game over 
            window.alert("Game Over! You made too many wrong guesses."); 
            restartGameFunction(); 
        } 
    }, [wrongGuesses]); 
  
    const letterSelectFunction = (letter) => { 
        if (!chosenLetters.includes(letter)) { 
            setChosenLetters([...chosenLetters, letter]); 
            if (!wordData.word.includes(letter)) { 
                setWrongGuesses(wrongGuesses + 1); 
            } 
        } 
    }; 
  
    const hintFunction = () => { 
        if (hints > 0) { 
            const hiddenLetterIndex = wordData.word 
                .split("") 
                .findIndex((letter) => !chosenLetters.includes(letter)); 
            setChosenLetters([...chosenLetters, wordData.word[hiddenLetterIndex]]); 
            setHints(hints - 1); 
        } 
    }; 
  
    const removeCharacterFunction = () => { 
        setChosenLetters(chosenLetters.slice(0, -1)); 
    }; 
  
    const displayLettersFunction = () => { 
        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
  
        return Array.from(letters).map((letter, index) => ( 
            <button 
                key={index} 
                onClick={() => letterSelectFunction(letter)} 
                disabled={chosenLetters.includes(letter)} 
                className={`letter-button { 
                    chosenLetters.includes(letter) ? "selected" : ""
                }`} 
            > 
                {letter} 
            </button> 
        )); 
    }; 
  
    const checkWordGuessedFunction = () => { 
        return wordData.word.split("").every((letter) => chosenLetters.includes(letter)); 
    }; 
  
    const guessFunction = () => { 
        if (checkWordGuessedFunction()) { 
            setMsg("Congo Geek! You have guessed the word correctly!"); 
        } else { 
            setMsg("You made a Wrong Guess Geek!. Try again!"); 
            setDisplayWord(true); 
        } 
    }; 
  
    const restartGameFunction = () => { 
        setWordData(getRandomWord()); 
        setMsg(""); 
        setChosenLetters([]); 
        setHints(3); 
        setDisplayWord(false); 
        setGameOver(false); 
        setWrongGuesses(0); 
    }; 
  
    return ( 
        <div className="container"> 
            <h1>GeeksforGeeks Word Guess Game</h1> 
            <div className="word-container"> 
                {Array.from(wordData.word).map((letter, index) => ( 
                    <div 
                        key={index} 
                        className={`letter{ 
                            chosenLetters.includes(letter) ? "visible" : ""
                        }`} 
                    > 
                        {chosenLetters.includes(letter) ? letter : ""} 
                    </div> 
                ))} 
            </div> 
            <p className="word-description">Hint: {wordData.description}</p> 
            {msg && ( 
                <div className="message"> 
                    <p>{msg}</p> 
                    {displayWord && <p>Correct word was: {wordData.word}</p>} 
                </div> 
            )} 
            <div className="button-section"> 
                <div className="guess-section"> 
                    <button 
                        onClick={restartGameFunction} 
                        className="restart-button"
                    > 
                        Restart 
                    </button> 
                    <button 
                        onClick={removeCharacterFunction} 
                        disabled={!chosenLetters.length} 
                        className="remove-button"
                    > 
                        Remove Letter 
                    </button> 
                </div> 
                <div className="letter-selection"> 
                    {displayLettersFunction()} 
                </div> 
                <div className="hints"> 
                    Hints Remaining: {hints}{" "} 
                    <button 
                        onClick={hintFunction} 
                        disabled={hints === 0} 
                        className="hint-button"
                    > 
                        Get Hint 
                    </button> 
                </div> 
                {!msg && ( 
                    <button 
                        onClick={guessFunction} 
                        disabled={!chosenLetters.length} 
                        className="guess-button"
                    > 
                        Guess 
                    </button> 
                )} 
            </div> 
        </div> 
    ); 
}; 
  
export default GFGWordGame; 
JavaScript

CSS

/* App.css */
.container { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  min-height: 100vh; 
  background-color: #f5f5f5; 
} 
  
h1 { 
  font-size: 36px; 
  margin-bottom: 30px; 
  color: rgb(21, 228, 2); 
} 
  
.word-container { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-bottom: 50px; 
} 
  
.letter { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 60px; 
  height: 60px; 
  margin: 0 5px; 
  border-radius: 50%; 
  font-size: 24px; 
  font-weight: bold; 
  color: #fff; 
  background-color: #333; 
  opacity: 1; 
  transition: opacity 0.2s ease-in-out; 
} 
  
.letter.visible { 
  opacity: 1; 
} 
  
.button-section { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
} 
  
.guess-section { 
  margin-bottom: 30px; 
} 
  
.restart-button, 
.remove-button { 
  padding: 12px 20px; 
  margin-right: 10px; 
  font-size: 16px; 
  font-weight: bold; 
  color: #fff; 
  background-color: #f44336; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  transition: background-color 0.2s ease-in-out; 
} 
  
.remove-button:disabled { 
  background-color: #ccc; 
  cursor: not-allowed; 
} 
  
.restart-button:hover, 
.remove-button:hover { 
  background-color: #d32f2f; 
} 
  
.restart-button:focus, 
.remove-button:focus { 
  outline: none; 
} 
  
.letter-selection { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  margin-bottom: 30px; 
} 
  
.letter-button { 
  padding: 10px 15px; 
  margin: 5px; 
  font-size: 16px; 
  font-weight: bold; 
  color: #fff; 
  background-color: #2196f3; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  transition: background-color 0.2s ease-in-out; 
} 
  
.letter-button.selected { 
  background-color: #1976d2; 
} 
  
.letter-button:disabled { 
  background-color: #ccc; 
  cursor: not-allowed; 
} 
  
.hints { 
  margin-bottom: 20px; 
  font-size: 20px; 
  font-weight: bold; 
  color: #333; 
} 
  
.hint-button { 
  padding: 12px 20px; 
  font-size: 16px; 
  font-weight: bold; 
  color: #fff; 
  background-color: #4caf50; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  transition: background-color 0.2s ease-in-out; 
} 
  
.hint-button:disabled { 
  background-color: #ccc; 
  cursor: not-allowed; 
} 
  
.hint-button:hover { 
  background-color: #388e3c; 
} 
  
.hint-button:focus { 
  outline: none; 
} 
  
.message { 
  font-size: 24px; 
  font-weight: bold; 
  color: #333; 
  text-align: center; 
  margin-bottom: 20px; 
} 
  
.guess-button { 
  padding: 12px 30px; 
  margin-top: 20px; 
  font-size: 18px; 
  font-weight: bold; 
  color: #fff; 
  background-color: #ff5722; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  transition: background-color 0.2s ease-in-out; 
} 
  
.guess-button:disabled { 
  background-color: #ccc; 
  cursor: not-allowed; 
} 
  
.guess-button:hover { 
  background-color: #e64a19; 
} 
  
.guess-button:focus { 
  outline: none; 
} 
.word-description { 
  font-size: 18px; 
  font-style: bold; 
  color: rgb(0, 0, 0); 
  margin-bottom: 20px; 
}
CSS

运行应用程序的步骤:

1. 在终端中执行以下命令。

npm start
JavaScript

2. 打开网络浏览器,然后在地址栏中输入以下URL。

http://localhost:3000/
JavaScript

输出:

使用React的猜词游戏

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册