JavaScript ノベル風(ノヴェルっぽい)１

〔コマンド〕〔Ｔｉｐｓ〕〔ソフトウエアーのトップに戻る〕

以前、｢爆裂健ホームページII (JAVA)｣で公開されてた｢JAVA Novel アドベンチャー｣のJAVA アプレット
を使用していたのですが、JAVA アプレットは使用廃止になったのでjavaスクリプトで作り変えました。
javascriptの"canvas"機能を使っています。
javascript はテキストファイルが開けない等の制約や、
"canvas"はスプライト等が無いシングルキャンバスや"canvas"に描画させると並列処理になり同期が
とれない等色々使いづらい物でしたが、何とか形になったので公開します。
とりあえずはバージョン1としてキーボードのみの操作となります、マウス操作は次期バージョンがあれば
対応してみたいと思うのですがぁ．．．．(V2.01で対応しました　*1)
と言う事で著作権は、Public Domain Softwareとします。

動作確認ブラウザは、
　Microsoft Edge バージョン：84.0.522.52 (公式ビルド) (64 ビット)
　Google Chrome バージョン：84.0.4147.105（Official Build) (64 ビット）
　Opera　　　　　バージョン：Last update: 2019-04-09
　Firefox　　　　　バージョン：79.0 (64 ビット）

《ダウンロード》

↓からダウンロードしましょう。
[Nobel-ishV105] ------ 初期配布バージョン(キーボード操作)
[Nobel-ishV201] ------ マウス対応バージョン　*1)
[Nobel-ishV310] ------ 不具合とSAVEDAT/LOADDAT/FKEYSET/TXTOFF/SAVEIMG:DL/FLGSET:+/-
　　　　　　　　　　　 MENU/BTNSET/MUSPDSP/SNDCTL/VIDEO/VDOCTL コマンドの追加　*2)
[Nobel-ishV320] ------ GOSUB関連の改良とDELAYコマンドの追加　*3)
[Nobel-ishV330] ------ 角丸四角形(L[F]_RRECT)と縦文字(V_TXTOUT[ONE])の機能追加　*4)
[Nobel-ishV335] ------ 四角形(L_RECT/RRECT)の枠太さ指定はパラメータに変更　*5)

解凍すると下の様に展開されます。

[Nobel-ishV330]────┬─[Keyboard_demo]　サンプルデモの入ったディレクトリ(キーボード操作)
　　　　　　 │　　　　├　[Mouse_demo]　　 サンプルデモの入ったディレクトリ(マウス操作)　*1)
　　　　　　 │　　　　├　[sample3]　　　　ファンクションキー機能サンプル(キーボード操作)　*2)
　　　　　　 │　　　　├　[sample4]　　　　ファンクションボタン機能サンプル(マウス操作)　*2)
　　　　　　 │　　　　├　[sample5]　　　　押しボタンとサウンド機能サンプル(マウス操作)　*2)
　　　　　　 │　　　　├　[sample6]　　　　ビデオ動画機能サンプル(マウス操作)　*2)
　　　　　　 │　　　　└　[sample7]　　　　GOSUB機能のサンプル(マウス操作)　*3)*5)
　　　　　　 │　
　　　　　   ├　Nobel-is.js　　JavaScript ノベル風(ノヴェルっぽい)本体のスクリプトファイル　*2)*3)*4)*5)
　　　　　   ├　Keyboard.js　　キーボード操作時のスクリプトファイル　*2)
　　　　　   ├　Mouse.js　　　 マウス操作時のスクリプトファイル　*1)　*2)
　　　　　   ├　Multimedia.js　マルチメディア関連のスクリプトファイル　*2)
　　　　　   ├　Scenario.js　　シナリオファイル　*2)*3)*4)*5)
　　　　　   ├　index.htm　　　スクリプトファイルを読み込みキャンバスを表示するHTMLファイル　*2)
　　　　　   ├　black.gif　　　黒のスクリーン画像(640x480)サンプル
　　　　　   ├　invisible.gif　透明のスクリーン画像(640x480)サンプル
　　　　　   └　Start.jpg　　　スタートのスクリーン画像(640x480)サンプル

サンプルデモや説明などは、キャンバスサイズが640x480ですが変更は可能です。
サンプルデモの起動は、[Keyboard_demo]/[Mouse_demo]内の"index.htm"をクリックします。

《キャンバスの設定》

●キャンバスサイズの変更
　"index.htm" に記述している
　<canvas id="canvas" width="640" height="480"></canvas>
　を変更しましょう。

　又、下記も記述しています、これもキャンバスのサイズにより変更(調整)しましょう。
　 

●キャンバスの位置変更
　"index.htm" の<STYLE>タグに記述している
 top: 60px;　// ブラウザ表示領域の上からの位置
 left: 25px;　// ブラウザ表示領域の左からの位置
　を変更しましょう。

●キャンバスの地色変更　*3)
　デフォルトの地色(背景色)は無色透明としますが、他の色(例えば背景色を黒とか)にしたい時は、
　"index.htm"の<STYLE>タグに
 background: #000000;
　を追加変更しましょう。

●ビデオスクリーンサイズについて　*2)
　Ver3でビデオ機能を追加しました、ビデオを使う場合は"index.htm" に記述している
　<video hidden controls id="video" width="640" height="480"></video>
　がありますが、このタグは"hidden"で隠していますのでここはこのままで良いでしょう。
　実際にキャンバスに表示されるサイズは"VIDEO"コマンドで指示しますのでぇ。
　(使わない場合でも、タグの削除は止めましょう)

《進行操作》

キーボード操作時
ノベル風ゲームの進行操作は、何かキーを押せば次のシーンへ進みます。
選択する場合は、指示の数字キー(1-9)を押しましょう。

[キーボード操作デモ]
このサンプルのノベル風ゲームは、ダウンロードの[Keyboard_demo]と同じ物です。

こちらのMyページでノベル風ゲームを使った「観光地紹介」を行っています、
参考にしてください。

●キーボード操作のスクリプトファイル設定
　"index.htm"に下記の様に記述します。

　<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>　*2)
　<script src="Scenario.js"></script>
　<script src="Nobel-ish.js"></script>
　<script src="Keyboard.js"></script>

マウス操作時　*1)
ノベル風ゲームの進行操作は、キャンバスをクリックすれば次に進みます。
選択する場合は、選択項目の場所をクリックしましょう。

[マウス操作デモ]
このサンプルのノベル風ゲームは、ダウンロードの[Mouse_demo]と同じ物です。

●マウス操作のスクリプトファイル設定
　"index.htm"に下記の様に記述します。

　<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>　*2)
　<script src="Scenario.js"></script>
　<script src="Nobel-ish.js"></script>
　<script src="Mouse.js"></script>

ビデオ(動画)操作時　*2)

　<script src="Multimedia.js"></script>
　を追加しましょう。

[動画操作デモ]
このサンプルのノベル風ゲームは、ダウンロードの[sample6]と同じ物です。
HP番は再生できる様にビットレートをだいぶん落としています、
ダウンロード版も落としています、ダウンロードサイズが減る様にしました。
”Firefox”はビットレートを落としても少しぎこちない、まだ落とさないとダメかもね。

《シナリオの書き方》

シナリオは"Scenario.js"ファイルに記述していきます。

    with (storage) {
      setItem("0","START:./Start.jpg") ;          // シナリオの開始
      //setItem("1","GOTO:2035") ;                 // テスト用直接ジャンプ

      // 【ここにシナリオを書き込みましょう、容量は約5MB程】

      setItem("9999","END") ;                     // シナリオの終了
    }

シナリオはシーンの集まりで、シナリオは[START]コマンドで始まり[END]コマンドで終了です。
シーンは、[SCENE]コマンドで始まり[CUT]コマンドで終了です、これが１シーンとなります。
又、各シーンは1000行以内で収めましょう。

シナリオデータの記述は、setItem("シナリオ番号","シナリオデータ") ; // で記述します、文字列です。
シナリオ番号は連番です、番号は間を開けて付けた方が後々の変更等に対応できるのでお勧めします。
シナリオデータは"コマンド:パラメータ(複数有り)"の順です。

  例）
      setItem("0","START:./Start.jpg") ;          // シナリオの開始
      setItem("10","SCENE:./kouen1.jpg") ;        // シーン１スタート
      setItem("20","TXTOUT:18px serif:white:2:1:今日は、ともちゃんとのデートの日だぁ") ;
      setItem("30","TXTOUT:18px serif::2:2:うれしいなぁ") ;
      setItem("50","CUT") ;                       // シーン１ストップ
      setItem("60","SCENE:./kouen1.jpg") ;        // シーン２スタート
      setItem("70","TXTOUT:18px serif::2:1:ゆめだった") ;
      setItem("90","CUT") ;                       // シーン２ストップ
             :
      setItem("9999","END") ;                     // シナリオの終了

※ キーボード操作用のシナリオは、マウス操作用でもそのまま使用できます。　*1)
　マウス操作用のシナリオでマウス専用コマンドを使用した場合は、キーボード操作は不可です。

次のページは、”コマンド編”です。

立ちキャラと部屋イラスト
　製作者 > にるさん
　ＨＰ　 > omame.fool.jp/"
　　　　　(リンクが切れて引っ越し先不明)

テレビイラストは
　製作者 > (c)dakさん
　ＨＰ　 > https://illustimage.com/?dl=10213

四角形の枠太さはパラメータで指定に変更(*5) 2020/10/07
角丸四角形と縦文字機能の追加(*4) 2020/09/25
GOSUB関連の改良とDELAYコマンドの追加(*3) 2020/09/15
拡張機能追加(*2) 2020/08/03
マウス操作に対応(*1) 2020/07/07