README.md

「アルティメット色おに」は、絵の中から指定された色を見つけるだけの”簡単”なゲームです。

子供の頃遊んだ色おにごっこを高難易度にアレンジしました。さくっと短時間で遊べます。

https://punikatsu-monitor-system-4c2a1ee77a7b.herokuapp.com/

■ このサービスへの想い

プログラミングスクール内で行われたイベントから、子供の頃の遊びを大人仕様にすることでプレイヤーに絵や雰囲気から連想する難易度と、出てくる色名の難しさとのギャップで驚きを与えたいと考え作成しました。
工夫した点は、プレイ開始時に問題３つをクライアント側に渡してJavaScriptのみで動かし、ゲームプレイ中はサーバーとの通信をなくすことで、スムーズなプレイを実現したことです。
また、クリック箇所のRGBを取得して、出題した色のRGBとの距離からスコアを計算していますが、点数がプレイヤーの感覚と近くなるように、一定以上色が近い/遠い場合は100点/0点としてロジックを調整しました。
さらに、雰囲気作りのために、スコアによってリアクションをする鬼のイラストを自作しました。

■ 機能一覧

1. トップ画面

「ゲームスタート」から始めます。

2. ゲーム画面

出題された色名をイラストの中から探します。問題は全部で3つです。

選択した色がお題の色と近いほどスコアが高くなります。

3. スコア画面

3問の合計スコアを見ることができ、結果をXでシェアすることもできます。

■ 使用技術

カテゴリー	技術スタック
フロントエンド	JavaScript, TailwindCSS, DaisyUI
バックエンド	Ruby 3.2.3 Rails 7.1.4.3
インフラ	Heroku
データベース	PostgreSQL
開発環境	Docker
CI/CD	GitHub Actions
VCS	GitHub

■ ER図

■ アプリ構成図

■ 今後の展望

スコアランキング機能を実装予定です。