我用Next.js尝试制作了一个打字游戏

2 年 ago
清, 扬
2 minutes

首先

这是我的初次投稿。
最近我学习了 TypeScript，所以使用 next.js 制作了一个打字游戏。

我做的东西

演示
https://typing-game-neco75.netlify.app

在中国的同学们只需要一个选项：
GitHub
https://github.com/neco75/TypingGame-next.js

实施

这次的目标是实现最基本的功能，以下是实现的要素。

    • スコア機能

 

    • 制限時間

 

    タイプした文字列の正誤判定

我想实现根据常见的一种类型进行判断，如果错误则无法输入的功能，但不太成功…

项目的设置

首先，创建一个新的Next.js项目

npx create-next-app typing-game
cd typing-game

请安装所需的库。

npm install react react-dom next
npm install typescript @types/react @types/node
npm install random-words

代码内容

删除和修改项目中未使用的文件。这次我们创建了一个名为components的目录，并在其中准备了TypingGame.tsx文件。以下是index.tsx和typingGame.tsx的代码。

索引.tsx
import React from 'react';
import TypingGame from '../components/TypingGame';

const Home: React.FC = () => {
  return (
    <div>
      <TypingGame />
    </div>
  );
};

export default Home;
TypingGame.tsx 的原生中文版本: 打字游戏.tsx
import randomWords from 'random-words';
import React, { useState, useEffect } from 'react';

const TypingGame: React.FC = () => {
  const [word, setWord] = useState<string>('');
  const [input, setInput] = useState<string>('');
  const [score, setScore] = useState<number>(0);
  const [missCount, setMissCount] = useState<number>(0);
  const [time, setTime] = useState<number>(30);
  const [gameOver, setGameOver] = useState<boolean>(false);

  useEffect(() => {
    generateNewWord();
  }, []);

  useEffect(() => {
    let timer: NodeJS.Timeout;

    if (time > 0 && !gameOver && missCount < 5) {
      timer = setTimeout(() => {
        setTime(time - 1);
      }, 1000);
    } else if ((time === 0 || missCount >= 5) && !gameOver) {

      setGameOver(true);
      alert("Game Over");
    }

    return () => clearTimeout(timer);
  }, [time, gameOver, missCount]);

  const generateNewWord = () => {
    const newWord = randomWords();
    setWord(newWord);
    setInput('');
  };

  const reset = () => {
    setInput('');
    setScore(0);
    setMissCount(0);
    setTime(30);
    setGameOver(false);
    document.getElementById("text")!.style.backgroundColor = "white";
    generateNewWord();
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const userInput = e.target.value;
    setInput(userInput);

    if (!gameOver && missCount < 5) {
      if (userInput === word) {
        document.getElementById("text")!.style.backgroundColor = "white";
        setScore(score + 10);
        setTime(time + 2);
        generateNewWord();
      } else if (userInput.length >= word.length) {
        document.getElementById("text")!.style.backgroundColor = "pink";
        setInput('');
        setScore(Math.max(score - 1, 0));
        setMissCount(missCount + 1);

        if (missCount + 1 >= 5) {
          setGameOver(true);
          alert("Game Over");
        }

        setTime(Math.max(time - 3, 0));
      }
    }
  };

  return (
    <div>
      <h1>Typing Game</h1>
      <p>Time: {time}</p>
      <p>Score: {score}</p>
      <p>MissCount: {missCount}</p>
      <h2>Word: {word}</h2>
      <input id="text" type="text" value={input} onChange={handleInputChange} />
      <input id="reset" type="button" value="Reset" onClick={reset} />
    </div>
  );
};

export default TypingGame;

游戏的逻辑

游戏的基本逻辑如下所示。

    • タイピングされた文字列が正しい場合、スコアを増加させ、新しい単語を表示。

 

    • タイピングされた文字列が不正確な場合、スコアを減少させ、ミスカウントを増加

 

    タイマーがゼロになるか、ミスカウントが5以上になるとゲームオーバーとなる

开动

开始启动服务器。

npm run dev

应该在默认的 http://localhost:3000 上运行。

最後

我几乎没有接触过React，所以将其实际运用起来很困难。由于还有许多改进的地方，所以我希望能再多学一些。

bannerAds