[第2弾] AIで30分でウェブゲームを作ってみる。

今日は以前の作業に引き続き、コードの分割と機能追加を少し行いました。

まず、html、js、cssがすべて1つのファイルに存在していたソースコードを分割するよう依頼しました。

Q9. 上記の統合ソースコードを、html、js、cssファイルに分離した構造で書き直してください。

→ index.html、game.js、styles.cssの3つの構造に分割しました。

Q10. 上記のソースコードで、中央のコンソール画面の左側に、キャラクターの状態を常に確認できるステータス表示領域を追加し、関連機能を追加してください。

→ 左側に固定サイドバーを追加し、ステータスを常に確認できるように、関連機能をgame.jsに追加/修正しました。

Q11. 上記のソースコードで、ステータスウィンドウからスキルポイントを使用できるボタンと機能を追加してください。

→ 以前のスキルポイントはアラートウィンドウに直接入力する方式だったため、依頼がありました。スキルポイントがあればボタンが有効になり、直感的に使用できるように修正しました。

Q12. 上記のソースコードで、戦闘に勝利すると、モンスターのランクに応じてゴールドをドロップし、獲得したゴールドはステータスウィンドウで確認できるように修正してください。

→ ゴールドをドロップする機能を追加し、左側のステータスウィンドウで確認できるように修正しました。

上記の4つの質問を通して、画面や構成がより見栄えがよくなり、今後、ショップなどの機能を追加するための基盤が整いました。

今後は、ショップ機能の追加（回復アイテムなど）、スキルシステムの追加などで拡張していきたいと思います。

https://ggoban.com/hof/