簡単なゲームをReactで作成してみることにしました。
作成内容
「漢字でGo」のような難読漢字の読み方を当てるゲーム。
実際に支持したことのみを記載し、どのくらいの時間で作れるのか試してみます。
最初の質問
qiitaの記事用にゲームを作成してみたい
作りたいゲームは以下の内容になるがまずは質問
「漢字でGo」というゲームを知っていますか
AIくんの回答
「漢字でGo」というゲームについて、申し訳ありませんが詳しい情報を持っていません。
どうやら知らないらしい。
そこで、AIに以下のようにゲームの内容と画面イメージを伝えました。
ゲーム内容と画面イメージ
内容とイメージの説明をします。
ゲーム内容
ゲームの中央に難読漢字が表示され限られた秒数以内に読み方を当てるゲーム。
何回でも間違えることはできるが秒数内に回答できなければ失敗。
イメージ
画面中央に漢字は秒数ごとにアニメーションで大きくして欲しい
ただし1画面に現在何問目か、問題の漢字、回答用のテキストボックスが大きくなっても収まるようにして欲しい
20秒以内に答えられなかった場合に爆弾が爆発のようなアニメーションを追加して正しい答えと難問正解できたかの結果画面を表示
結果
UIが完成 → 気になった点の修正指示
画面自体はきれいに仕上がりましたが、以下の点が気になったので修正を依頼しました。
✅ 修正依頼内容
・時間の表示が2箇所にあるのでタイマー表示のみに変更
・問題が秒数ごとに大きくなるが途中で出題時の大きさに戻ってしまう
・漢字が簡単すぎるので1~4問目は漢検2級の中から難読漢字を出題。同じく4~6問目は漢検純1級レベル、7~9問目は漢検1級レベル、10問目に関しては漢検に出ないような難易度で出題に変更
・漢字がランダムで出題されていない気がするので変更。また、出題される問題の総数も増やしてほしい
結果
出題内容は変わったが、まだ細かい部分に気になる点があったのでさらに調整。
✅ 追加修正依頼
・現在のスコアの上にあるバーを削除
・問題の大きさは0~18秒までに徐々に大きくなるように変更。
・問題と「この漢字の読み方は？」の間が狭いので少し間隔をあけて欲しい
・結果発表画面で出題漢字の読み方を出すように変更
最後に不具合が出たので修正作業
・10問のゲーム内で同じ問題が出ないように修正
最終版の完成イメージ
感想
わずか4〜5回の指示だけで、ここまで形になるとは正直驚きでした。
他の作業をしながら片手間でやったため実際の作業時間は15分程度でした。
時間をかければもっと凝った仕様も実現できそう。
小学生向けの「ゲーム作り体験」に使えば、楽しみながらプログラミングに興味を持ってくれるので良い教材になるかもしれません。
将来の優秀なエンジニアが大量に誕生しそうですね。
ちなみに、私は3回チャレンジして6問正解が限界でした。
以下のリンクからみなさんも、勉強がてらチャレンジしてみてください！
https://claude.ai/public/artifacts/04ac86e4-064e-457e-b54e-ee92f1a10981