スマホで遊べる脳トレ計算ゲームを公開しました。
今回作ったのは、60秒間で計算問題に答えてスコアを伸ばすシンプルなミニゲームです。
公開ページはこちらです。
ゲーム本体は、Xサーバー上のこちらに置いています。
今回もCodexを使いながら制作しました。
React + TypeScript + Vite で新規プロジェクトを作り、60秒制の計算ゲームとして形にしました。
難易度選択、4択回答、スコア、正答率、連続正解、時間ゲージも入れています。
正解・不正解がボタン色で分かるようにもしたので、スマホでもテンポよく遊べる形になりました。
今回は、脳トレ計算ゲームを作って公開するまでの記録を残しておきます。
スマホで遊べる無料ミニゲームを作りたかった
今回の目的は、スマホで気軽に遊べる無料ミニゲームを作ることでした。
これまでブラウザゲーム制作では、RTSゲームのような少し重めの個人開発も進めていました。
ただ、RTS系はPC向けになりやすく、スマホでは画面が狭くなります。
一方で、計算ゲームならスマホでも遊びやすいです。
短時間で始められて、操作もシンプル。
読者がブログに来たときに、ちょっと試してもらいやすいコンテンツになります。
ブログ記事を読むだけではなく、実際に触れる無料ツールやミニゲームがある。
これは、ブログを資産化していくうえでも意味があると思いました。
Codexで60秒制の計算ゲームを実装した
今回のゲームは、Codexを使って実装しました。
内容としては、60秒間で計算問題に答える形式です。
ただ数字を表示するだけではなく、遊びやすくするために、いくつか機能を入れました。
・難易度選択
・4択回答
・スコア表示
・正答率表示
・連続正解数
・時間ゲージ
・正解、不正解のボタン色表示
こういう要素が入るだけで、かなりゲームっぽくなります。
最初はただの計算問題でも、制限時間やスコア、連続正解があると、少し熱中しやすくなります。
スマホ向けなので、音や複雑な演出よりも、テンポと見やすさを重視しました。
これはけっこう大事だと思います。
ミニゲームは、機能を増やしすぎるより、すぐ始められて、すぐ結果が分かる方が遊びやすいです。
ViteアプリをXサーバーで公開する流れも経験できた
今回の大きな学びは、ゲームそのものだけではありません。
ViteアプリをXサーバーのサブフォルダで公開する流れも経験できました。
今回のゲームは、以下のようなURLで公開しています。
ここで大事だったのが、Viteの設定です。
サブフォルダに公開する場合、vite.config.ts に base: ‘./’ を設定する必要がありました。
これを入れることで、ビルド後のファイル参照が相対パスになり、Xサーバーのサブフォルダでも動きやすくなります。
また、アップロードするときは dist フォルダそのものではなく、dist の中身をアップロードする必要がありました。
こういう細かい部分は、実際にやってみないと分かりにくいです。
今回ハマりながらも公開まで進めたことで、今後のWebアプリ公開の経験値になりました。
WordPress固定ページには直接埋め込まず、案内ページにした
今回の公開では、WordPress固定ページにゲームを直接埋め込むのではなく、案内ページとして使う形にしました。
WordPress側のページはこちらです。
ゲーム本体は、Xサーバー上のアプリ置き場に置いています。
この分け方は、かなり安全だと感じました。
WordPress固定ページに直接ゲームを埋め込もうとすると、テーマの幅や表示崩れ、スマホ対応で問題が出やすいです。
でも、固定ページは説明とボタンだけにして、ゲーム本体は別ページで開く形にすれば、かなり安定します。
つまり、役割を分けるわけです。
・WordPress固定ページ：ゲームの紹介と案内
・Xサーバー上のアプリページ：実際に遊ぶ場所
この形なら、今後ほかのミニゲームを公開するときにも使えそうです。
無料ミニゲームはブログの資産になる
今回の脳トレ計算ゲームは、すぐに大きな収益を生むものではありません。
でも、ブログの資産としてはかなり意味があると思っています。
記事だけではなく、実際に遊べるコンテンツがある。
これはブログの印象を少し変えてくれます。
さらに、ミニゲームは今後の記事ネタにもなります。
・Codexでミニゲームを作った話
・ViteアプリをXサーバーで公開した話
・スマホ向けゲームで気をつけたこと
・次に追加したい機能
・別ジャンルのミニゲーム案
こうやって、1つの制作物から複数の記事に広げられます。
FIRE後の副収入を考えるうえでも、こういう小さな制作物を積み上げていくことは大事だと思っています。
いきなり大きなサービスを作るのは難しいです。
でも、小さな無料ゲームやツールなら、少しずつ増やしていけます。
それがブログへの入口になり、Xでの発信材料になり、将来の収益化の土台になるかもしれません。
今後追加したいこと
今回のゲームは、まず公開できたことが大きな一歩です。
ただ、まだ追加したい要素もあります。
たとえば、ランク称号です。
スコアに応じて、
・見習い計算士
・暗算チャレンジャー
・計算マスター
のような称号が出ると、もう少し楽しくなりそうです。
また、「今日のミッション」のような要素も面白そうです。
たとえば、
・10問正解を目指す
・正答率80%以上を目指す
・連続正解5回を目指す
こういう小さな目標があると、毎日少し遊びやすくなります。
ほかにも、別のスマホ向けミニゲームを作る余地があります。
計算ゲームだけでなく、記憶力ゲーム、反射神経ゲーム、投資用語クイズ、FIRE生活費クイズなどにも広げられそうです。
今回の公開は、そういう無料ミニゲーム群の第一歩として考えています。
まとめ：小さなゲーム公開も、将来の資産になる
今回、スマホで遊べる脳トレ計算ゲームを公開しました。
React + TypeScript + Vite で作り、Codexを使って実装し、Xサーバー上で公開しました。
WordPress固定ページから案内できる形にしたので、ブログの中にも自然に組み込めています。
大きなゲームではありません。
でも、無料で遊べるミニゲームを1つ公開できたことは、かなり大きいです。
ブログ記事だけではなく、読者が実際に触れるコンテンツが増えました。
そして、Viteアプリをサブフォルダで公開する経験も得られました。
こういう小さな制作物を積み上げていけば、ブログはただの記事置き場ではなくなります。
無料ツール、ミニゲーム、開発記録、FIREへの道のり。
それらが少しずつつながって、将来の副収入の種になるかもしれません。
今回の脳トレ計算ゲームも、その一つとして育てていきたいです。