[3編] AIで30分でウェブゲームを作ってみる。

唐突なシリーズになりましたが、面白かったのでOKです。

今では少しずつバグと些細な修正のための質問が増えてきたため

全ての質問を記録するのは難しいかもしれませんが、書いてみましょう。

Q13. 上記ゲームで、コンソール領域の上に背景画像とキャラクター、モンスターを表示するキャンバス領域を追加してください。

-> 以降はグラフィックも追加するために、該当の質問を依頼し、キャンバス領域を追加しながら、それぞれに必要な機能を分離した3つのファイルに追加しました。この時、背景、キャラクター、モンスターを描画できる機能と共に、キャラクターとモンスターの上にhealthbarを追加しました。(すごい！)、それぞれのhero、goblin、orc、troll、dragon、backgroundは自分で用意する必要があるため、新しいタブでPerplexityに画像生成を依頼しました(fluxモデル、illustratorタイプ)

韓国語で入力すると画像が正常に生成されないため、以下のように依頼しました。

Q13.1. fantasy, hero, right side, 2d pixel, 100x100size, character draw

Q13.2. fantasy, goblin, right side, 2d pixel, 100x100size, character draw

Q13.3. fantasy, orc monster, left side, 2d pixel, 100x100size, draw it.

13.4. fantasy, troll monster, left side, 2d pixel, 100x100size, draw it.

13.5. fantasy, dragon monster, left side, 2d pixel, 100x100size, draw it.

13.6. fantasy, forest, width 800pixel, height 400pixel, draw images

Q14. 全体のソースをもう一度出力してください。

-> 反映するために、全体の出力依頼をしました。

Q15. game.jsファイルの最後が欠けています。該当ファイルだけをもう一度出力してください。

-> game.jsファイルの最後に少し欠けがあったため、該当ファイルだけを再出力依頼しました。

Q16. game.jsファイルが長すぎます。主要な機能ごとに分割できますか？

-> 1つのjsファイルが長くなりすぎたため、今後の管理のために機能ごとに分割を依頼し、以下のように反映しました。

はい、もちろんです。game.jsファイルを主要な機能ごとに分割して、より管理しやすくすることができます。以下のようにファイルを分割してみます。

characters.js: Character、Player、Monsterクラス定義
items.js: Weapon、Armorクラスと関連データ定義
game.js: Gameクラスと主要なゲームロジック
ui.js: UI関連関数（キャンバス描画、状態アップデートなど）
main.js: ゲーム初期化と実行関連関数

Q17. main.jsファイルが欠けています。該当ファイルだけをもう一度出力してください。

-> 最後の5番目のファイルにも最後に欠けがあったため、再出力を依頼しました。

Q18. 分割したjsファイルを含めるようにhtmlソースをもう一度出力してください。

-> 分割したファイルを含むhtmlソース出力依頼

Q19. healthbarが戦闘中はcanvasに表示されないバグがあります。ソースを確認して修正してください。

-> 正常に表示されますが、最初にしかhealthbarが表示されず、戦闘中は表示されないため、修正依頼をしました。

Q20. ui.jsでmonsterImageを描画するときにエラーが発生します。修正してください。

-> 機能中にエラーが発生したため、修正依頼をしました。

ここまでで昼休憩の作業を終了し、成果物は正常に動作します。

https://ggoban.com/hof/