HTML canvas の画面遷移 ボタンの判定

Question

前提・実現したいこと

・切り替えた画面に応じたボタンの判定をさせたい

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

・その画面に行き着く前に、ボタンが押された判定をしてしまう
・押していないボタンまでもが反応する

該当のソースコード

var cvs = document.getElementById('cvs1');
var ctx = cvs.getContext('2d');

var x = 0;
var y = 0;
function onClick(e) {
    var rect = e.target.getBoundingClientRect();
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;

    move();
}

window.onload = function () {

    //2Dコンテキストのオブジェクトを生成する
    var cvs = document.getElementById('cvs1');
    var ctx = cvs.getContext('2d');

    //画像オブジェクトを生成
    //画像をcanvasに設定


}

function q1() {
    if (200 < x && x < 395 && 200 < y && y < 245) {
        ctx.clearRect(0, 0, 600, 300);
        //画像オブジェクトを生成
        //画像をcanvasに設定
    }

}

function q1a2() {
    ctx.clearRect(0, 0, 600, 300);
    //画像オブジェクトを生成
    //画像をcanvasに設定
    }
    if (200 < x && x < 395 && 200 < y && y < 245) {

        q1();
    }
}

function q1a3() {
    ctx.clearRect(0, 0, 600, 300);
    //画像オブジェクトを生成
    //画像をcanvasに設定

    if (200 < x && x < 395 && 200 < y && y < 245) {

        q1();
    }
}

var count = 1

function move() {

    if (count == 4 && 40 < x && x < 365 && 40 < y && y < 70) {
        ctx.clearRect(0, 0, 600, 300);
        //画像オブジェクトを生成 
        //画像をcanvasに設定
        
        count = 5;
    }

    if (count == 4 && 45 < x && x < 325 && 128 < y && y < 157) {
        q1a2();
        alert("q1a2")

    } else if (45 < x && x < 388 && 210 < y && y < 247) {
        q1a3();

    }



    if (count == 3) {
        q1();
        count = count + 1;
    }

    if (count == 2) {
        if (200 < x && x < 395 && 200 < y && y < 245) {
            ctx.clearRect(0, 0, 600, 300);
            //画像オブジェクトを生成
            //画像をcanvasに設定

        }
        count = count + 1;
    }

    if (count == 1) {
        if (200 < x && x < 395 && 200 < y && y < 245) {

            ctx.clearRect(0, 0, 600, 300);

            //画像オブジェクトを生成
            //画像をcanvasに設定

        }
        count = count + 1;
    }
}


cvs.addEventListener('click', onClick, false);

<canvas id="cvs1" width="600" height="300"></canvas>
 <script type="text/javascript" src="js/a.js"></script>

試したこと

if文の入れ替え

Comments

[m.ts10806]

「すいい(推移)」ではなく「せんい(遷移)」ではないでしょうか

[atsk]

そうです記入ミスです

[yambejp]

存在しない画像をしている箇所が多すぎて、
もう少し整理できないですか？