背景

今回のテーマが『RED』ということで、私たち高専生の頭に浮かんだのは「赤点」でした。 せっかくなので逆転の発送で単位を"落とす"アプリにしようと考えそこに最近話題の◯NE PIECE要素をひとつまみ。

単位を撃ち落として落単王を目指すゲームを!!! おれたちは作る!!!

ということになりました。

遊び方

1. ホーム画面でユーザー名と履修科目(最大20個)を入力してゲームスタートしてください。
2. ブロック崩しゲームです。パドルを矢印キーで操作してボールを打ちかえして単位を撃ち落としてください。残期(残機)は前期後期の2期です。
3. リザルト画面でランキングを確認できます

技術構成

今回、メンバー4人の打ちハッカソン初参加が2人ということで「動くものを作り上げる」ということを第一に考えて、次のような技術構成にしました。

フロントエンド

• Next.js
• TypeScript
• Emotion
• Recoil
• p5.js
• varcel

メンバー中3人が使用経験ありのお気に入りのフレームワークということでNext.jsを使用。 スタイリングはEmotionを使い、グローバルな状態管理には小さな構成で使いやすいRecoilを使用しました。

メイン機能であるブロック崩しゲームの作成にはp5.jsというアニメーションやゲームを描画するライブラリを使用しました。はじめは「canvasを使ったゲーム作成をして初参加の後輩ちゃんにJavaScriptに慣れてもらおう！」 といった発想だったのですが、仮想DOM上での操作が極めて難しくp5.jsをつかった実装に方向転換。 それでもNext.jsとの相性はあまり良くなく、不具合が起きないようレンダリングを極力なくす工夫をしつつゲーム担当の2人で最後まで実装しきってくれました！！！

バックエンド

• firestore

今回のメンバーはフロントが得意なメンバーが主だったっためfirestoreを用いてサーバーレスに実装することで、フロントに注力できるようにしました。