初心者でも分かる！JavaScriptノベルゲームの作り方10選

はじめに

この記事を読めば、初心者でもJavaScriptでノベルゲームを作成できるようになります。

ノベルゲームの基本構造から始め、JavaScriptでノベルゲームを作るための10のサンプルコードを紹介します。

対処法や注意点、カスタマイズ方法も解説しますので、初めてJavaScriptを触る方でも安心して取り組むことができます。

●JavaScriptノベルゲームとは

JavaScriptノベルゲームとは、ウェブブラウザ上で動作するインタラクティブな物語を楽しむことができるゲームです。

プレイヤーは選択肢を選ぶことで物語が進行し、異なるエンディングを迎えることができます。

●ノベルゲームの基本構造

ノベルゲームの基本構造は、シナリオ（物語のテキスト）、キャラクター画像、背景画像、BGM（背景音楽）、効果音、選択肢、分岐処理などから成り立っています。

これらの要素をJavaScriptを使って実装し、ウェブブラウザ上で動作するノベルゲームを作成します。

●JavaScriptノベルゲームの作り方10選

ここでは、JavaScriptを使ってノベルゲームを作るための10のサンプルコードを紹介します。

それぞれのサンプルコードには、詳細な説明と日本語のコメントがついていますので、初心者でも分かりやすく実装できます。

○サンプルコード1：シナリオ表示

シナリオを表示するためのコードです。

下記のように、HTMLでテキストエリアを作成し、JavaScriptでシナリオを表示させます。

<!-- HTML部分 -->
<div id="scenario"></div>

<!-- JavaScript部分 -->
<script>
  const scenarioElement = document.getElementById("scenario");
  const scenarioText = "物語の始まりです。";
  scenarioElement.innerText = scenarioText;
</script>

上記のコードでは、scenarioというIDを持つdiv要素に、シナリオのテキストを表示しています。

scenarioTextに表示させたいシナリオを設定してください。

○サンプルコード2：選択肢の実装

選択肢を表示し、クリックした選択肢によってシナリオを進めるコードです。

下記のように、HTMLで選択肢ボタンを作成し、JavaScriptで選択肢の処理を実装します。

<!-- HTML部分 -->
<button id="choice1">選択肢1</button>
<button id="choice2">選択肢2</button>

<!-- JavaScript部分 -->
<script>
  const choice1 = document.getElementById("choice1");
  const choice2 = document.getElementById("choice2");

  choice1.addEventListener("click", () => {
    scenarioElement.innerText = "選択肢1が選ばれました。";
  });

  choice2.addEventListener("click", () => {
    scenarioElement.innerText = "選択肢2が選ばれました。";
  });
</script>

上記のコードでは、選択肢1と選択肢2のボタンを作成し、それぞれのボタンがクリックされたときの処理を記述しています。

選択肢に応じてシナリオを進めることができます。

○サンプルコード3：分岐処理

分岐処理を実装することで、選択肢によって異なるシナリオを進行させることができます。

下記のように、JavaScriptで分岐処理を実装します。

<!-- HTML部分 -->
<button id="branch1">選択肢1</button>
<button id="branch2">選択肢2</button>

<!-- JavaScript部分 -->
<script>
  const branch1 = document.getElementById("branch1");
  const branch2 = document.getElementById("branch2");

  branch1.addEventListener("click", () => {
    scenarioElement.innerText = "選択肢1に進みます。";
  });

  branch2.addEventListener("click", () => {
    scenarioElement.innerText = "選択肢2に進みます。";
  });
</script>

上記のコードでは、選択肢1と選択肢2のボタンを作成し、それぞれのボタンがクリックされたときの処理を記述しています。

選択肢に応じてシナリオを進めることができます。

○サンプルコード4：キャラクター表示

キャラクター画像を表示するコードです。

下記のように、HTMLでキャラクター画像を表示するための要素を作成し、JavaScriptでキャラクター画像を表示させます。

<!-- HTML部分 -->
<div id="character"></div>

<!-- JavaScript部分 -->
<script>
  const characterElement = document.getElementById("character");
  const characterImage = "<img src='キャラクター画像のURL' alt='キャラクター名'>";

  characterElement.innerHTML = characterImage;
</script>

上記のコードでは、characterというIDを持つdiv要素に、キャラクター画像を表示しています。

キャラクター画像のURLには、表示させたいキャラクター画像のURLを指定してください。

○サンプルコード5：背景画像の変更

背景画像を変更するコードです。

下記のように、HTMLで背景画像を表示するための要素を作成し、JavaScriptで背景画像を変更させます。

<!-- HTML部分 -->
<div id="background"></div>

<!-- JavaScript部分 -->
<script>
  const backgroundElement = document.getElementById("background");
  const backgroundImage = "背景画像のURL";

  backgroundElement.style.backgroundImage = `url(${backgroundImage})`;
</script>

上記のコードでは、backgroundというIDを持つdiv要素の背景画像を変更しています。

背景画像のURLには、表示させたい背景画像のURLを指定してください。

○サンプルコード6：BGM・効果音の再生

BGMや効果音を再生するためのコードです。

下記のように、HTMLとJavaScriptを使用して音楽ファイルを再生します。

<!-- HTML部分 -->
<audio id="bgm" src="BGMファイルのURL" loop></audio>
<audio id="se" src="効果音ファイルのURL"></audio>
<button id="playBGM">BGM再生</button>
<button id="stopBGM">BGM停止</button>
<button id="playSE">効果音再生</button>

<!-- JavaScript部分 -->
<script>
  const bgm = document.getElementById("bgm");
  const se = document.getElementById("se");
  const playBGMButton = document.getElementById("playBGM");
  const stopBGMButton = document.getElementById("stopBGM");
  const playSEButton = document.getElementById("playSE");

  // BGMの再生
  playBGMButton.addEventListener("click", () => {
    bgm.play();
  });

  // BGMの停止
  stopBGMButton.addEventListener("click", () => {
    bgm.pause();
    bgm.currentTime = 0;
  });

  // 効果音の再生
  playSEButton.addEventListener("click", () => {
    se.currentTime = 0;
    se.play();
  });
</script>

上記のコードでは、bgmとseというIDを持つaudio要素に、それぞれBGMと効果音の音楽ファイルを指定しています。

BGMファイルのURLと効果音ファイルのURLには、再生させたい音楽ファイルのURLを指定してください。

また、BGMの再生・停止、効果音の再生を行うボタンを設置しています。

○サンプルコード7：セーブ・ロード機能

セーブとロード機能を実装するためのコードです。

下記のように、JavaScriptを使用してセーブデータをローカルストレージに保存し、ロード時に復元します。

<!-- HTML部分 -->
<button id="save">セーブ</button>
<button id="load">ロード</button>

<!-- JavaScript部分 -->
<script>
  const saveButton = document.getElementById("save");
  const loadButton = document.getElementById("load");

  // セーブ
  saveButton.addEventListener("click", () => {
    localStorage.setItem("scenario", scenarioElement.innerText);
    localStorage.setItem("background", backgroundElement.style.backgroundImage);
  });

  // ロード
  loadButton.addEventListener("click", () => {
    scenarioElement.innerText = localStorage.getItem("scenario");
    backgroundElement.style.backgroundImage = localStorage.getItem("background");
  });
</script>

上記のコードでは、saveとloadというIDを持つボタンを作成し、それぞれのボタンがクリックされたときにセーブとロードを行う処理を記述しています。

ローカルストレージを使用して、シナリオの状態や背景画像の状態を保存しています。

○サンプルコード8：画面サイズ・フォント調整

画面サイズやフォントサイズを調整するコードです。

CSSを使用して、画面サイズやフォントのサイズや色などを調整します。

<!-- HTML部分 -->
<style>
  body {
    width: 800px;
    margin: auto;
  }

  .scenario {
    font-size: 16px;
    color: #FFFFFF;
    background-color: #000000;
  }
</style>

<!-- JavaScript部分 -->
<!-- この例ではJavaScriptは使用していません。 -->

上記のコードでは、styleタグ内でCSSを記述しています。

body要素の横幅を800pxに設定し、中央に配置するように指定しています。

また、シナリオ部分のフォントサイズを16px、文字色を白、背景色を黒に設定しています。

○サンプルコード9：ノベルゲームのパッケージ化

ノベルゲームをパッケージ化するためのコードです。

Electronを使用して、ウェブアプリケーションをデスクトップアプリケーションに変換します。

# Electronのインストール
npm install electron -g

# プロジェクトの作成
mkdir my-novel-game
cd my-novel-game
npm init

# Electronをプロジェクトに追加
npm install electron --save-dev

# main.jsとindex.htmlをプロジェクトディレクトリに作成し、ノベルゲームのコードを記述

次に、main.jsを作成し、次のコードを記述します。

// main.js
const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

そして、index.htmlにノベルゲームのコードを記述します。

最後に、package.jsonのscriptsセクションに"start": "electron ."を追加し、次のようになるように編集します。

{
  "name": "my-novel-game",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^x.x.x"
  }
}

これでパッケージ化の準備が整いました。

次のコマンドを実行してアプリケーションを起動できます。

npm start

○サンプルコード10：スマートフォン対応

スマートフォン対応のノベルゲームを作成するために、レスポンシブデザインを適用します。

CSSを使って画面サイズに応じてデザインが変更されるように調整します。

<!-- HTML部分 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      max-width: 800px;
      margin: auto;
    }

    .scenario {
      font-size: 16px;
      color: #FFFFFF;
      background-color: #000000;
    }

    @media screen and (max-width: 480px) {
      body {
        font-size: 14px;
      }

      .scenario {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="scenario">
    <!-- シナリオの内容 -->
  </div>
</body>
</html>

このように、@mediaクエリを使って、画面サイズが480px以下の場合に適用するスタイルを指定しています。

この例では、画面サイズが480px以下の場合、body要素と.scenarioクラスのフォントサイズを14pxに変更しています。

●注意点と対処法

1. レスポンシブデザインを適用する際には、画像やフォントサイズなどの要素が適切に表示されるか確認しましょう。
2. スマートフォンの画面サイズやデバイスごとの違いを考慮して、より柔軟なデザインにすることが重要です。
3. タッチ操作に対応するため、ボタンやリンクのサイズも適切に調整しましょう。

まとめ

本ガイドでは、ノベルゲーム制作に必要な基本構造や機能をサンプルコードで紹介しました。

これらのサンプルコードを活用し、独自のノベルゲームを作成してください。

さらにカスタマイズや改良を加えることで、個性的で魅力的なノベルゲームが作れるでしょう。

注意点として、デバイスや画面サイズの違いに対応するためにレスポンシブデザインを適用し、ユーザーインターフェイスを改善することが重要です。

また、画像や音楽ファイルを独自のものに変更して、ゲームの世界観をより魅力的に演出しましょう。

最後に、ノベルゲーム制作を楽しみながら、技術力や創作力を磨いていくことが大切です。

あなたが作成するノベルゲームが多くの人に楽しまれることを願っています。