プログラムはノベルゲーム(アドベンチャーゲーム)と相性がいい。
- 順番に進行が基本
- 何かの条件で分岐
- 繰り返し
- フラグによってマルチエンディング


サンプルノベルゲーム

まずは次のプログラムを index.html というファイル名で保存して、ブラウザで開いてみましょう。

<script type="module"> onload = async () => { alert("おはよう、朝だ"); alert("もう、夜だ、おやすみ"); }; </script>

ブラウザにダイアログが表示され(alert関数)、書いたメッセージが順にでます。これで分岐なしのノベルゲーム(?)はできますね!

ゲームっぽくする分岐と繰り返しを加えてみます。

<script type="module"> onload = async () => { alert("おはよう、朝だ"); for (;;) { const n = prompt("どこへいこう?\n1. 山\n2. 川\n3. 帰る"); if (n == 1) { alert("山についた"); alert("HPが10、回復した"); } else if (n == 2) { alert("川についた"); alert("MPが5、回復した"); } else { break; } } alert("もう、夜だ、おやすみ"); }; </script>

prompt関数を使うとユーザーからの入力を受け取れます。 受け取った数、if文を使って分岐しましょう。for文で繰り返し、breakで繰り返しを強制終了します。

ノベルゲームは、美しい絵がほしいところですね。そんなときは自由に使えるオープンデータ!
高品質写真オープンデータ「FIND/47」を使って、背景を付けましょう。

<script type="module"> import { bg } from "https://js.sabae.cc/find47images.js"; onload = async () => { await bg(2892); alert("おはよう、朝だ"); }; </script>

FIND/47を背景として表示する関数 bg を import で読み込んで、1行足すだけ。美しい背景が表示できました。


日本の風景オープンデータ
マウスオーバーで写真のIDを表示するようにしました。この番号を await bg 関数に渡せばOK。美しい写真、使い放題!

フラグを付けて、マルチエンディングなノベルゲームができあがり!

<script type="module"> import { bg } from "https://js.sabae.cc/find47images.js"; onload = async () => { await bg(2892); alert("おはよう、朝だ"); let flg = false; for (;;) { const n = prompt("どこへいこう?\n1. 山\n2. 川\n3. 丘\n4. 帰る"); if (n == 1) { await bg(658); alert("山についた"); alert("HPが10、回復した"); } else if (n == 2) { await bg(1855); alert("川についた"); alert("MPが5、回復した"); } else if (n == 3) { await bg(23); alert("おー、花火だ"); flg = true; } else { break; } } if (flg) { await bg(2583); alert("充実した一日だった"); alert("おやすみ"); alert("HAPPY END"); } else { await bg(3180); alert("何か見落としているような・・・"); alert("THE END?"); } }; </script>

自分で撮った写真や、画像を使ってもいいですね!


プログラムは Code for Fukui のオープンソース、GitHubで公開しています。

テキスト表示が美しくなる demo5.html を追加!(2021.5.26)

<script type="module"> import { bg, show } from "https://code4fukui.github.io/egadv/egadv.js"; onload = async () => { await bg(2892); await show("おはよう、朝だ");

という感じで、ライブラリを変更し、alert や prompt を await show に変更すればそれっぽいノベルゲームになります。

demo5.html」(src on GitHub)

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS