「トゲトゲなさんかくを、まあるくしてね。」——桃子ちゃんのリクエストに応えて、マウスや指でフリーハンドの円を描き、どれだけ「まんまる」に近いかを競うWebゲーム。描き終えた瞬間に真円度が0〜100%のスコアで表示され、点数に応じて桃子ちゃんのセリフが変わる。学園アイドルマスターのファンアートとして制作した。ブラウザで開くだけで遊べ、スマートフォンでも指でそのまま描ける。
こんな人に向いている
- ちょっとした空き時間に、手軽に遊べるミニゲームを探している人
- 「きれいな円を描ける」ことに密かな自信がある人
- 友達とスコアを見せ合って盛り上がりたい人
- 桃子ちゃんのファンの人
遊び方
- 画面のキャンバスに、マウスまたは指で一筆書きの円を描く。
- 指やボタンを離すと、すぐに真円度のスコアが表示される。
- スコアに合わせた桃子ちゃんのセリフを楽しむ。
- 結果が良ければ、Xにシェアして自慢する。
始点と終点がきちんとつながっているかも採点の対象になるので、最後まで丁寧に描き切るのがコツだ。
主な機能
- 真円度のスコアリング: 描いた線が理想の円からどれだけずれているかを計算し、0〜100%で表示する。
- スコア別のリアクション: 100%、90%以上、80%以上、60%以上……と点数帯ごとに桃子ちゃんのセリフが変わる。90%を超えると紙吹雪で祝福してくれる。
- Xでシェア: スコアと桃子ちゃんのセリフを添えて、ハッシュタグ「#CircleMasterMomoko」付きでXに投稿できる。
- マウス・タッチ両対応: PCでもスマートフォンでも同じように遊べる。
採点のしくみ
まず、筆跡の点の重心を円の中心とし、中心から各点までの距離の平均を半径とする。これが「描き手が描こうとした円」の基準になる。次に、各点が基準円からどれだけ離れているかを測り、線の太さ程度の小さなブレは許容範囲として誤差に数えない。許容範囲を超えたズレの割合と、始点と終点のすき間の大きさをもとに減点し、最終的なスコアを決める。点が少なすぎる線は円として判定しない。
技術構成
HTML・CSS・JavaScriptだけで作った静的なWebゲームで、GitHub Pagesから配信している。描画と筆跡の取得にはHTML5 Canvas APIを使い、スタイリングにはTailwind CSS、アイコンにはFont Awesomeを使用している。
工夫した点
採点を厳しくしすぎると誰も高得点を取れず、甘くしすぎると差がつかない。そこで、線の太さ程度の手ブレは許容しつつ、全体のゆがみと閉じ具合はしっかり評価するバランスに調整した。描き手が思い描いた円の大きさや位置に合わせて基準円を作るので、画面のどこに、どんな大きさで描いても公平に採点される。
