📅 2026年5月15日   🏷️ Web開発技術   ⏱️ 約10分で読めます

ゲームエンジン不要！HTML5とJavaScriptだけで本格ブラウザゲームを作る方法 ― Games Portal Studioの開発技術解説

HTML5 JavaScript Canvas API ゲーム開発 Web技術

💻 この記事のポイント：Games Portal Studioで公開しているすべてのゲームは、UnityやUnreal Engineといったゲームエンジンを一切使用せず、純粋なHTML5・CSS3・JavaScript（Vanilla JS）で開発されています。なぜその選択をしたのか、そして実際にどのような技術を使っているかを詳しく解説します。

なぜゲームエンジンを使わないのか

現代のゲーム開発において、UnityやUnreal Engine、Godotなどのゲームエンジンはとてもパワフルなツールです。しかし、私たちGames Portal Studioがこれらを使わずに純粋なWeb技術でゲームを開発している理由には、明確な思想があります。

最大の理由は「インストール不要でURLを開いた瞬間に遊べる」という体験の実現です。Unityで開発されたWebGLゲームは、ブラウザで動作するものの、起動時に数MB〜数十MBのデータをダウンロードする必要があり、初回起動まで数十秒かかることも珍しくありません。私たちの目指す「隙間時間に5秒で起動してすぐ遊べる」というコンセプトには、この重さは致命的です。

純粋なHTML/CSS/JavaScriptで作られたゲームは、HTMLファイルとJavaScriptファイルの合計が数十KB〜数百KB程度に収まることが多く、ブラウザのキャッシュも効きやすいため、2回目以降は一瞬で起動します。また、Appleデバイスでは長年WebGLの対応が不完全でしたが、Canvas 2D APIはすべてのモダンブラウザで安定して動作します。

ブラウザゲームを支える3つの核心技術

① HTML5 Canvas API

Canvas APIは、JavaScriptから描画命令を送ることでブラウザ上に2Dグラフィックスをリアルタイムで描画するためのAPIです。ゲームのすべてのビジュアル要素（キャラクター、背景、エフェクト、UI）は、このCanvasに毎秒60回（60fps）再描画することで、なめらかなアニメーションとして表示されます。

// Canvas要素の取得と2Dコンテキストの初期化
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// ゲームループの実装（requestAnimationFrameを使用）
function gameLoop(timestamp) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 画面クリア
    update(timestamp); // ゲームロジック更新
    draw(ctx); // 描画処理
    requestAnimationFrame(gameLoop); // 次のフレームを要求
}
requestAnimationFrame(gameLoop); // ループ開始

`requestAnimationFrame`はブラウザの描画タイミングに同期してコールバック関数を呼び出すAPIで、`setInterval`よりもはるかに効率的で、バックグラウンドタブでは自動的に一時停止するためバッテリー消費を最小限に抑えられます。

② JavaScriptのゲームロジック設計

ゲームのロジック（プレイヤーの移動、衝突判定、スコア計算など）はすべてJavaScriptで実装されています。特に重要なのが「ゲームループ」の設計です。ゲームループとは、毎フレーム「入力の読み取り → ゲーム状態の更新 → 画面の描画」というサイクルを繰り返す仕組みです。

衝突判定（Collision Detection）はゲームの種類によって実装が異なります。Flashback Runnerでは迷路の壁との矩形衝突判定を、Neon Hoopsではボールとリングの円形衝突判定を、それぞれ独自に実装しています。

③ CSS3によるUIとアニメーション

ゲームのUI（タイトル画面、ゲームオーバー画面、スコア表示など）はHTML/CSSで実装しています。CSS3のアニメーションやトランジション機能を活用することで、JavaScriptに余計な描画負荷をかけずにスムーズなUI遷移を実現しています。

当ポータルのダークサイバーパンク風デザインは、CSSのカスタムプロパティ（CSS変数）、グラジェント、ボックスシャドウ、backdrop-filterなどを組み合わせて実装されており、フレームワークやライブラリは一切使用していません。

各ゲームで使用している技術スタック

ゲーム名 主な技術 特徴的な実装
Flashback Runner Canvas 2D API 迷路生成アルゴリズム、タイマー制御、レベル管理システム
Brain Glitch Canvas 2D API ストループ効果パターン生成、難易度曲線、落下物物理
Neon Hoops Canvas 2D API ボール軌道計算、バックスピン表現、マウス/タッチ入力統合
合体！おっさん進化論 Canvas 2D + Matter.js リアルタイム物理演算、衝突イベント処理、マージロジック
はげおじさんの毛を探せ！ HTML/CSS/JS DOM操作 ランダム配置アルゴリズム、タッチ/クリック対応、タイム計測

スマートフォン対応のための工夫

現代のゲームポータルにおいて、スマートフォン対応は必須です。ブラウザゲームのスマートフォン対応で最も重要なのは、タッチ操作への対応と、様々な画面サイズへの適応です。

タッチ操作については、`TouchEvent`と`MouseEvent`を統合した`PointerEvents API`を採用しています。これにより、PCのマウス操作とスマートフォンのタッチ操作を同じコードで処理でき、クロスプラットフォーム対応が大幅に簡略化されます。

画面サイズへの対応については、Canvasの解像度をウィンドウサイズに合わせて動的に変更する処理を実装しています。ただし、単純にCanvas要素のピクセルサイズをウィンドウサイズに合わせると、HiDPIディスプレイ（Retinaディスプレイ）で描画がぼやけてしまうため、`devicePixelRatio`を考慮した高解像度対応も行っています。

バックエンドとランキングシステムの実装

各ゲームのグローバルランキング機能は、Vercel（ホスティング）とVercel KV（キーバリューストア）を使って実装されています。プレイヤーがゲームオーバー後にスコアを送信すると、Vercelのサーバーレスファンクション（APIルート）がそれを受け取り、KVストアにスコアを保存します。

このアーキテクチャにより、データベースの管理や複雑なサーバー設定なしに、スケーラブルなランキングシステムを低コストで運用できています。サーバーレスファンクションはNode.js（ES Modules）で記述されており、スコア送信・取得・検証などの処理を担当しています。

🛠️ 開発者の視点から：「車輪の再発明」と批判されることもありますが、ゲームエンジンに頼らずゼロから実装することで、プログラムの動作を完全に把握・制御できます。デバッグも容易になりますし、最適化も自分で行えます。また、何より「自分で作った」という達成感は、既製エンジンの上に乗せたものとは全く異なります。Webゲーム開発に興味がある方には、まず小さなゲームをVanilla JSで作ることをお勧めします。

今後の技術的チャレンジ

Games Portal Studioでは、現在以下の技術的な領域に挑戦中です：

  • WebGL 2.0の活用：より高度なグラフィックス表現のためにWebGLへの移行を検討中
  • Web Audio API：効果音・BGMをコード生成でリアルタイムに作成するサウンドエンジンの開発
  • PWA（Progressive Web App）対応：オフラインでも遊べるゲームへの進化
  • マルチプレイヤー機能：WebSocketを使ったリアルタイムの対戦機能

まとめ：Webの可能性はまだまだ広い

HTML5とJavaScriptだけで、物理演算ゲーム、タイムアタックゲーム、認知機能ゲームなど、様々なジャンルの本格的なブラウザゲームが実現できることを、Games Portal Studioの各ゲームが証明しています。Webの持つ「URLを開くだけで誰でも遊べる」という圧倒的なアクセシビリティと組み合わせることで、独自のゲームプレイ体験を世界中に届けられます。

このブログでは今後も、各ゲームの技術的な解説やWeb開発のノウハウを発信していきます。ゲーム開発に興味がある方はぜひ引き続きチェックしてください！