Youtubeの『10分でノベルゲームを作る』の最後の関数の仕組みを知りたい

前提・実現したいこと

####javascriptで選択肢のあるノベルゲームを作りたい

Youtubeで**『10分でノベルゲームを作る』**という動画を見ながら、自分でも書いてみて理解したこと

①htmlで、表示される文字とボタンが作られる。
②verで宣言する
③function disp_scenarioでidに数字が代入されるたびに、表示される文字とボタンの文字と
、ボタンを押した時の行き先が変わる仕組みを作る

④function change_scenario(selectno)は、onclickで動く工場で
(何をしているかはよくわからない）

該当のソースコード

<div id="msg"></div>
<form id="f1">
    <input type="submit" value="xxx" id="choice1" onclick="change_scenario(0);return false;"><br>
    <input type="submit" value="xxx" id="choice2" onclick="change_scenario(1);return false;"><br>
    <input type="submit" value="xxx" id="choice3" onclick="change_scenario(2);return false;"><br>
                                            <!--クリックしたときにchange_scenarioに飛ぶ-->
</form>

 function change_scenario(selectno){
        id = goto[selectno];
        disp_scenario();
    }

試したこと

①〜③までのコードの意味や効果は調べたり、数字を変えたり、言葉を変えたりして、自分なりに理解したつもりなのですが、④のfunction change_scenario(selectno)がシンプルすぎて、何をどう試せば理解できるのかさえ分かりません。
コードも決まったコードではなく、勝手に名前をつけたコードなので、検索しても引っ掛からず困ってしまいました。

知りたいことまとめ

onclickでfunction change_scenarioが動く、selectnoにはchange_scenario(0)の（0）が入るのか？goto[selectno]にも入って？そうすると何がどうなるんだろう‥。
ここがわからないと結局改造ができず、自分なりのゲームが作れないので、仕組みが知りたい。
もしここで質問するようなことでないとしたら申し訳ありません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

goto配列は、以下の数値が入っています。
goto[0]　1つ目のボタンの行き先の行番号
goto[1]　2つ目のボタンの行き先の行番号
goto[2]　3つ目のボタンの行き先の行番号

初期画面でgoto[2]には、data[0]6がはいっているので、
id = 3となり、disp_scenario()が実行されるとdata[3]の行のデータで本文と選択肢が作成されます。

配列の中に[番号,本文,選択肢1を押したときの行き先の行番号,選択肢1選択ボタンの内容,・・・」のように意味の異なるデータを格納しているため目で追いづらいのは否めません。
改良の余地はあるかもしれないですね。

投稿2021/06/05 08:35

gas.engine

総合スコア608

matomaru

2021/06/05 08:53

なるほど！！ありがとうございます！２がそのまま入るわけではないということですね！脳汁が溢れました！分かりやすい上に、こんなにはやく回答していただけるとは思いませんでした。自分なりに改良してみます！本当にありがとうございました！！

gas.engine

2021/06/05 09:05

お役に立ててよかったです！

行動規範の内容に同意します

ベストアンサー

＞onclickでfunction change_scenarioが動く
その通りです。

selectnoにはchange_scenario(0)の（0）が入るのか？

その通りです。

関数のカッコの中に引数といって、数字・文字列などを渡し関数の中で使用できます。
1番目のボタンの時は0を渡し、
2番目のボタンの時は1を渡し、
3番目のボタンの時は2を渡します。

＞goto[selectno]にも入って？

そのとおりです。

goto配列は、ボタンをクリックしたときにdata配列の何行目・何番目に飛ぶかを保存しています。
それをidに代入したあとに表示を更新しています。（disp_scenario()）

シナリオのゲームで何がベストとは言えませんが、データの保存形式がこの作者特有なところはご注意ください。

以下のデータを変更するとそれっぽく作動します。
配列中の「1,”散歩する”」のデータは、「散歩する」の選択肢をクリックすると、data[1]の画面に遷移することになります。
先頭の番号を目で追いながら変更できると思います。
移動先のデータがないとバグが発生します。

var data = [
    [0,"今日はいい天気だ", 1, "散歩する", 2, "休憩する", 3, "勉強する"],
    [1,"散歩をしていると犬がいた", 4, "逃げる", 5, "戦う", 6, "えさを与える"],
    [2,"休憩するが何も起こらなかった", 2, "休憩する", 1, "外へ出る", 2, "何もしない"],
    [3,"勉強したがそろそろ飽きてきた", 1, "散歩する", 0, "窓から外を見る", 2, "休憩する"],
    [4,"逃げ遅れた。どうしよう。", 5, "やっぱり戦う", 4, "逃げる", 7, "えさを与える"],
    [5,"犬との戦いに勝った", 0, "空を見る", 1, "散歩する", 6, "家に帰る"],
    [6,"家に帰り中に入った", 0, "外を見る", 2, "休憩する", 3, "勉強する"],
    [7,"犬は仲間になった", 6, "家に帰る", 7, "何もしない", 7, "何もしない"]
];

投稿2021/06/05 04:51

gas.engine

総合スコア608

matomaru

2021/06/05 08:05

丁寧にありがとうございます！感動です！配列の２、４、６番目の行き先が先頭の番号で追えました！しかしここで分からないのが、change_scenario()の0,1,2が引数として渡され、中のgoto[selectno]にも同じ数字が入ることでどういう計算が起こっているのかが全く分かりません。。例えば、最初の画面で、『勉強する』を選んだ場合、３行目に飛ぶので、idには３が入ってるんだなと直感的に思うのですが、『勉強する』のonclickは(2)なので、id=goto[2]となって、２ってことなのかな？と、ここで頭がこんがらがってしまいます。この考え方は間違っていますでしょうか？

行動規範の内容に同意します

あなたの回答