DANGEROUS NOTE

概要

デスノートの世界観と人狼ゲームの心理戦を組み合わせた、オフライン型のゲームです！ プレイヤーは議論や推理、ミニゲームを通して相手の正体を見抜きながら、特殊能力やゲーム内の駆け引きを活用して勝利を目指します。

デスノート要素

・本名とニックネームを設定し、本名がキラに知られてノートに記入されると殺される。

・ミニゲームの最下位は本名の一文字を公開される。

・ゲーム中のアイテムがデスノートに関連するアイテムをミニゲームの賞品として使用できる。 【キラのアイテム】 　「死神の目」：ランダムで一人の本名を知ることが出来る。 【Lのアイテム】 　「ショートケーキ」：指定した人がキラかどうか知ることが出来る。

人狼ゲーム要素

・朝、昼、夜、深夜のターンを5日分行う。 ・朝のフェーズに話し合い時間がある。 ・追放投票フェーズでは本名が分からなくても行うことが出来る。

ミニゲームの内容

短時間で遊べるミニゲームを５種類ランダムで遊べます。 連打ゲーム 早押しゲーム シャッフルゲーム(スマホのみ対応) 障害物避けゲーム キャッチゲーム(制作中)

使用技術

フロントエンド

フレームワーク: React (Vite) 使用言語: TypeScript

Web API

DeviceMotionEvent（加速度センサー） requestAnimationFrame（ゲームループ） matchMedia（pointer: coarse でタッチデバイス判定） TouchEvent（ルールページのスワイプ操作）

ブラウザ設定・ポリシー

Permissions-Policy（加速度センサー利用許可設定）

その他

コードレビュー: CodeRabbit デプロイ: vercel 静的解析: ESLint

画面遷移

技術の無駄づかい・推しポイント

議論だけではなく、ゲームを盛り上げるために複数のミニゲームを作成！

DeviceMotionEvent を使った「シャッフルゲーム」

加速度センサーでスマホを振った回数を競うミニゲームを実装。PCでは自動的に除外され、スマホでのみ遊べます。

requestAnimationFrame によるゲームループ

ジャンプランゲームではフレーム単位の更新＋加速度的な難易度上昇＋当たり判定をスクラッチ実装。

matchMedia を使った端末最適化

タッチデバイス判定を行い、スマホとPCで適切な体験になるよう制御。スマホ向け機能を自動で切り替える仕組みを実装。

オフライン完結

サーバー不要！ローカルだけでワイワイ遊べるパーティゲーム！

各画面

タイトル画面

説明画面

プレイヤー名入力画面

役職確認画面

朝のフェーズ

昼のフェーズ

ミニゲーム

連打ゲーム 早押しゲーム シャッフルゲーム ジャンプゲーム キャッチゲーム(制作中)

ミニゲーム結果画面

夜のフェーズ

深夜のフェーズ

結果画面