推しアイデア
スマホをWiiリモコン代わりにして、ブラウザで遊ぶ型破りなシューティングゲーム！！
ティラノカップ
Wii-Shoot!!
Next.js
TypeScript
JavaScript
Flutter
Dart
スマホとブラウザで遊ぶ型破りなシューティングゲーム
作った背景
Flluter職人とWebフロント職人の共存を目指すために、、、
推し技術
スマホを傾けたときの角速度だけをもとに、画面上のカーソルを操作。 Next.jsとFlutterをP2Pでリアルタイム通信。
プロジェクト詳細
チーム：福田不在
QRコードを読み取ると、スマホとブラウザが接続して、ゲームが始まる
Webフロント
- ベース：Next.js + TypeScript + Pandacss
- 3D & 物理演算：react-three/fiber + react-three/rapier
- UIカタログ: Storybook + Chromatic
- CI/CD: GitHub Actions + Vercel
Flutter
- Flutter
- P2P通信ライブラリ：PeerJS(Flluter,Nextjs共通)
アーキテクチャ
立ちはだかる番人たち
ゲームロジック
スマホの角速度の情報を、PeerjsでWebフロントに送信し、角速度の変化量だけxy軸を変化させてカーソルを表示。
Wiiリモコンのような直感的な操作感を実現!!
弾丸射出ロジック
三次元空間上の適当な2点間のベクトルから、球を打ち出す方向や強さを決めていたので、カーソルのXY軸から目標点の三次元座標を求めて、さらに打ち出す強さを変えられるように実装することが難しかった。 結果的に球を飛ばす強さを変えると、始点と目標点の２点間を結ぶ直線の延長線上に点伸ばして、その点に向けて球を飛ばす実装を行った。
リポジトリ・リソース閲覧用
Webフロント：https://github.com/saku-1101/FUKUDAFUZAI_fe ネイティブ：https://github.com/shunsuke-tamura/FUKUDAFUZAI figma:https://www.figma.com/file/KuvrjZ7jmp0Zj4fhaIPYJq/TyrannoCup%3A-Design-Draft?type=design&node-id=0%3A1&mode=design&t=4kFGIjUWL7bpD4Ee-1
