※本記事にはアフィリエイト広告（Udemy）を含みます。
インストール不要で、PCとスマートフォンから遊べます。
はじめに
これまで当ブログでは、Unityを使ったミステリーADVや、Godotを使ったゲームの制作記を書いてきました。
今回は、新しい小規模ゲームとして『雨まで10秒』を作ります。ただし、UnityやGodotは使いません。HTML、CSS、TypeScriptを使い、ブラウザで動くゲームとして開発します。
ブラウザの方がゲームエンジンより優れている、という意味ではありません。今回作りたいゲームの規模と、最初に確認したいことを考えた結果、ブラウザが合っていると判断しました。
この記事では、『雨まで10秒』の企画内容、ブラウザを選んだ理由、最初に作る範囲、使用する技術を紹介します。
『雨まで10秒』ってどんなゲーム？
『雨まで10秒』は、5×5の盤面に並んだパイプを回転させ、水を植物まで届けるパズルゲームです。
ゲームの流れはシンプルです。
- 雨が降るまでの10秒間にパイプを回す
- 水の入口から植物までパイプをつなぐ
- 水が届いた植物だけが成長する
- 種、芽、つぼみ、花と段階的に変化する
- 4回の雨が終わったら結果を確認する
企画を考えたとき、ゲームの内容を次の一文にまとめました。
雨が降るまでの10秒間に庭の水路をつなぎ、4回の雨で3つの種を花まで育てる。
この一文を見れば、何を操作するのか、何を目指すのか、どれくらいの時間で遊ぶのかが分かります。
開発中に新しい案が出たときも、この一文に必要な機能かどうかを基準にしました。
なぜ今回はブラウザで作るのか
UnityやGodotには、シーン編集、アニメーション、物理演算、各OS向けの書き出しなど、ゲーム制作に必要な機能がそろっています。
ただ、『雨まで10秒』の最初の段階では、3D空間や物理演算は使いません。必要なのは、5×5の盤面、クリックやタップによる回転、水の接続判定、植物の成長です。
これらはWebの標準的な機能で作れます。
- HTMLでゲーム画面の土台を作る
- CSS Gridで5×5の盤面を並べる
- TypeScriptでパイプの接続と水の到達を判定する
- クリックとタップで同じ回転操作を行う
もう一つの理由は、1プレイが約1分の短編ゲームだからです。インストールせず、ブラウザを開いてすぐ遊べる形と相性がよいと考えました。
今回最初に確認したいのは、「パイプをつないで植物を育てる遊びが成立するか」です。大きな開発環境を用意するより、必要な部分だけを小さく作り、早く遊べる状態にすることを優先しました。
今後、より複雑な演出やゲームエンジン固有の機能が必要になれば、UnityやGodotを使う選択肢もあります。今回は、最初の検証に合う道具としてブラウザを選びました。
今回のゴール
第1回で決めるのは、次の4点です。
- ゲームの中心となる遊び
- 最初にどこまで作るか
- どの技術を何に使うか
- 実装前にどの完成条件を確認するか
この段階では、まだパイプの接続処理は書きません。先に完成の範囲を決めてから実装へ進みます。
最初に作る範囲を決める
ゲームの企画を考えていると、ステージ選択、特殊なパイプ、派手な演出、ランキングなど、追加したい機能が次々に出てきます。
そこで最初にMVPを決めました。MVPとは、今回確認したい遊びを試せる最小限の完成形です。
『雨まで10秒』の最初のMVPには、以下を含めます。
- 5×5の盤面
- クリック、タップ、キーボードによるパイプの回転
- 10秒間の操作と4回の給水
- 水が届いた植物だけが成長する仕組み
- 得点、結果表示、リトライ
- PCとスマートフォンに対応する画面
反対に、ユーザー登録、オンラインランキング、通信、課金、ストーリーモード、ステージエディターは入れません。これらがなくても、中心となる遊びは確認できます。
実際の開発では、最初の遊びを確認した後に、時間無制限のパズルモード、複数ステージ、岩、固定パイプなどを追加しました。
最初から全部を作ったのではなく、動くところまで小さく作り、その後で必要な機能を足しています。
使用する技術を決める
今回は、先にフレームワークを決めるのではなく、必要な役割から技術を選びました。
- HTML：ゲームをブラウザで開くための入口
- CSS、CSS Grid：画面の配置、5×5の盤面、スマートフォン表示
- TypeScript：パイプの接続、水の到達、得点、画面の状態
- インラインSVG：I字、L字、T字などのパイプの描画
- Web Audio API：操作、給水、開花の効果音
- localStorage：最高得点とステージ進捗の保存
- 生成AI：タイトル画面など、一部の背景画像の制作
- Vite：開発中の起動と完成版のビルド
- Vitest、ESLint：自動テストとコードの確認
中心となる言語はTypeScriptです。JavaScriptに型の仕組みを加えた言語で、パイプの種類や接続方向のように、決まった形のデータを扱うときに間違いを見つけやすくなります。
今回は、UIフレームワーク、状態管理ライブラリ、バックエンドを追加しません。ブラウザの標準機能と少数の開発ツールだけで、最初のゴールを達成できるためです。
背景画像などのビジュアル素材には生成AIも使用しています。一方、盤面上のパイプや植物はCSSとインラインSVGで描画し、接続方向が分かりやすいことを優先しました。
TypeScriptでパイプを90度回転させる
実際のコードから、パイプを回転させる中心部分だけを抜き出すと、次のようになります。
export function rotateTile(tile: Tile): Tile {
if (!isRotatable(tile)) {
return { ...tile };
}
return { ...tile, rotation: (tile.rotation + 1) % 4 };
}rotationには、0、1、2、3のいずれかを入れます。それぞれ0度、90度、180度、270度を表します。
クリックするたびに1を足し、% 4で余りを求めます。3の次は4ではなく0へ戻るため、パイプを何度クリックしても4方向の中で回転し続けます。
isRotatable()では、固定パイプ、岩、植物など、回転させてはいけないタイルを先に確認しています。
画面へ描画するときは、回転回数を角度に変換します。
const rotate = rotation * 90;
const pipe = `<g transform="rotate(${rotate} 50 50)">`;SVGの中心である50 50を基準に回転させることで、パイプがマスの中央からずれないようにしています。接続判定については、次回②で詳しく扱います。
ファイル構成を決める
ゲーム本体は、主に次のファイルへ分けます。
index.html：ゲームの入口src/game.ts：パイプの接続、到達判定、得点、盤面データsrc/main.ts：画面表示、入力、タイマー、状態遷移src/style.css：レイアウト、パイプの見た目、アニメーション
特に重要なのは、ゲームのルールをgame.tsへ分けることです。
画面表示とルールを分けておけば、「このパイプ同士はつながっているか」「入口から植物まで水が届くか」を、画面を操作せずに自動テストできます。
実装前に完成条件を決める
実装を始める前に、次の内容を仕様として整理しました。
- どんなゲームを作るか
- 最初のMVPに何を含めるか
- 今回は何を作らないか
- 変更してよいファイル
- PC、スマートフォン、キーボードの操作条件
- 接続判定と植物の成長に関する完成条件
- 必要なテストとビルド確認
画面にパイプが表示されていても、内部の接続が間違っていたり、正解できない盤面になっていたりする可能性があります。
そのため、画面に表示されたことだけで完成とはしません。パイプの接続、水の到達、植物の成長、すべての盤面が正解できることまで確認する形にしました。
今回のまとめと次回予告
今回は、『雨まで10秒』の企画を一文にまとめ、最初に作る範囲と使用する技術を決めました。
ブラウザを選んだのは、UnityやGodotを使えなかったからではありません。5×5の短編パズルを小さく作り、中心となる遊びを早く確認するためです。
次回②では、I字、L字、T字などのパイプが持つ上下左右の接続をデータで表し、水が入口から植物まで届く仕組みを作ります。
TypeScriptやゲームプログラミングを学ぶオンライン講座
今回のようなブラウザゲームを作るには、JavaScriptやTypeScriptの基本に加えて、クリックイベント、配列、状態管理の考え方が役立ちます。
独学で何から始めるか迷う場合は、動画講座で一通りの流れを確認してから、小さなゲームを作って試す方法もあります。
※本リンクはアフィリエイトリンクです。
コメント