Reactでスペースシューティングゲームを作りました🚀
スマホ対応（縦向き推奨）で、プレイヤー自動連射やボス出現なども実装しています。
🔗 プレイはこちら
👉 https://naoya-ya-man.github.io/shooting-game/
技術スタック
- React（npm package使用）
- CSSアニメーション / スクロール背景
- GitHub Pages で公開
- 状態管理に useState / useEffect を活用
主な実装機能
- 自動連射ビーム
- 敵機のランダム出現
- 一定スコアで中ボス／ラスボス出現
- PCまたはスマホ縦向き動作
工夫した点
- スマホ縦向きに対応させ、敵キャラが画面からはみ出ないよう実装
- useEffectとsetIntervalでプレイヤーの自動連射を実装
- ボス登場後のHPゲージの位置をボスに追従させた
苦労した点
- GitHub Pagesへのデプロイ時に画像が表示されない問題あった
- 画面サイズに応じたレイアウト調整が難しかった
- 実際に宇宙を進んでいるかのような演出にしつつ敵キャラの発生頻度や位置調整にも気を使った
-一番苦労したのは、ChatGPTへの聞き方の工夫です。理解しながら書くのも大事ですが、やはり使い方への工夫はこれから先とても重要になってくるかと思います。
相談したいポイント 🙏
- 背景スクロールのパフォーマンスをもっと良くしたいのですが、良い方法はありますか？
- スマホ向けの操作性（移動ボタンなど）をもっと改善する方法があれば知りたいです！