- Game
- Web
ONIKIN GAME HUB
自作ブラウザゲーム105本をまとめた、インストール不要のゲーム置き場。
インストールなしでスマートフォンからもPCからもすぐ遊べることを条件に、個人で制作したブラウザゲーム105本をまとめたポータルです。ライブラリに頼らずVanilla JavaScriptでゲームロジックとUIを実装し、Cloudflare Workers上で公開しています。アクション・パズル・テーブル・クイズ・ご当地ゲームなどにカテゴリ分けし、検索機能とランキング機能付きゲーム10本を用意。47都道府県をテーマにしたご当地ゲームを49本そろえるなど、継続的に本数を増やしています。ゲームをバラバラに公開せず、1つのドメインに /games/ゲーム名/ の形で1本ずつ独立して配置する構成にし、100本以上に増えても破綻せず低コストで運用できる設計にしました。
105本を1人で運用するための仕組みを先に作った
ゲームが数本のうちは手作業で足せますが、100本を超えると一覧・メタタグ・サイトマップの更新漏れが必ず出ます。そこでゲームそのものより先に、追加作業を1コマンドに畳む仕組みを用意しました。
コマンドを1つ叩くとゲーム用のフォルダとひな形が作られ、データファイルに未公開（draft）の状態で登録されます。draftのあいだは一覧にもサイトマップにも出ないので、作りかけを本番へ置いたまま安心して詰められます。完成したら説明とカテゴリを書いてdraftを外し、ビルドを回せば一覧・メタタグ・サイトマップが一斉に更新されます。
サイト自体は依存パッケージゼロで動かしています。Node.jsさえあれば `npm install` すら要らないため、久しぶりに触ったときに環境が壊れていて動かない、という事故が起きません。
過去に作ったゲームを持ち込むときに事故った2箇所
別々に作ってきたゲームを1つのサイトへ集めると、独立していた前提が崩れて問題が出ます。実際に事故ったのは次の2つで、移植用のチェックリストに明記してあります。
- localStorage のキー名。サイト共通のprefixを付ける必要がある一方、そのまま付け替えると既存プレイヤーのセーブデータが消える。旧キーから移行するヘルパーを通す運用にした
- HTMLのhead内に置くビルド用マーカー。これが無いとタイトルとOGPが自動生成されないため、ビルド時に警告を出して気付けるようにした
ゲーム側も作り込む（例: おにきんRUN！）
ポータルだけでなくゲーム本体も作っています。「おにきんRUN！」はThree.jsでブラウザ内に3Dのランゲームを実装したもので、1ファイル完結の構成です。まっすぐ奥へ続く道を自動で走り、スワイプ（PCは左右キー）で3レーンを移動します。
青いゲートで強化、赤いゲートで弱体化、金のダンベルでパワーとボーナススコア、トゲ玉で大ダメージという単純なルールにしつつ、パワーが0になるとゲームオーバーという緊張感を持たせています。スコアのランキングはCloudflare KVに保存し、ランキングAPIはPages Functionsで実装しました。
スマホのタッチ操作と縦画面に対応しているので、リンクを開いた人がその場で遊べます。