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

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

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

<!-- 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>

<!-- 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>

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

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

  characterElement.innerHTML = characterImage;
</script>

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

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

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

<!-- 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>

<!-- 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>

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

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

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

# 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
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();
  }
});

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

<!-- 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>