HTML5とJSでゲームのレベルが選べるようにしたいです

前提・実現したいこと

ボールを避けながらアイテムをゲットするゲームをjavaScriptで作っています。

そこでレベル１のボタンをクリックするとボールを5個
レベル２のボタンをクリックするとボールを10個

と設定されるようにしたいです。
ボタンを押したら、ページ遷移して、関数が実行される方法を教えていただきたいです

該当のソースコード

bodyの下から書いてます

HTML
1<body>
2<img src="haikei.png"class="div2">
3    <h1 class="title">アイテムキャッチ</h1>
4    <h3 class="ru-ru">ルール説明</h1>
5    <p class="ru-1">アイテムを500までゲットしたらクリア！<br>ボールに当たってHPが０になると<br>ゲームオーバー！</p>
6    <input type="button" class="btn-gradient-radius"onclick="location.href='sam.html'" value="レベル１">
7    <button type="button" onclick="location.href='sam2.html'","boll_10();" class="btn-2" href="sam2.html">レベル２</button>
8</body>
9</html>

該当のソースコード

クリックしたら実行される関数です

javaScript
1//ボールの数を１０個にする
2 function boll_10() {
3    boll=10;
4    hp=100;
5}

試したこと

レベル１はそのままの設定でゲームができるので上記のような書き方にしています。
しかし、レベル２のボタンを押したら、sam2.htmlに遷移して、boll=10;にする関数を呼び出しているのですがうまくいきません。
ボタンを押したら、ページ遷移して、関数が実行される方法を教えていただきたいです。
一応、ページ遷移はするのですが、レベル１と同じ画面です。
ボタンをクリックしたらボールの数を変えるだけなのでdocument.getElementById();はいらないと思ったのですが、アドバイスよろしくお願いいたします。

ボールの定義はグローバル変数で
var boll=5;
にしています。

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

monacaを使用しています。

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

回答1件

ベストアンサー

以下のように変更すれば関数実行後にそのページへ遷移するはずです。

<button type="button" onclick="boll_10();location.href='sam2.html'" class="btn-2">レベル２</button>

sam.htmlとsam2.htmlの2ページを用意されていますが、同じページでボールの数だけ変えて表示できればファイルが少なくて済むかもしれません。

inputタグとbuttonタグでボタンを作成されていますが、どちらかに統一したほうが自然に思います。

ボールの英語はballなのでそちらに合わせたほうが無難です。

投稿2021/06/05 18:39

gas.engine

総合スコア608

kyapi

2021/06/06 03:01

ありがとうございます！！！！ ballに直しておきます、すみません。なんとかページ遷移は完璧にできたのですが、ボールの数が変更されません。同じページに遷移してボールを１０個にする関数を指定してもボールの数が変更されないのはなぜでしょうか？？ setup();で上書きされるのでしょうか？？その場合はどのように対処したら良いか教えていただきたいです！

gas.engine

2021/06/06 04:45

setup();が何の関数かは私にはわかりません。＞ボールの定義はグローバル変数で var boll=5; ページを遷移すると変数はキャンセルされているようです。最初のページで変数を保存して、次のページで読み込むことは以下のページをご参考になさってください。 https://teratail.com/questions/55467 ただ、sam.html,sam2.htmlを2つに分けるのであれば、sam2.htmlに移動してからballの数を増やす関数を実行する（sam2.htmlにjsを記載する）のが簡単かもしれません。

kyapi

2021/06/06 08:59 編集

function setup();と書くと一回だけ実行される関数だと聞いたのでボールの乱数を生成したり色々初期設定を書いてます。説明不足で申し訳ございません。 sam2.htmlに直接jsを記載するとエラーが出てしまいました。リンク先の情報を参考にして、sam2.htmlに直接jsを記載するとうまくいきました！これから微調整してみます。ありがとうございます！！

kyapi

2021/06/06 08:58

リンク先の情報を参考にして、sam2.htmlに直接jsを記載するとうまくいきました！これから微調整してみます。ありがとうございます！！

gas.engine

2021/06/06 09:50

エラーが出た場合、エラーメッセージを記入していただけるとありがたいです。また、monacaに関することなので、そのタグを入れると回答を得られやすいです。

kyapi

2021/06/06 10:48

そうなのですね！今後はエラーメッセージとタグをつけることを気をつけていきます！ gas.engineさんのアドバイスと参考ページが適切でとても助かりました！なんとかエラーなく実行できました！ありがとうございます！！

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