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

〔コマンド〕 〔Tips〕 〔ソフトウエアーのトップに戻る〕


以前、「爆裂健ホームページ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-ishV310]────┬─[Keyboard_demo] サンプルデモの入ったディレクトリ(キーボード操作)
       │    ├ [Mouse_demo]   サンプルデモの入ったディレクトリ(マウス操作) *1)
       │    ├ [sample3]    ファンクションキー機能サンプル(キーボード操作) *2)
       │    ├ [sample4]    ファンクションボタン機能サンプル(マウス操作) *2)
       │    ├ [sample5]    押しボタンとサウンド機能サンプル(マウス操作) *2)
       │    └ [sample6]    ビデオ動画機能サンプル(マウス操作) *2)
       │ 
        ├ Nobel-is.js  JavaScript ノベル風(ノヴェルっぽい)本体のスクリプトファイル *2)
        ├ Keyboard.js  キーボード操作時のスクリプトファイル *2)
        ├ Mouse.js    マウス操作時のスクリプトファイル *1) *2)
        ├ Multimedia.js マルチメディア関連のスクリプトファイル *2)
        ├ Scenario.js  シナリオファイル *2)
        ├ 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>
 を変更しましょう。

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

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

ビデオスクリーンサイズについて *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]コマンドで終了です、これが1シーンとなります。
又、各シーンは100行以内で収めましょう。

シナリオデータの記述は、setItem("シナリオ番号","シナリオデータ") ; // で記述します、文字列です
シナリオ番号は連番です、番号は間を開けて付けた方が後々の変更等に対応できるのでお勧めします。
シナリオデータ
は"コマンド:パラメータ(複数有り)"の順です。
  例)
setItem("0","START:./Start.jpg") ; // シナリオの開始
setItem("10","SCENE:./kouen1.jpg") ; // シーン1スタート
setItem("20","TXTOUT:18px serif:white:2:1:今日は、ともちゃんとのデートの日だぁ") ;
setItem("30","TXTOUT:18px serif::2:2:うれしいなぁ") ;
setItem("50","CUT") ; // シーン1ストップ
setItem("60","SCENE:./kouen1.jpg") ; // シーン2スタート
setItem("70","TXTOUT:18px serif::2:1:ゆめだった") ;
setItem("90","CUT") ; // シーン2ストップ
:
setItem("9999","END") ; // シナリオの終了

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


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


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

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



拡張機能追加(*2) 2020/08/03
マウス操作に対応(*1) 2020/07/07


【きむ茶工房ガレージハウス】
Copyright (C) 2006-2020 Shigehiro Kimura All Rights Reserved.