JavaScriptでノベルゲームって作れるの？ブラウザで動かす方法【コード例あり】

「JavaScriptでノベルゲームを作りたい」

「ブラウザで動くゲームを作りたい」

JavaScriptとHTML5を使えば、ブラウザで動くノベルゲームが作れます。

✨ この記事でわかること

JavaScriptでノベルゲームを作る基本的な仕組み
テキスト表示の実装方法（コード例付き）
画像の切り替え方法
選択肢システムの実装方法
Web公開の方法

ゲーム開発講師

JavaScriptなら、ブラウザだけで完結するノベルゲームが作れます。まずは基本構造から理解しましょう。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

JavaScriptでノベルゲームを作るメリット
基本的な構造の作り方
画像の切り替え方法
選択肢システムの実装
Web公開の方法
1. 無料で公開する場合
2. 有料で公開する場合
よくある質問
まとめ

JavaScriptでノベルゲームを作るメリット

JavaScriptでノベルゲームを作るメリットを3つ紹介します。

✅ JavaScriptのメリット

ブラウザだけで完結：インストール不要、どこでもプレイ可能
Web公開が簡単：HTMLファイルをアップロードするだけ（所要5分）
学習コストが低い：JavaScriptは初心者にも学びやすい言語

ただし、本格的なゲームを作るなら、Unityの方がおすすめです。

Unityなら、スマホ対応や高度な演出も実装できます。

基本的な構造の作り方

JavaScriptでノベルゲームを作る基本的な構造を解説します。

所要時間は2時間程度です。

ステップ1: HTMLファイルの作成（所要10分）

以下の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: 'MS PGothic', sans-serif;
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 20px;
        }
        #text-box {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 20px;
            min-height: 150px;
        }
        #character-image {
            max-width: 100%;
            height: auto;
        }
        .choice-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            margin: 5px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img id="character-image" src="character1.png" alt="キャラクター" />
    <div id="text-box">
        <p id="dialogue-text">こんにちは、ノベルゲームの世界へようこそ！</p>
        <div id="choice-buttons"></div>
    </div>
    <script src="game.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ノベルゲーム</title>

<style>

body {

font-family: 'MS PGothic', sans-serif;

background-color: #000;

color: #fff;

margin: 0;

padding: 20px;

}

#text-box {

position: fixed;

bottom: 0;

left: 0;

right: 0;

background-color: rgba(0, 0, 0, 0.8);

padding: 20px;

min-height: 150px;

}

#character-image {

max-width: 100%;

height: auto;

}

.choice-button {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

margin: 5px;

border: none;

cursor: pointer;

}

</style>

</head>

<body>

<p id="dialogue-text">こんにちは、ノベルゲームの世界へようこそ！</p>

</div>

</body>

</html>

ステップ2: JavaScriptファイルの作成（所要30分）

以下のJavaScriptファイル（game.js）を作成してください:

// ゲームデータ
const gameData = {
    currentIndex: 0,
    dialogues: [
        {
            text: "こんにちは、ノベルゲームの世界へようこそ！",
            character: "主人公",
            image: "character1.png"
        },
        {
            text: "今日から一緒に冒険しましょう。",
            character: "主人公",
            image: "character1.png"
        },
        {
            text: "楽しみですね！",
            character: "主人公",
            image: "character1.png"
        }
    ],
    choices: [
        {
            dialogueIndex: 2,
            choices: [
                { text: "はい", nextIndex: 3 },
                { text: "いいえ", nextIndex: 4 }
            ]
        }
    ]
};

// テキスト表示
function showDialogue(index) {
    const dialogue = gameData.dialogues[index];
    document.getElementById("dialogue-text").textContent = dialogue.text;
    
    if (dialogue.image) {
        document.getElementById("character-image").src = dialogue.image;
    }
}

// 選択肢表示
function showChoices(choiceData) {
    const choiceContainer = document.getElementById("choice-buttons");
    choiceContainer.innerHTML = "";
    
    choiceData.choices.forEach(choice => {
        const button = document.createElement("button");
        button.className = "choice-button";
        button.textContent = choice.text;
        button.onclick = () => {
            gameData.currentIndex = choice.nextIndex;
            showDialogue(choice.nextIndex);
            choiceContainer.innerHTML = "";
        };
        choiceContainer.appendChild(button);
    });
}

// 初期化
function init() {
    showDialogue(0);
    
    // クリックで次のセリフへ
    document.getElementById("text-box").onclick = () => {
        gameData.currentIndex++;
        if (gameData.currentIndex  c.dialogueIndex === gameData.currentIndex);
            if (choice) {
                showChoices(choice);
            }
        }
    };
}

// ゲーム開始
init();

// ゲームデータ

const gameData = {

currentIndex: 0,

dialogues: [

{

text: "こんにちは、ノベルゲームの世界へようこそ！",

character: "主人公",

image: "character1.png"

{

text: "今日から一緒に冒険しましょう。",

character: "主人公",

image: "character1.png"

{

text: "楽しみですね！",

character: "主人公",

image: "character1.png"

}

choices: [

{

dialogueIndex: 2,

choices: [

{ text: "はい", nextIndex: 3 },

{ text: "いいえ", nextIndex: 4 }

]

}

]

};

// テキスト表示

function showDialogue(index) {

const dialogue = gameData.dialogues[index];

document.getElementById("dialogue-text").textContent = dialogue.text;

if (dialogue.image) {

document.getElementById("character-image").src = dialogue.image;

}

// 選択肢表示

function showChoices(choiceData) {

const choiceContainer = document.getElementById("choice-buttons");

choiceContainer.innerHTML = "";

choiceData.choices.forEach(choice => {

const button = document.createElement("button");

button.className = "choice-button";

button.textContent = choice.text;

button.onclick = () => {

gameData.currentIndex = choice.nextIndex;

showDialogue(choice.nextIndex);

choiceContainer.innerHTML = "";

};

choiceContainer.appendChild(button);

});

}

// 初期化

function init() {

showDialogue(0);

// クリックで次のセリフへ

document.getElementById("text-box").onclick = () => {

gameData.currentIndex++;

if (gameData.currentIndex c.dialogueIndex === gameData.currentIndex);

if (choice) {

showChoices(choice);

}

};

}

// ゲーム開始

init();

コードの説明:

gameData: ゲームデータを格納するオブジェクト
showDialogue(): テキストを表示する関数
showChoices(): 選択肢を表示する関数
init(): ゲームを初期化する関数

この手順で、基本的なノベルゲームが完成します。

次は、画像の切り替え方法を解説します。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

画像の切り替え方法

立ち絵や背景画像を切り替える方法を解説します。

所要時間は30分程度です。

ステップ1: 画像ファイルの準備（所要10分）

立ち絵画像を用意（無料素材サイトからダウンロード）
画像ファイルをHTMLファイルと同じフォルダに配置
ファイル名を決める（例：「character1.png」「character2.png」）

ステップ2: 画像切り替え機能の実装（所要20分）

以下のコードを追加してください:

// 画像切り替え関数
function changeImage(imagePath) {
    const img = document.getElementById("character-image");
    img.src = imagePath;
}

// 背景画像切り替え関数
function changeBackground(imagePath) {
    document.body.style.backgroundImage = `url(${imagePath})`;
    document.body.style.backgroundSize = "cover";
}

// 使用例
changeImage("character2.png");
changeBackground("background1.jpg");

// 画像切り替え関数

function changeImage(imagePath) {

const img = document.getElementById("character-image");

img.src = imagePath;

}

// 背景画像切り替え関数

function changeBackground(imagePath) {

document.body.style.backgroundImage = `url(${imagePath})`;

document.body.style.backgroundSize = "cover";

}

// 使用例

changeImage("character2.png");

changeBackground("background1.jpg");

これで、画像の切り替えができるようになります。

選択肢システムの実装

プレイヤーが選択肢を選べるシステムを実装します。

所要時間は1時間程度です。

ステップ1: 選択肢データの追加（所要20分）

以下のコードを追加してください:

// 選択肢データを拡張
const gameData = {
    // ... 既存のコード ...
    choices: [
        {
            dialogueIndex: 2,
            choices: [
                { 
                    text: "はい", 
                    nextIndex: 3,
                    flag: "choice_yes"
                },
                { 
                    text: "いいえ", 
                    nextIndex: 4,
                    flag: "choice_no"
                }
            ]
        }
    ],
    flags: {} // フラグ管理
};

// フラグ設定関数
function setFlag(flagName, value) {
    gameData.flags[flagName] = value;
}

// フラグ取得関数
function getFlag(flagName) {
    return gameData.flags[flagName] || false;
}

// 選択肢データを拡張

const gameData = {

// ... 既存のコード ...

choices: [

{

dialogueIndex: 2,

choices: [

{

text: "はい",

nextIndex: 3,

flag: "choice_yes"

{

text: "いいえ",

nextIndex: 4,

flag: "choice_no"

}

]

}

flags: {} // フラグ管理

};

// フラグ設定関数

function setFlag(flagName, value) {

gameData.flags[flagName] = value;

}

// フラグ取得関数

function getFlag(flagName) {

return gameData.flags[flagName] || false;

}

ステップ2: 選択肢処理の拡張（所要40分）

以下のコードを追加してください:

// 選択肢処理を拡張
function showChoices(choiceData) {
    const choiceContainer = document.getElementById("choice-buttons");
    choiceContainer.innerHTML = "";
    
    choiceData.choices.forEach(choice => {
        const button = document.createElement("button");
        button.className = "choice-button";
        button.textContent = choice.text;
        button.onclick = () => {
            // フラグ設定
            if (choice.flag) {
                setFlag(choice.flag, true);
            }
            
            // 次のセリフへ
            gameData.currentIndex = choice.nextIndex;
            showDialogue(choice.nextIndex);
            choiceContainer.innerHTML = "";
            
            // 次の選択肢があるかチェック
            const nextChoice = gameData.choices.find(c => c.dialogueIndex === gameData.currentIndex);
            if (nextChoice) {
                showChoices(nextChoice);
            }
        };
        choiceContainer.appendChild(button);
    });
}

// 選択肢処理を拡張

function showChoices(choiceData) {

const choiceContainer = document.getElementById("choice-buttons");

choiceContainer.innerHTML = "";

choiceData.choices.forEach(choice => {

const button = document.createElement("button");

button.className = "choice-button";

button.textContent = choice.text;

button.onclick = () => {

// フラグ設定

if (choice.flag) {

setFlag(choice.flag, true);

}

// 次のセリフへ

gameData.currentIndex = choice.nextIndex;

showDialogue(choice.nextIndex);

choiceContainer.innerHTML = "";

// 次の選択肢があるかチェック

const nextChoice = gameData.choices.find(c => c.dialogueIndex === gameData.currentIndex);

if (nextChoice) {

showChoices(nextChoice);

}

};

choiceContainer.appendChild(button);

});

}

これで、選択肢システムが完成します。

Web公開の方法

完成したノベルゲームをWeb公開する方法を解説します。

所要時間は5分程度です。

無料で公開する場合

GitHub Pages（https://pages.github.com/）：無料、簡単、高速
– 所要時間: 5分
– 手順: GitHubにリポジトリを作成して、SettingsでPagesを有効化
Netlify（https://www.netlify.com/）：無料、自動デプロイ
– 所要時間: 10分
– 手順: ファイルをドラッグ&ドロップするだけ
Vercel（https://vercel.com/）：無料、高速
– 所要時間: 10分
– 手順: GitHubと連携して自動デプロイ

初心者の方は、まずGitHub Pagesから始めるのがおすすめです。

無料で、簡単に公開できます。

有料で公開する場合

独自ドメインを使いたい場合は、レンタルサーバーを利用します。

月額500〜1,000円程度で利用できます。

ただし、本格的なゲームを作るなら、Unityの方がおすすめです。

Unityなら、スマホ対応や高度な演出も実装できます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

よくある質問

Q: JavaScript初心者でも作れる？
A: 作れます。ただし、基本的なJavaScriptの知識が必要です。まずはJavaScriptの基礎（変数、関数、イベント処理）を学んでから、ノベルゲーム制作に進むのがおすすめです。所要時間は1週間（合計10時間）程度。

Q: スマホ対応は可能？
A: 可能です。レスポンシブデザインを適用すれば、スマホでもプレイできます。ただし、本格的なスマホ対応なら、Unityの方がおすすめです。

Q: もっと高度な機能を実装したい場合は？
A: 本格的なゲームを作るなら、Unityの方がおすすめです。Unityなら、スマホ対応や高度な演出も実装できます。本格的にUnityを学びたい方は、Unity入門の森で実践的なスキルを身につけましょう。

Q: セーブ機能は実装できる？
A: 実装できます。localStorageを使えば、ブラウザにデータを保存できます。ただし、本格的なセーブ機能なら、Unityの方がおすすめです。

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

まとめ

JavaScriptとHTML5を使えば、ブラウザで動くノベルゲームが作れます。

所要時間は2時間程度で、基本的なノベルゲームが完成します。

Web公開も簡単で、GitHub Pagesなら無料で公開できます。

まずは基本的な構造から始めて、段階的に機能を追加していきましょう。

✅ 今日から始める3ステップ

STEP1：HTMLファイルを作成（所要10分）
STEP2：JavaScriptファイルを作成（所要30分）
STEP3：ブラウザで動作確認（所要5分）

本格的なゲームを作るなら、Unityの方がおすすめです。

本格的にUnityを学びたい方は、Unity入門の森で実践的なスキルを身につけましょう。

あなたのペースで、少しずつ進めていけば大丈夫です。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる