今回の内容
前回、コチラの記事「【HTMLのみ】簡易シューティングゲームを作ってみた」で紹介した通り、ブラウザで動くシューティングゲームを作成しました。前回制作したプロトタイプ版から、かなり進化しましたので、今回はアップデートを紹介致します。
ここでは、アップデート内容とコードの一部を紹介させ頂きます。
下記画像をクリックすると、プレイ動画を閲覧することができます
アップデートの詳細(ChatGPTの協力もあり)
見た目のアップデート
- 攻撃時の弾の色を変更
- ゲームプレイエリアのサイズを縦長へ変更
- 敵オブジェクトのパターンを2種類へ変更(1種類は+10pt、1種類は-10pt)
GAME内容のアップデート
- 「-10pt」の敵の出現確率を調整、落下速度を通常よりも速く設定
- 敵オブジェクトと接触すると、GAME OVERになるように変更
- 1,000ptを獲得すると、GAME CLEAR。秘密のリンクボタンが出現するように設定。
ファイル構成
- index.html(ゲームのメインプログラムです)
- 背景画像(ゲームの背景となる画像です)
- 敵オブジェクト1(敵の画像1です)
- 敵オブジェクト2(敵の画像2です)
- Playerオブジェクト(味方の画像「ドーナツ部長」です)
動作仕様
- 移動:左右の矢印ボタンで移動します(移動は左右のみ)
- 攻撃:スペースで弾を発射します(押しっぱなしで連続発射も可能)
- 得点システム1:「著者の顔」を1体撃破につき、+10点
- 得点システム2:「ドーナツ蟲」を1体撃破につき、-10点
- ゲームオーバー:敵と接触すると、ゲームオーバー
- ゲームクリア:1,000点を獲得すると、ゲームクリア
※ゲームのソースコードは、私が運営するDiscord「ドーナツ部長のサーバー」内で、限定公開の予定です(7月上旬頃を予定)。
ゲームパッケージ
前回の記事では、ゲームカセットを入れる箱風のパッケージデザインを公開しましたが、今回もパッケージを制作しています。
◯パッケージデザイン
そして…今回は、カセットケースとして箱まで制作をしてしまいました(!)
◯カセットケース/表面
◯カセットケース/裏面
○並ぶと結構…いい感じ?(笑)
自作のゲームも、ここまでくると面白いですね(笑)カセットの代わりに、このカセットケースにQRコードやアクセスコードを記したカードを入れて配布する…そんなことを考えています。