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

こんなに真面目に記事を投稿したことはありませんでしたが…新しいものが面白すぎて、真面目な連載になっています。

まず、改善点は以下のとおりです。

1. キャラクター（プレイヤー、モンスター）にクリティカル確率とクリティカルダメージの能力値が追加され、戦闘中のクリティカル確率に応じて、通常時よりも高いダメージが発生

1.1. レベルアップ時にクリティカル確率も上昇するように修正

2. モンスターの出現確率を従来（単純ランダム）から、モンスターに重み付けを行い、重み付けに応じて生成されるように修正

2.1. モンスターの種類を従来の4種類から12種類に追加

3. ドロップするゴールドを活用できるように、戦闘後にショップでヒーリングポーション（3種類）を購入できるように追加

3.1. 戦闘後のみショップを利用できるように、現在の状態（idle、battle、shop）を管理し、状態に応じてUIの表示範囲を変更

3.2. ショップUIに、ショップでアイテムを購入し、キャラクターのHPを回復できるロジックを追加

(追加) 4. モバイルデバイスを考慮したレスポンシブCSSを追加

4.1. レスポンシブに対応するCSSもお願いしたら、あっという間に修正してくれました。すごい…

(追加) 5. 各状態に応じてボタンの表示状態を変更

5.1. 全ての状態ですべてのボタンが表示されていたため、start gameを再度押すとゲームが初期化されたり…といった不便さを修正するために、各状態に合わせてボタンが表示されるように変更

(追加2) 6. 戦闘時にターンが2回ずつ進行する問題を解決

6.1. この部分は一度修正を依頼しましたが、battleTurn()関数には問題がありませんでした。しかし、関連部分を確認したところ、html内のonclickイベントとmain.jsでイベントリスナーとしてイベントを注入する部分が重複しており、この問題が発生していました。この点をperplexityに伝えたところ、このような回答が返ってきましたㅎㅎ

(追加2) 7. 小さくですが、プレイヤーとモンスターの名前が戦闘中の体力バーの上に表示されるように反映し、背景を変更
7.1. 新しい背景の方が合うようです。主人公の名前は開始時に設定できるように修正する予定です。

(追加3) 8. プレイヤーとモンスターにマナを追加し、名前を設定してプレイ可能に
8.1. 最初に名前を設定して開始できるように修正し、その名前でゲームが進行

8.2. プレイヤーとモンスターにマナが追加され、キャンバスに表示されるように反映

8.3. 今後はスキルをローグライクのようにショップでランダムに購入し、戦闘で使用できるように（スキルはローグライクのように購入 - 特定のツリー順に拡張）改善予定です。

実は今ではタイトルとは異なり、単純に毎日30分以上の時間がかかっています。

機能ごとにファイルを分けていなければ、この段階で苦労していたでしょう…

それでも今日までの作業を終えてみると、単純ですが、今ではかなり本格的な簡単なウェブゲームの体裁が整ったようです。

ㅎㅎ

テストアドレス：https://ggoban.com/hof/