ChatGPTにタイピングゲームを作らせる
チャットのリンク →
/icons/hr.icon
swawa_yu.icon
React/TSでタイピングゲームを作りたい!バックエンドはとりあえず後回しで!デザインはTailwind CSSを使いたい(いつかランキング機能とかが欲しくなったら追加しようかな?)
こんなプロトタイプを作ってくれるかな?
- 英単語を表示
- キーボードを表示し、次に打つべきキーはハイライトする
- 単語を1つ打ち終わるとスコアが1増える
/icons/chatgpt.icon
了解!ReactとTypeScriptを使ってタイピングゲームのプロトタイプを作成するよ。デザインはTailwind CSSを使用するね。まず、必要なステップを以下に示すよ:
1. プロジェクトのセットアップ:
• React、TypeScript、Tailwind CSSの設定。
2. コンポーネントの作成:
• キーボードコンポーネント。
• タイピングゲームコンポーネント。
3. ゲームロジックの実装:
• ランダムに英単語を表示。
• 入力されたキーの判定と次のキーのハイライト。
• 単語を打ち終わるとスコアを増やす。
ステップ1: プロジェクトのセットアップ
まずは、React、TypeScript、Tailwind CSSをセットアップしよう。
code:bash
npx create-react-app typing-game --template typescript
cd typing-game
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
次に、tailwind.config.jsを設定しよう:
(省略)
swawa_yu.icon
`
ERROR
eslint Plugin "react" was conflicted between "package.json » eslint-config-react-app » /Users/leo/playground/typing-game/node_modules/eslint-config-react-app/base.js" and "BaseConfig » /Users/leo/playground/typing-game/node_modules/.pnpm/eslint-config-react-app@7.0.1_@babel+plugin-syntax-flow@7.24.6_@babel+plugin-transform-react-_miyuaouuxldvr5zly2rjs62fie/node_modules/eslint-config-react-app/base.js". `
/icons/ChatGPT.icon
このエラーは、ESLintの設定が競合しているために発生しています。通常、これは依存関係の競合やバージョンの不一致が原因です。以下の手順で解決を試みましょう。
ステップ1: 依存関係のクリア
まず、現在の依存関係を削除します。
(省略)
swawa_yu.icon
もう一度プロジェクトを最初から作ることにした!Viteを使いたい!
/icons/chatgpt.icon
了解!Viteを使って新しいReact/TypeScriptプロジェクトを作成しよう。以下の手順で進めてみてね。
ステップ1: プロジェクトのセットアップ
まず、Viteの新しいプロジェクトを作成する。
(省略)
/icons/hr.icon
完成したもの
https://gyazo.com/1b1f5fe1e80c963ea6fe22975a1bbbd6