ブラウザで遊べるゲームの作り方【HTML/JavaScript入門】

はじめに:ブラウザゲームの魅力
必要な知識と準備
1. 必要な知識レベル
2. 準備するもの
超シンプルなゲームを作ってみよう
実際のコード例:数当てゲーム
1. コードの解説
ゲームを改良するアイデア
公開する方法
次のステップ:もっと本格的なゲームへ
まとめ:まずは1つ作ってみよう

はじめに:ブラウザゲームの魅力

ブラウザで遊べるゲームは、誰でも気軽に作れて、すぐに公開できる最高のゲーム形式です。

ブラウザゲームのメリット:

インストール不要で誰でも遊べる
スマホでもPCでも動く
特別なソフトが不要
無料で作れる
公開も簡単

私も最初はブラウザゲームから始めました。プログラミング初心者でも、この記事の通りに進めれば、1時間で最初のゲームが完成します。

この記事では、HTML/JavaScriptを使って、実際に動くブラウザゲームを作る方法を、コード付きで解説します。

必要な知識と準備

必要な知識レベル

結論:ほぼゼロでOK

HTMLを少し知っている(タグって何?程度でOK)
プログラミング経験はなくても大丈夫
この記事のコードをコピペすれば動きます

準備するもの

必要なもの:

パソコン(Windows、Mac、どちらでもOK)
テキストエディタ(メモ帳でもOK、おすすめは後述)
ブラウザ(Chrome、Firefox、Edgeなど)

おすすめのテキストエディタ:

Visual Studio Code(無料、初心者におすすめ)
Sublime Text(無料)
メモ帳(Windowsに最初から入っている)

まずはメモ帳でも十分です。

超シンプルなゲームを作ってみよう

今から「数当てゲーム」を作ります。

ゲーム内容:

コンピュータが1〜100の数字を決める
プレイヤーが数字を予想する
「もっと大きい」「もっと小さい」「正解!」と表示される

ステップ1:HTMLファイルを作る

メモ帳(またはテキストエディタ)を開く
新規ファイルを作成
「名前を付けて保存」で「game.html」として保存
- 保存場所:デスクトップでOK
- 重要:拡張子は必ず「.html」にする

ステップ2:画面を作る

以下のコードをコピーして、game.htmlに貼り付けてください。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数当てゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f0f0;
        }
        #game {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 0 auto;
        }
        input {
            padding: 10px;
            font-size: 18px;
            width: 100px;
            margin: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="game">
        <h1>数当てゲーム</h1>
        <p>1〜100の数字を当ててください!</p>
        <input type="number" id="guess" min="1" max="100" placeholder="数字を入力">
        <br>
        <button onclick="checkGuess()">予想する</button>
        <button onclick="resetGame()">リセット</button>
        <div id="message"></div>
        <p id="attempts"></p>
    </div>

    <script>
        // ここにJavaScriptを書きます(次のステップ)
    </script>
</body>
</html>

保存して、game.htmlをダブルクリックしてブラウザで開いてください。

画面が表示されますが、まだボタンは動きません。

ステップ3:JavaScriptでゲームロジックを書く

<script>タグの中に、以下のコードを追加します。

javascript

// ランダムな数字を生成
let targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;

function checkGuess() {
    const guess = parseInt(document.getElementById('guess').value);
    const message = document.getElementById('message');
    const attemptsDisplay = document.getElementById('attempts');
    
    if (!guess || guess < 1 || guess > 100) {
        message.textContent = '1〜100の数字を入力してください';
        message.style.color = 'red';
        return;
    }
    
    attempts++;
    
    if (guess === targetNumber) {
        message.textContent = `正解! ${attempts}回で当たりました!`;
        message.style.color = 'green';
    } else if (guess < targetNumber) {
        message.textContent = 'もっと大きい数字です';
        message.style.color = 'blue';
    } else {
        message.textContent = 'もっと小さい数字です';
        message.style.color = 'orange';
    }
    
    attemptsDisplay.textContent = `挑戦回数: ${attempts}回`;
    document.getElementById('guess').value = '';
}

function resetGame() {
    targetNumber = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    document.getElementById('message').textContent = '';
    document.getElementById('attempts').textContent = '';
    document.getElementById('guess').value = '';
}

ステップ4:動かしてみる

ファイルを保存
ブラウザで再読み込み(F5キー)
数字を入力して「予想する」ボタンをクリック

ゲームが動きます!

実際のコード例:数当てゲーム

完全なコードを以下にまとめます。これをコピペすれば、すぐに動くゲームが完成します。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数当てゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f0f0;
        }
        #game {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 0 auto;
        }
        input {
            padding: 10px;
            font-size: 18px;
            width: 100px;
            margin: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="game">
        <h1>数当てゲーム</h1>
        <p>1〜100の数字を当ててください!</p>
        <input type="number" id="guess" min="1" max="100" placeholder="数字を入力">
        <br>
        <button onclick="checkGuess()">予想する</button>
        <button onclick="resetGame()">リセット</button>
        <div id="message"></div>
        <p id="attempts"></p>
    </div>

    <script>
        let targetNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        function checkGuess() {
            const guess = parseInt(document.getElementById('guess').value);
            const message = document.getElementById('message');
            const attemptsDisplay = document.getElementById('attempts');
            
            if (!guess || guess < 1 || guess > 100) {
                message.textContent = '1〜100の数字を入力してください';
                message.style.color = 'red';
                return;
            }
            
            attempts++;
            
            if (guess === targetNumber) {
                message.textContent = `正解! ${attempts}回で当たりました!`;
                message.style.color = 'green';
            } else if (guess < targetNumber) {
                message.textContent = 'もっと大きい数字です';
                message.style.color = 'blue';
            } else {
                message.textContent = 'もっと小さい数字です';
                message.style.color = 'orange';
            }
            
            attemptsDisplay.textContent = `挑戦回数: ${attempts}回`;
            document.getElementById('guess').value = '';
        }

        function resetGame() {
            targetNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
            document.getElementById('message').textContent = '';
            document.getElementById('attempts').textContent = '';
            document.getElementById('guess').value = '';
        }
    </script>
</body>
</html>

コードの解説

HTML部分:

<input>:数字を入力する欄
<button>:ボタン
<div id="message">:結果を表示する場所

CSS部分:

デザインを整える(色、サイズ、配置など)

JavaScript部分:

targetNumber:当てる数字(ランダムに決まる)
checkGuess():予想をチェックする関数
resetGame():ゲームをリセットする関数

ゲームを改良するアイデア

基本的なゲームができたので、次は改良してみましょう。

改良アイデア1:難易度を選べるようにする

範囲を変更できるようにします。

追加するコード:

javascript

// HTMLに追加
<select id="difficulty">
    <option value="100">簡単(1〜100)</option>
    <option value="500">普通(1〜500)</option>
    <option value="1000">難しい(1〜1000)</option>
</select>

// JavaScriptを修正
function resetGame() {
    const maxNumber = parseInt(document.getElementById('difficulty').value);
    targetNumber = Math.floor(Math.random() * maxNumber) + 1;
    attempts = 0;
    document.getElementById('message').textContent = '';
    document.getElementById('attempts').textContent = '';
    document.getElementById('guess').value = '';
}

改良アイデア2:ハイスコアを記録する

最小回数でクリアした記録を保存します。

追加するコード:

javascript

let bestScore = localStorage.getItem('bestScore') || null;

function checkGuess() {
    // 既存のコードに追加
    if (guess === targetNumber) {
        if (!bestScore || attempts < bestScore) {
            bestScore = attempts;
            localStorage.setItem('bestScore', bestScore);
            message.textContent = `新記録! ${attempts}回で当たりました!`;
        } else {
            message.textContent = `正解! ${attempts}回で当たりました! (最高記録: ${bestScore}回)`;
        }
        message.style.color = 'green';
    }
}

改良アイデア3:ヒント機能を追加

「ヒントを見る」ボタンで範囲を絞る。

追加するコード:

javascript

function showHint() {
    const message = document.getElementById('message');
    const range = Math.floor(targetNumber / 10) * 10;
    message.textContent = `ヒント: ${range}〜${range + 10}の間です`;
    message.style.color = 'purple';
}

// HTMLに追加
<button onclick="showHint()">ヒントを見る</button>

改良アイデア4:効果音を追加

正解時に音を鳴らす。

追加するコード:

javascript

function playSound() {
    const audio = new Audio('https://www.soundjay.com/button/beep-07.wav');
    audio.play();
}

// 正解時に呼び出す
if (guess === targetNumber) {
    playSound();
    // ...
}

改良アイデア5:デザインを変更

色やフォントを変えて、自分らしいデザインにしましょう。

CSSを変更:

css

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#game {
    background-color: rgba(255, 255, 255, 0.9);
}

公開する方法

ゲームができたら、公開して誰でも遊べるようにしましょう。

方法1:自分のブログに埋め込む(おすすめ)

WordPressなどのブログを持っている場合、記事内にコードを貼り付けるだけで公開できます。

手順:

WordPress管理画面で新規記事作成
「カスタムHTML」ブロックを追加
ゲームのHTMLコードを貼り付け
公開

これで、あなたのブログでゲームが遊べるようになります。

方法2:GitHub Pagesで公開(無料)

GitHubを使えば、無料でゲームを公開できます。

手順:

GitHubアカウントを作成
新しいリポジトリを作成(名前:例「number-game」)
game.htmlをアップロード
Settings → Pages → Source を「main」に設定
公開URL:https://あなたのユーザー名.github.io/number-game/game.html

方法3:PLiCyで公開

ブラウザゲーム専門の投稿サイトに公開できます。

手順:

PLiCy(https://plicy.net/)にアカウント登録
「作品投稿」から新規作成
HTMLコードを貼り付け
タイトルや説明を入力して公開

方法4:itch.ioで公開(海外向け)

海外のゲーム投稿サイトです。

手順:

itch.io(https://itch.io/)にアカウント登録
「Upload new project」
HTMLファイルをZIP圧縮してアップロード
「This file will be played in the browser」にチェック
公開

次のステップ:もっと本格的なゲームへ

基本が理解できたら、次のステップに進みましょう。

ステップ1:もっとJavaScriptを学ぶ

おすすめの学習サイト:

ドットインストール(https://dotinstall.com/)
Progate(https://prog-8.com/)
MDN Web Docs(https://developer.mozilla.org/ja/)

無料で学べるサイトがたくさんあります。

ステップ2:Canvas APIを使ってグラフィックゲームを作る

作れるゲーム:

ブロック崩し
シューティングゲーム
ジャンプゲーム

学習リソース:

MDNのCanvasチュートリアル
YouTubeの「JavaScript Canvas ゲーム」で検索

ステップ3:ゲームライブラリを使う

もっと高度なゲームを作りたいなら、ライブラリを使いましょう。

おすすめライブラリ:

Phaser(2Dゲーム全般)
PixiJS(グラフィック重視)
Kaboom.js(初心者向け、シンプル)

ステップ4:ChatGPTに聞きながら作る

わからないことがあれば、ChatGPTに聞きながら進めましょう。

質問例:

「このコードが動かない理由を教えて」
「〇〇の機能を追加したい。コードを教えて」
「もっと効率的な書き方はある?」

ChatGPTは最高のプログラミング講師です。

まとめ:まずは1つ作ってみよう

ブラウザゲームは、誰でも簡単に作れて、すぐに公開できます。

この記事のポイント:

HTMLとJavaScriptだけで作れる
特別なソフトは不要
コピペだけでも動く
改良していくことで学べる
無料で公開できる

最初のゲーム制作の3ステップ:

この記事のコードをコピペして動かす
数字や色を変えてみる
自分のアイデアを追加する

完璧を目指さず、まず動かすことが大切です。

次のアクション: 今すぐメモ帳を開いて、この記事のコードをコピペしてください。5分後には、あなたの最初のブラウザゲームが動いています。

そこから少しずつ改良していけば、1ヶ月後には立派なゲーム開発者になっているはずです。

ブラウザゲーム制作の世界へようこそ。あなたのゲームを遊べる日を、楽しみに待っています!