Novel Game の基本

Novel Game(Visual Novel Game) は、他のゲームに比べてプログラムの難易度が低く、初心者でも挑戦できそうなゲームです。
今回は Windows10 の環境で JavaScript を使ってブラウザで動くゲームを開発します。

ビジュアルノベル(visual novel)は、アドベンチャーゲームの一種で、単にノベルゲームとも呼ばれます。
ビジュアルノベルは、電子画面上で読む小説であり、画面に表示される文章に絵や映像、音、選択肢、画面効果などを加えたものです。
小説との大きな違いは、プレイヤーの選択肢によって物語の展開や結末が変化することです。
プログラムの難易度が低い分、ゲームの良し悪しはシナリオで決まると言っても過言ではありません。

Novel Audio

ゲームのバックミュージックを流します。

ゲームの背景にミュージックが流れると、何となくゲームをしている気分になります。
バックミュージックは、シナリオの雰囲気に合わせて繰り返し演奏します。
ネットで検索すると多くの方が無料で提供しているので、シナリオに合ったものをダウンロードして下さい。
フリー BGM のページ

繰り返し演奏するバックミュージックのプログラムは簡単です。
プログラム(HTML ファイル)を実行すると、同じフォルダーに格納されている "theme01.mp3" が繰り返し演奏されます。
プログラムの実行は HTML ファイルをダブルクリックするとブラウザが起動して実行されます。
Audio の基本はページの起動で Audio(mp3) を再生するを参考にして下さい。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Novel Audio</title>
</head>

<body>
<h2>バックミュージックを流す</h2> 
<audio src="theme01.mp3" autoplay loop></audio>

</body>
</html>

Novel Image

Image と Text を自由に重ねて描画します。

ゲームの背景画像やキャラクターやテキスト文などを画面上に自由に配置します。
シナリオに合わせてゲームを進める上で、画面のレイアウトは重要です。
レイアウトのサンプルは TEXTや画像を自由に配置を参考にして下さい。

青空を背景に少女のアニメーションを配置してみました。
プログラム(HTML ファイル)と同じフォルダーに "novel.jpg", "animegirl.gif" を格納して下さい。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Novel Image</title>
</head>

<body>
<h1>Novel Image</h1>
<img src="novel.jpg" style="position:absolute;left:10px;top:10px;">
<img src="animegirl.gif" style="position:absolute;left:100px;top:10px;">

<div style="position:absolute;left:20px;top:240px;">テキスト－１</div>
<div style="position:absolute;left:20px;top:260px;">テキスト－２</div>
</body>
</html>

Novel JS

シナリオを記述した novel.js を組み込んで、マウスのクリックでゲームを進行します。

novel.js は JavaScript のソースファイルです。
.js ファイルの説明は .js ファイルを使うを参考にして下さい。
当初テキストファイルからシナリオを読み込む方法も検討したのですが、関数も含めて js ファイルを使うのがベストだと思われます。

テストで使用する nobel.js です。
num は現在表示中のシナリオの番号です。
シナリオは msg の配列で、二件ずつペアで定義します。
MouseClick() は DIV のクリックで呼び出される関数で、num += 2 ずつアップしてシナリオを更新します。
SetMsg() はシナリオを DIV に表示する関数で、str1 と str2 にペアーで設定します。

num = 0;
msg = [ "Novel Game を始めます",
        "ここをクリックして下さい",
        "Stage 01 です",
        "",
        "ゲームのシナリオが始まります",
        "シナリオを読みながらゲームが進行します",
        "Nobel Game はシナリオが全てです",
        "クリックすると Stage 02 に移ります"
      ];
  function MouseClick()
  {   alert("DIV がクリックされました");
      SetMsg();
      num += 2;
  }
  function SetMsg()
  {   if (num+1 >= msg.length)  num = 0;
      document.getElementById("str1").textContent= msg[num];
      document.getElementById("str2").textContent= msg[num+1];
  }

nobel.js を組み込んだ noveljs.html です。
str1 または str2 の DIV をクリックすると MouseClick() 関数が呼ばれてシナリオが更新されます。
クリックでシナリオを更新しながらゲームを進めて下さい。
最後のシナリオになると、先頭に戻ります。

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Novel JS</title>
</head>

<body>
<h1>Novel JS</h1>
<script src="novel.js">
</script>

<img src="novel.jpg" style="position:absolute;left:10px;top:10px;">
<img src="animegirl.gif" style="position:absolute;left:100px;top:10px;">

<div id="str1" onclick= MouseClick() style="position:absolute;left:20px;top:240px;">テキスト－１</div>
<div id="str2" onclick= MouseClick() style="position:absolute;left:20px;top:260px;">テキスト－２</div>

</body>
</html>

Stage 01

Stage-01 と Stage-02 を作成してステージを切り替えます。

ビジュアルノベルの特徴の一つは、プレイヤーの選択肢によって物語の展開や結末が変化することです。
DIV(str1, str2) のクリックで呼ばれる関数を分けて、ステージを切り替えます。
ステージ－１の stage_01.js です。
先頭が＊で始まるシナリオがステージの切り替えです。
str1 にジャンプするかしないかを問いかけて、どちらがクリックされたかでシナリオを変えます。
DIV(str1) がクリックされたときは、今までと同様にシナリオを進めます。
DIV(str2) がクリックされて、先頭が＊のときは、str2 で示されるステージにジャンプします。
Stage 01 から Stage 02 へのジャンプを設定してみました。
ステージを切り替えるときの書き方です。
"＊novel_s02.html ステージ０２に移動します"
DIV(str2) に表示されているテキストを msg に取得して、先頭が'＊'のときテキストで指定したステージを呼び出します。
msg.substr(1,14) で先頭の'＊'を除いて１４文字を取り出して呼び出します。
var msg = document.getElementById("str2").textContent; if (msg.charAt(0)=='＊') { location.href = msg.substr(1,14); return; }

stage_01.js のソースコードです。

num = 0;
msg = [ "Stage 01 が始まります",
        "",
        "Stage 01 のシナリオを開始します",
        "シナリオを読みながらゲームを進めて下さい",
        "作成用のサンプルページなので、ストーリーはありません",
        "Novel Game の作成に当たっては、ストーリーを構成して下さい",
        "？Stage 02 に移動するときは、下をクリックして下さい",
        "＊novel_s02.html ステージ０２に移動します",
        "Novel Game の面白さはシナリオで決まります",
        "面白いシナリオが出来たらご連絡下さい",
        "プログラムが苦手な方に代わり、プログラミングします",
        "もちろん完成したプログラムは貴方にお送りします",
        "Stage 01 の最後のテキストなので、下をクリックして下さい",
        "＊novel_s02.html ステージ０２に移動します"
      ];

  function MouseClick()
  {   SetMsg();
      num += 2;
  }

  function MouseClick2()
  {   var msg = document.getElementById("str2").textContent;
      if (msg.charAt(0)=='＊')
      {   location.href = msg.substr(1,14);
          return;
      }
      SetMsg();
      num += 2;
  }

  function SetMsg()
  {   if (num+1 >= msg.length)  num = 0;
      document.getElementById("str1").textContent= msg[num];
      document.getElementById("str2").textContent= msg[num+1];
  }

stage_02.js のソースコードです。
Stage 02 から Stage 01 へのジャンプを設定してみました。

num = 0;
msg = [ "Stage 02 が始まります",
        "",
        "Stage 02 のシナリオを開始します",
        "シナリオを読みながらゲームを進めて下さい",
        "？Stage 01 に移動するときは、下をクリックして下さい",
        "＊novel_s01.html ステージ０１に移動します",
        "Stage 02 の最後のテキストなので、下をクリックして下さい",
        "＊novel_s01.html ステージ０１に移動します"
      ];

  function MouseClick()
  {   SetMsg();
      num += 2;
  }

  function MouseClick2()
  {   var msg = document.getElementById("str2").textContent;
      if (msg.charAt(0)=='＊')
      {   location.href = msg.substr(1,14);
          return;
      }
      SetMsg();
      num += 2;
  }

  function SetMsg()
  {   if (num+1 >= msg.length)  num = 0;
      document.getElementById("str1").textContent= msg[num];
      document.getElementById("str2").textContent= msg[num+1];
  }

stage_01.js を組み込んだ novel_s01.html です。
str1 と str2 のクリックで呼び出す関数が違っています。

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Stage 01</title>
</head>

<body>
<h1>Stage 01</h1>
<script src="stage_01.js">
</script>

<audio src="theme01.mp3" autoplay loop></audio>
<img src="novel.jpg" style="position:absolute;left:10px;top:10px;">
<img src="animegirl.gif" style="position:absolute;left:100px;top:10px;">

<div id="str1" onclick= MouseClick() style="position:absolute;left:20px;top:240px;">Nobel Game を始めます</div>
<div id="str2" onclick= MouseClick2() style="position:absolute;left:20px;top:260px;">ここをクリックして下さい</div>

</body>
</html>

stage_02.js を組み込んだ novel_s02.html です。
青空の背景に代えて "back06.gif" を使ってみました。
また "animegirl.gif" に代えて "anime1.gif" と "anime2.gif" を配置しています。
novel_s01.html も novel_s02.html もテスト用のソースなので、シナリオ(物語)はありません。

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Stage 02</title>
</head>

<body background="back06.gif">
<h1>Stage 02</h1>
<script src="stage_02.js">
</script>

<audio src="theme05.mp3" autoplay loop></audio>
<img src="anime1.gif" style="position:absolute;left:60px;top:80px;">
<img src="anime2.gif" style="position:absolute;left:150px;top:120px;">

<div id="str1" onclick= MouseClick() style="position:absolute;left:20px;top:240px;">Nobel Game を始めます</div>
<div id="str2" onclick= MouseClick2() style="position:absolute;left:20px;top:260px;">ここをクリックして下さい</div>

</body>
</html>

簡単なゲームエンジンですが、一応 Visual Novel Game を作ることが出来ると思います。
ゲームによっては、一度に印字するテキストの量や行数を変えたり、アイコン画像を利用したくなることもあるでしょう。
場合によっては、特別なゲームステージを組み込んで Novel Game にクイズやアクションゲームを取り入れることも考えられます。
プログラムが苦手な方で、"面白いシナリオ"が出来たらご連絡下されば相談に応じます。
当方はプログラムは得意でも、シナリオもデザインもからっきしです。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)