# ONIKIN GAME HUB

> 自作ブラウザゲーム105本をまとめた、インストール不要のゲーム置き場。

- 制作: [ワカメ](https://wakame.dev/)（個人で企画・開発）
- ステータス: 公開中（全105本）
- 制作期間: 継続制作中
- カテゴリ: Game, Web
- 使用技術: HTML, CSS, JavaScript (Vanilla), Cloudflare Workers, Cloudflare KV
- 担当: ゲーム企画, ゲームロジック実装, UI設計, ポータルサイト設計, 公開・運用

## 概要

インストールなしでスマートフォンからも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で実装しました。

スマホのタッチ操作と縦画面に対応しているので、リンクを開いた人がその場で遊べます。

## 成果

- 自作ブラウザゲーム105本を公開（最初の1本から約3か月）
- ランキング機能付きゲーム10本を実装
- ご当地ゲーム49本を制作
- スマートフォン・PC両対応
- 100本以上を想定したポータル構成とOGP対応

## リンク

- [サイト](https://browser-games.btwakame.workers.dev/)

## このサイトについて

- [ワカメの詳細プロフィール](https://wakame.dev/ai-profile/index.html.md)
- [llms.txt](https://wakame.dev/llms.txt)