概要

お互いの24時間で対決する!

対戦相手と互いの24時間を交換して対戦するゲーム

24時間の自身の行動をリスト化して対戦相手と交換、翌日の24時間で相手のリストのタスククリアを目指して行動し点数を獲得、対戦相手と獲得した点数で競い合います。

使用技術

JavaScript CSS HTML firebase firestore GeminiAPI フレームワークの使用無し

フレームワークを使わない→過去の積み上げた人の技術を無駄にしてる これぞ技術の無駄遣い

詳細

HTML/CSS/JavaScriptを主に利用して作成 ログイン機能はfirebaseを利用してデータを保存

新規登録→ログイン→対戦画面へ 対戦画面では自身の行動をリスト化のために書き起こして追加していき、その後対戦相手とあいことばを用いてルームを作成し互いにリストを交換しあう

入力したタスクが極端に少な過ぎる/多すぎる場合稼げる点数に大きな差が生じてしまうため上限下限に制限を設けている お互いの24時間を交換するというコンセプト上タスクの期限は24時間

クリアしたタスクの点数化判定はすべて自己判断で行う場合容易に不正ができてしまうため写真をアップロードすることで自身の対戦相手がそのタスクを達成できているかの判定を行う

登録後のマイページも実装　ユーザーIDと結びつけて名前とアイコンアップロードの機能、過去の作成したリストなどを保存 GeminiAPIを利用してリストの履歴からを読み込んでAIで特徴傾向、偏りなどを分析してアドバイスなどの機能も実装

詰まった点

画像をデータベースから読み込ませるところで上手く取得できずに詰まって結構な時間足止めを食らったのが大変だった　いぶき

今までの戦績を取得しようとしたけどデータがないという風に認識されてて取得できなかったこと（なお結局実装できてないです）ぎぷそ

相手にデータを送信するときうまく取得できなくて長い間詰まってました。chebuo

ローカルストレージをタイマーに利用して取得、更新、リロードでリセットされるなどで詰まった　大福

展望

戦績取得とマイページなどでの表示 対戦時に相手のアイコンなどの表示 GoogleやTwitterでの認証機能 ゲーム終了時にfirestoreを初期化

＜firebaseのデータフロー＞

＜デモ動画＞ https://youtu.be/fwPu248yp1w 製作途中にて撮ったものになります 下　デモ動画にない後に完成した機能

AI分析

タスク達成の写真送受信

リザルト画面