Screenshots
Overview
概要
インストール不要・スマホ対応で、ブラウザだけで遊べるミニゲームを19本収録した試作カタログサイトです。各ゲームは単体HTMLとして独立しており、トップページから5ジャンル（瞬発・反射／パズル・中毒／記憶・脳トレ／アクション・狙う／共有・ネタ）に分類して一覧表示。共通基盤がハイスコア保存・効果音・シェア・PWA配線を全ゲームへ供給しています。
How to use
遊び方・使い方
トップページでジャンル別に並ぶカードから遊びたいゲームを選び「起動」を押すと、その場でゲームが始まります。各ゲームはスコアやベストタイムが端末に自動保存され、次回以降も記録が残ります。多くのゲームに結果シェアボタンがあり、対応端末ではSNS共有、非対応端末ではクリップボードへコピー。未プレイのゲームには「NEW」バッジが付き、一度開くと消えます。PWAとしてホーム画面に追加でき、オフラインでも動作します。
Tech stack
技術スタック
HTML/CSS/JSCanvasWebAudioWeb Share APIPWA
フレームワーク不使用で、各ゲームは単体HTML＋インラインscriptとして独立。共通基盤util.jsがハイスコア保存・効果音・シェア・PWAを全ゲームへ供給し、Service Workerでオフライン対応しています。
Highlights
工夫した点
- 共通基盤（window.GG）に記録保存・効果音・触覚・シェア・PWA登録を集約し、全ゲームで一貫した体験を実現
- SNSクローラがJSを実行しない点を踏まえ、各ゲームページに静的OGP／Twitterメタを直書きして個別カード表示に対応
- ゲーム総数・ジャンル件数・NEWバッジをDOMの実数から自動算出し、ゲーム追加時に手修正が不要な構成
To improve
改善したい点
- 各ゲームが単体HTMLにロジックを内包しており、コードの共通化・重複削減の余地がある
- スコアがlocalStorageのみで、端末間共有やランキング機能がない
- 一部ゲームのキーボード操作・アクセシビリティが未対応
What's next
今後の展望
- オンラインランキングや対戦・スコア比較の導入
- ジャンル拡張と新規タイトルの追加（自動カウントで追従可能な設計）
- 本番環境での品質計測と最適化