【保存版】「ゲームばかり」が「作る」に変わる！親子で挑戦する初めてのブラウザゲーム制作

こんにちは！「世界一わかりやすいプログラミング解説」記事へようこそ！

突然ですが、お父さん、お母さん。お子さんがスマートフォンやタブレットでゲームに熱中している姿を見て、ふとこんな不安を感じたことはありませんか？

「このままゲームばかりしていて、将来大丈夫なのかしら…」
「ただ時間を浪費しているだけに見えて、なんだかモヤモヤする」

そのお気持ち、痛いほどよくわかります。現代の子どもたち、いわゆる「デジタルネイティブ世代」にとって、ゲームは生活の一部であり、切り離すことが難しい存在です。無理に取り上げれば反発を招きますし、かといって放置するのも心配ですよね。

しかし、視点を少し変えてみてください。もしその「ゲームへの情熱」を、「消費する側」から「創造する側」へとシフトさせることができたらどうでしょう？

「このゲーム、どうやって動いているんだろう？」「自分ならもっとこうするのに！」
そんな好奇心の種は、プログラミングという魔法の水を与えることで、論理的思考力や問題解決能力という大きな木へと育ちます。

今日は、特別なアプリも、高額な教材も一切不要。
今あなたがこの記事を読んでいるブラウザ（ChromeやSafari）だけで、本格的な「インベーダー風シューティングゲーム」を作る方法を完全解説します。この記事を読み終える頃には、親子で「ゲームクリエイター」としての第一歩を踏み出しているはずです。

🎮 完成品で遊んでみよう！

百聞は一見にしかず。まずはこれから作るゲームを実際に体験してみてください。
下のスマホ画面のような枠の中にあるボタン（← SHOT →）をタップして操作します。

🎮 完成品で遊んでみよう！

1. そもそも、なぜこのゲームが動くの？
2. コピペで完成！ソースコード
3. プログラミング完全解説（教科書）
4. 自分好みに改造（ハッキング）してみよう！

1. そもそも、なぜこのゲームが動くの？

これから皆さんにコピーしていただくコードは、実はとても高度なことをやっています。しかし、その仕組みは「パラパラ漫画」と同じです。

パラパラ漫画は、少しずつ変化する絵を高速でめくることで、動いているように見せますよね？コンピュータゲームも全く同じです。

状態の更新 (Update): 「プレイヤーが右に動いた」「弾が少し進んだ」「敵が当たった」などの計算を一瞬で行います。
画面の描画 (Draw): 計算結果をもとに、真っ黒な画面の上にキャラクターや敵の絵を描き直します。
繰り返し (Loop): これを1秒間に約60回という猛スピードで繰り返します。

このサイクル（ループ）を作ることが、ゲーム開発の心臓部です。今回のコードでは gameLoop という名前の機能（関数）がその役割を担っています。

2. コピペで完成！ソースコード

では、いよいよ魔法の呪文（ソースコード）をお渡しします。
以下のボックスの中にあるコードを上から下まですべてコピーしてください。

Windowsであればメモ帳に、Macであればテキストエディット貼り付けて、ファイル名を game.html として保存すれば、すぐに動きます。＊Macの場合は標準テキストにしておく必要があります。リッチテキストだとできませんので、注意。

▼ この下のコードを全選択してコピーしてください ▼

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>シンプルインベーダー風ゲーム</title>

    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style>
        /* ■ 全体のレイアウト設定 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            /* パソコンで見ても見やすいように、背景をグレーにして中央に配置 */
            background: #202020; 
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* ■ ゲーム画面の枠（スマホサイズに制限） */
        #gameContainer {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 360px; /* 横幅が広がりすぎないように制限 */
            height: 100%;
            max-height: 600px; /* 高さも制限 */
            background: #000; /* ゲームの中は黒 */
            border: 2px solid #444; /* 枠線 */
            box-sizing: border-box;
        }

        /* スコアなどを表示する上部バー */
        #infoBar {
            padding: 8px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        /* ゲーム画面（キャンバス） */
        #game {
            display: block;
            margin: 0 auto;
            background: #000;
            border: 1px solid #444;
            touch-action: none;

            width: 100%;
            height: auto;
            max-height: 80%; 
            object-fit: contain;
            flex: 1 1 auto;
        }

        /* コントロールボタンのエリア（画面下） */
        #controls {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            padding: 8px;
            box-sizing: border-box;
            flex-shrink: 0;
            min-height: 60px;
        }

        /* 左右・ショットボタンの共通スタイル */
        #controls button {
            flex: 1;
            padding: 10px 4px;
            font-size: 16px;
            border-radius: 10px;
            border: none;
            background: #333;
            color: #fff;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            touch-action: none;
            cursor: pointer;
        }

        /* ボタンを押したときの色 */
        #controls button:active {
            background: #555;
        }

        /* メッセージ表示用（ゲームオーバーなど） */
        #message {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="gameContainer">
    <div id="infoBar">
        <span id="scoreLabel">SCORE: <span id="score">0</span></span>
        <span id="message">敵を撃ってスコアを増やそう！</span>
    </div>

    <canvas id="game" width="360" height="480"></canvas>

    <div id="controls">
        <button id="btnLeft">←</button>
        <button id="btnShot">SHOT</button>
        <button id="btnRight">→</button>
    </div>
</div>

<script>
    // ================================
    // ゲームの基本設定と変数
    // ================================

    const canvas = document.getElementById("game");
    const ctx = canvas.getContext("2d");
    const scoreSpan = document.getElementById("score");
    const messageSpan = document.getElementById("message");
    const btnLeft = document.getElementById("btnLeft");
    const btnRight = document.getElementById("btnRight");
    const btnShot = document.getElementById("btnShot");

    const player = {
        width: 40, height: 20,
        x: canvas.width / 2 - 20, y: canvas.height - 40,
        speed: 5
    };

    let bullets = [];
    let enemies = [];
    let score = 0;
    let gameOver = false;
    let leftPressed = false;
    let rightPressed = false;

    let bulletSpeed = 7;
    let enemySpeed = 1.5;
    let enemySpawnInterval = 800;
    let lastEnemySpawnTime = Date.now();
    let lastShotTime = 0;
    let shotInterval = 400;

    // ================================
    // ゲーム関数
    // ================================

    function resetGame() {
        score = 0;
        scoreSpan.textContent = score.toString();
        bullets = [];
        enemies = [];
        player.x = canvas.width / 2 - player.width / 2;
        player.y = canvas.height - 40;
        gameOver = false;
        messageSpan.textContent = "敵を撃ってスコアを増やそう！";
        lastEnemySpawnTime = Date.now();
    }

    function shootBullet() {
        const now = Date.now();
        if (now - lastShotTime < shotInterval || gameOver) return;
        const bullet = {
            width: 4, height: 10,
            x: player.x + player.width / 2 - 2, y: player.y - 10,
            speed: bulletSpeed
        };
        bullets.push(bullet);
        lastShotTime = now;
    }

    function spawnEnemy() {
        const enemyWidth = 30;
        const enemyHeight = 20;
        const x = Math.random() * (canvas.width - enemyWidth);
        const enemy = {
            width: enemyWidth, height: enemyHeight,
            x: x, y: -enemyHeight,
            speed: enemySpeed
        };
        enemies.push(enemy);
    }

    function isColliding(a, b) {
        return !(
            a.x + a.width < b.x || a.x > b.x + b.width ||
            a.y + a.height < b.y || a.y > b.y + b.height
        );
    }

    function setGameOver() {
        gameOver = true;
        messageSpan.textContent = "GAME OVER - 画面をタップするとリスタート";
    }

    function update() {
        if (gameOver) return;

        if (leftPressed) player.x -= player.speed;
        if (rightPressed) player.x += player.speed;

        if (player.x < 0) player.x = 0;
        if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;

        for (let i = bullets.length - 1; i >= 0; i--) {
            const bullet = bullets[i];
            bullet.y -= bullet.speed;
            if (bullet.y + bullet.height < 0) bullets.splice(i, 1);
        }

        const now = Date.now();
        if (now - lastEnemySpawnTime > enemySpawnInterval) {
            spawnEnemy();
            lastEnemySpawnTime = now;
        }

        for (let i = enemies.length - 1; i >= 0; i--) {
            const enemy = enemies[i];
            enemy.y += enemy.speed;

            if (isColliding(enemy, player)) { setGameOver(); return; }
            if (enemy.y + enemy.height >= canvas.height) { setGameOver(); return; }
        }

        for (let i = enemies.length - 1; i >= 0; i--) {
            const enemy = enemies[i];
            for (let j = bullets.length - 1; j >= 0; j--) {
                const bullet = bullets[j];
                if (isColliding(enemy, bullet)) {
                    enemies.splice(i, 1);
                    bullets.splice(j, 1);
                    score += 1;
                    scoreSpan.textContent = score.toString();
                    break;
                }
            }
        }
    }

    function draw() {
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = "#00ffcc";
        ctx.fillRect(player.x, player.y, player.width, player.height);

        ctx.fillStyle = "#ffff00";
        bullets.forEach(bullet => ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height));

        ctx.fillStyle = "#ff4444";
        enemies.forEach(enemy => ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height));

        if (gameOver) {
            ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#ffffff";
            ctx.font = "24px Arial";
            ctx.textAlign = "center";
            ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2 - 10);
            ctx.font = "14px Arial";
            ctx.fillText("画面をタップしてリスタート", canvas.width / 2, canvas.height / 2 + 20);
        }
    }

    function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

    resetGame();
    requestAnimationFrame(gameLoop);

    // ================================
    // スマホ対応：タッチ操作
    // ================================

    function setupHoldButton(button, onDown, onUp) {
        button.addEventListener("pointerdown", (e) => {
            e.preventDefault();
            button.setPointerCapture(e.pointerId);
            onDown();
        });
        const endHandler = (e) => {
            if (e) e.preventDefault();
            onUp();
        };
        button.addEventListener("pointerup", endHandler);
        button.addEventListener("pointercancel", endHandler);
        button.addEventListener("pointerleave", endHandler);
    }

    setupHoldButton(btnLeft, () => { leftPressed = true; }, () => { leftPressed = false; });
    setupHoldButton(btnRight, () => { rightPressed = true; }, () => { rightPressed = false; });
    btnShot.addEventListener("pointerdown", (e) => { e.preventDefault(); shootBullet(); });
    canvas.addEventListener("pointerdown", (e) => { if (gameOver) { e.preventDefault(); resetGame(); } });
</script>
</body>
</html>

↑ ボックスの中をクリックすると全選択されます。

3. プログラミング完全解説（教科書）

「英語がいっぱいで難しそう…」と不安にならないでください。
実は、このゲームのコードはいくつかの「役割」を持ったチームメンバーが協力して動いています。一つずつ見ていきましょう。

🎨 1. お絵かきセットの準備：HTML5 Canvas

まず、ゲームの舞台となる「画用紙」を用意する必要があります。それが <canvas> というタグです。

コードの中ほどにある以下の部分を見てください。

<canvas id="game" width="360" height="480"></canvas>

これはコンピュータに「幅360、高さ480のサイズの画用紙を用意してね。名前は『game』だよ」と命令しています。
そしてJavaScript側では getContext("2d") という命令で、「2D（平面）の絵を描くための筆」を受け取っています。これを使って四角形を描いたり、色を塗ったりするのです。

💃 2. パラパラ漫画の監督：requestAnimationFrame

ゲームが滑らかに動く秘密は、コードの最後の方にあるこの一行です。

requestAnimationFrame(gameLoop);

これはブラウザ（ChromeやSafari）に対して、「次の画面を描く準備ができたら、gameLoopという関数を呼んでね」と予約を入れる命令です。
だいたい1秒間に60回、この予約が実行されます。「計算して、描いて、また予約する」。この無限ループがゲームの命の鼓動なのです。

📐 3. 位置の管理：X座標とY座標

プログラミングで物の位置を表すときは、数学のグラフのような「座標（ざひょう）」を使います。

X（エックス）：横の位置。右に行くほど数字が増えます。
Y（ワイ）：縦の位置。下に行くほど数字が増えます。（学校で習うグラフとは逆なので注意！）

例えば、弾を上に飛ばしたいときは、「弾のY座標を減らす」という計算をします。

bullet.y -= bullet.speed; // Yを減らす ＝ 上に進む

💥 4. 当たり判定：衝突のロジック

ゲーム作りで一番難しいのが「当たったかどうか」の判定です。
このゲームでは isColliding という関数がその計算を担当しています。

考え方はシンプルです。「四角形A」と「四角形B」があったとき、「重なっていない状態」を考えます。

AがBよりも完全に左にある
AがBよりも完全に右にある
AがBよりも完全に上にある
AがBよりも完全に下にある

この4つのどれにも当てはまらない場合、つまり「上下左右どこにも逃げ場がない」＝「当たっている」と判断するのです。これを「矩形（くけい）衝突判定」と呼び、プロのゲーム開発でも使われる基本テクニックです。

📱 5. スマホ対応の秘密：Pointer Event

スマホでゲームを作るときに一番困るのが、「ボタンを押したつもりなのに、画面がズームしたりスクロールしたりしちゃう！」という問題です。
このコードでは、それを防ぐために pointerdown という最新の技術を使っています。

e.preventDefault(); // 余計な動作（スクロールなど）をキャンセル！

この魔法の一行を入れることで、スマホでもアプリのように快適に操作できるようになっているのです。

4. 自分好みに改造（ハッキング）してみよう！

コードの仕組みがわかったら、今度は改造の時間です。
プログラミング学習で一番力がつくのは、「コードを書き換えて、何が起きるか実験するとき」です。

以下のポイントを探して、数字を変えてみてください。「壊れちゃったらどうしよう…」と心配する必要はありません。もし動かなくなったら、もう一度このページのコードをコピーし直せばいいだけです。

レベル1：ゲームバランスを変えよう

コードの中盤にある「設定値」を変えてみましょう。

let bulletSpeed = 7;
この数字を 20 に変えると、レーザービームのような超高速弾になります！
let enemySpawnInterval = 800;
この数字を 100 に変えると、敵が雨のように降り注ぐ「激ムズモード」になります。クリアできるかな？

レベル2：見た目を変えよう

色を変えるだけでも、ガラッと雰囲気が変わります。
draw() という関数の中を探してください。

ctx.fillStyle = "#00ffcc"; (自機の色)
これを "#ff0000" に変えると、赤い機体になります。
ctx.fillStyle = "#ffff00"; (弾の色)
これを "#0000ff" に変えると、青い弾になります。

レベル3：自機のサイズを変えよう

const player = { ... } の部分を探してください。

width: 40 を 100 に変えると、巨大な戦艦になります。当たり判定も大きくなるので注意！
逆に 10 にすると、豆粒のような小さな機体になります。

親御さんへのメッセージ：失敗こそが最高の先生

もしお子さんが改造に挑戦して、画面が真っ白になったり、エラーが出たりしても、決して叱らないでください。
むしろ「おめでとう！壊れる理由を見つけたね！」と褒めてあげてほしいのです。

プログラマーにとって、エラー（バグ）は敵ではありません。「コンピュータは命令された通りにしか動かない」ということを教えてくれる、厳しくも正直な先生です。
「どこを消したから動かなくなったのかな？」と一緒に探偵ごっこをして、原因を突き止めたとき、お子さんの論理的思考力は飛躍的に向上しています。

今日作ったこの小さなゲームが、お子さんの大きな未来への「最初のチケット」になることを願っています。
ぜひ親子で、「ああでもない、こうでもない」と言いながら、ハッキングを楽しんでください！

Pocket

2025年11月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30