javascriptで画面クリックした時だけ他のメソッドを呼び出したい。

Question

前提・実現したいこと

プログラミング初心者です。

javascriptですごろくゲーム（cpuとの対戦）をつくっています。
現在、画面のマスにモーダルを設定しているのですが、モーダルが表示している間は
その他の処理を止めたいと考えております。

下記の該当ソースコードでは、flagがtrueになった時に　進むようにしてます。
（ユーザーが画面をクリックしたらtrueにして、処理を続行させようとしています。）

発生している問題・エラーメッセージ

エラーメッセージ　Uncaught RangeError: Maximum call stack size exceeded

該当のソースコード

javascript
let flag = false;
function modalstop(){
  if(flag == false){　//エラー発生箇所
    document.body.onclick = function() {
      flag = true;
    };
    modalstop(); // 再起呼出し
  }else{
    Change(); // 処理を進める
  }
}

Answer 1

ゲームのメインループですが再帰呼び出しではなく requestAnimationFrame() を試してみて下さい。
あと、この例だと onclick() はループの中にある必要は無いかと思います。

let flag = false;

document.body.onclick = function() {
    flag = true;
};

function modalstop() {
    if (flag == false) {
        //modalstop(); // 再起呼出し
        requestAnimationFrame(modalstop); // コールバック呼び出し
    } else {
        Change(); // 処理を進める
    }
}

＜参考＞
■ ビデオゲームの解剖学 - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Anatomy

Comments

[tsubasa33_3]

ご回答ありがとうございます。
試してみたところ、今回の同じメソッドを永遠と呼び出すエラーはなくなりました。ですが、document.body.onclick = function()
こちらのfunction()にて、Cannot set properties of null (setting 'onclick')　こちらのエラーが出現しました。　これは、要素が見つからないのでfunction()が適用されないということになりますかね？

[cx20]

> これは、要素が見つからないのでfunction()が適用されないということになりますかね？

はい。そうです。
JavaScript のコードの読み込み <script src="～"> を head 要素で行った場合、body 要素が見つからない為に上記のようなエラーになります。
その場合は、JavaScript の読み込みを body 要素の最後の方に持ってきて試してみて下さい。