Javascript 打鼹鼠游戏的缺陷

我正在开发一个简单的Javascript打鼹鼠游戏。我认为问题在于，当鼠标的“坐标”被读取时，图片的X和Y值会发生变化

在玩游戏时，单击图片，成功单击时应该出现的文本不会出现。这将不允许我将图片更改为“命中”图片，以让玩家知道他们击中了对象

代码如下：

$(document).ready(function() {
document.body.onmousedown = function() {
    return false;
} //so page is unselectable
//Canvas stuff
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
var mx, my;


var player;
var mC;
var mR;

var smackSound = new Audio("audio/boing.wav");
var smackSound2 = new Audio("audio/boing2.wav");
var smackSound3 = new Audio("audio/boing3.wav");

var mel = new Image();
var melHit = new Image();

var melX;
var melY;
var melXref;
var melYref;
/////////////////////////////////
////////////////////////////////
////////    GAME INIT
/////// Runs this code right away, as soon as the page loads.
//////  Use this code to get everything in order before the game starts 
//////////////////////////////
/////////////////////////////

function init() {
    //////////
    ///STATE VARIABLES
    mel.src = "images/mel.jpg";
    melHit.src = "images/melCrazy.jpg";
    //////////////////////
    ///GAME ENGINE START
    //  This starts the game/program
    //  "paint is the piece of code that runs over and over again.
    //  "60" sets how fast things should go
    if (typeof game_loop != "undefined") clearInterval(game_loop);
    game_loop = setInterval(paint, 1000);
}
init();

function generate() {
    var random;
    random = Math.floor(Math.random() * 4);
    while (random == 3) {
        random = Math.floor(Math.random() * 4);
    }
    return random;
}


function posDisplay() {
    ctx.fillStyle = "black"
    ctx.fillText("Mouse Column: " + mC, 10, 10);
    ctx.fillText("Mouse Row: " + mR, 10, 20);
}
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////
////////    Main Game Engine
////////////////////////////////////////////////////
///////////////////////////////////////////////////

function paint() {
    ctx.clearRect(0, 0, w, h);

    melX = generate() * w / 3;
    melY = generate() * h / 3;

    //melXref = generate() / w / 3;
    //melYref = generate() / h / 3;
    //ctx.fillStyle = 'white';

    posDisplay()


    ctx.drawImage(mel, melX, melY, 200, 200);

    if (melXref == mR && melYref == mC && clicker = true) {

        ctx.fillStyle = "black";
        ctx.fillText("It works!!!!!", 200, 200);
    }

    if (melX < w / 3 && clicker = true) { // First Column (Mel)

        if (melY < h / 3) {
            melXref = 1
            melYref = 1
            //  clicker = true;

        } else if (melY > h / 3 && melY < h / 1.5) {
            melXref = 1
            melYref = 2
            // clicker = true;

        } else if (melY > h / 1.5) {
            melXref = 1
            melYref = 3
            //  clicker = true;
        }

  } else if (melX > w / 3 && melX < w / 1.5 && clicker = true) { // Second Column (Mel)

        if (melY < h / 3) {

            melXref = 2
            melYref = 1
            // clicker = true;

        } else if (melY > h / 3 && melY < h / 1.5) {

            melXref = 2
            melYref = 2
            //  clicker = true;

        } else if (melY > h / 1.5) {

            melXref = 2
            melYref = 3
            // clicker = true;
        }

    } else if (melX > w / 1.5 && clicker = true) { // Third Column (Mel)

        if (melY < h / 3) {
            melXref = 3
            melYref = 1
            //  clicker = true;

        } else if (melY > h / 3 && melY < h / 1.5) {
            melXref = 3
            melYref = 2
            //  clicker = true;

        } else if (melY > h / 1.5) {
            melXref = 3
            melYref = 3
            // clicker = true;
        }
        if (melXref == mR && melYref == mC) {
            ctx.fillStyle = "black";
            ctx.fillText("IT WORKS", 200, 200);
        }
        ctx.drawImage(mel, melX, melY, 200, 200);
        if (melX == mx && melY == my) {
            ctx.fillStyle = "black";
            ctx.fillText("YESSSSSSSSS", 250, 250);
            //ctx.drawImage(melHit,(generate()*200),(generate()*200),200,200);
        }
    } ////////////////////////////////////////////////////////////////////////////////END PAINT/ GAME ENGINE
}
////////////////////////////////////////////////////////
///////////////////////////////////////////////////////
/////   MOUSE LISTENER 
//////////////////////////////////////////////////////
/////////////////////////////////////////////////////
/////////////////
// Mouse Click
///////////////
canvas.addEventListener('click', function(evt) {
    if (mx < w && my < h) {
        clicker = true;
    } else {
        clicker = false;
    }
    if (clicker = true && mx < w && my < h) { // Randomizes the sound && only allows audio to be played if it is within the canvas
        if (generate() == 1) {
            smackSound.play();
        } else if (generate() == 2) {
            smackSound2.play();
        } else if (generate() == 3) {
            smackSound3.play();
        }
    }
}, false);
canvas.addEventListener('mouseout', function() {
    pause = true;
}, false);
canvas.addEventListener('mouseover', function() {
    pause = false;
}, false);
canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    mx = mousePos.x;
    my = mousePos.y;
    if (mx < w / 3) { // First Column
        if (my < h / 3) {
            mC = 1
            mR = 1
            // clicker = true;
        } else if (my > h / 3 && my < h / 1.5) {
            mC = 1
            mR = 2
            //clicker = true;
        } else if (my > h / 1.5) {
            mC = 1
            mR = 3
            // clicker = true;
        }
    } else if (mx > w / 3 && mx < w / 1.5) { // Second Column
        if (my < h / 3) {
            mC = 2
            mR = 1
            // clicker = true;
        } else if (my > h / 3 && my < h / 1.5) {
            mC = 2
            mR = 2
            // clicker = true;
        } else if (my > h / 1.5) {
            mC = 2
            mR = 3
            //  clicker = true;
        }
    } else if (mx > w / 1.5) { // Third Column
        if (my < h / 3) {
            mC = 3
            mR = 1
            //  clicker = true;
        } else if (my > h / 3 && my < h / 1.5) {
            mC = 3
            mR = 2
            // clicker = true;
        } else if (my > h / 1.5) {
            mC = 3
            mR = 3
            //  clicker = true;
        }
    }
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
///////////////////////////////////
//////////////////////////////////
////////    KEY BOARD INPUT
////////////////////////////////
window.addEventListener('keydown', function(evt) {
    var key = evt.keyCode;
    //p 80
    //r 82
    //1 49
    //2 50
    //3 51
}, false);

$（文档）.ready（函数（）{
document.body.onmousedown=函数（）{
返回false；
}//因此页面不可选择
//帆布
var canvas=$（“#canvas”）[0]；
var ctx=canvas.getContext（“2d”）；
var w=$（“#画布”）.width（）；
var h=$（“#画布”）.height（）；
var-mx，我的；
var播放器；
var-mC；
var-mR；
var smackSound=新音频（“Audio/boing.wav”）；
var smackSound2=新音频（“音频/boing2.wav”）；
var smackSound3=新音频（“Audio/boing3.wav”）；
var mel=新图像（）；
var melHit=新图像（）；
梅尔克斯变种；
梅利变种；
var-melXref；
梅里里夫变种；
/////////////////////////////////
////////////////////////////////
////////游戏初始化
///////在页面加载后立即运行此代码。
//////在游戏开始前，使用此代码将一切整理好
//////////////////////////////
/////////////////////////////
函数init（）{
//////////
///状态变量
mel.src=“images/mel.jpg”；
melHit.src=“images/melCrazy.jpg”；
//////////////////////
///游戏引擎启动
//这将启动游戏/程序
//“paint是一段反复运行的代码。
//“60”设定了事情的发展速度
如果（游戏循环类型！=“未定义”）清除间隔（游戏循环）；
game_loop=setInterval（绘制，1000）；
}
init（）；
函数生成（）{
var随机；
random=Math.floor（Math.random（）*4）；
while（random==3）{
random=Math.floor（Math.random（）*4）；
}
返回随机；
}
函数posDisplay（）{
ctx.fillStyle=“黑色”
fillText（“鼠标列：”+mC，10，10）；
ctx.fillText（“鼠标行：+mR，10,20”）；
}
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////
////////主游戏引擎
////////////////////////////////////////////////////
///////////////////////////////////////////////////
函数绘制（）{
ctx.clearRect（0，0，w，h）；
melX=generate（）*w/3；
melY=generate（）*h/3；
//melXref=generate（）/w/3；
//melYref=generate（）/h/3；
//ctx.fillStyle='白色'；
posDisplay（）
ctx.drawImage（mel，melX，melY，200200）；
if（melXref==mR&&melYref==mC&&clicker=true）{
ctx.fillStyle=“黑色”；
ctx.fillText（“它有效！！！”，200200）；
}
如果（melXh/3&&melYh/1.5）{
melXref=1
melYref=3
//clicker=true；
}
}如果（melX>w/3&&melXh/3&&melYh/1.5）{
melXref=2
melYref=3
//clicker=true；
}
}如果（melX>w/1.5&&clicker=true）{//第三列（Mel）
if（melYh/3&&melYh/1.5）{
melXref=3
melYref=3
//clicker=true；
}
if（melXref==mR&&melYref==mC）{
ctx.fillStyle=“黑色”；
ctx.fillText（“它有效”，200200）；
}
ctx.drawImage（mel，melX，melY，200200）；
如果（melX==mx&&melY==my）{
ctx.fillStyle=“黑色”；
ctx.fillText（“yesss”，250250）；
//ctx.drawImage（melHit，（generate（）*200），（generate（）*200），200200）；
}
}//////////////////////////////////////////////////////////////////////////////END PAINT/GAME ENGINE
}
////////////////////////////////////////////////////////
///////////////////////////////////////////////////////
/////鼠标侦听器
//////////////////////////////////////////////////////
/////////////////////////////////////////////////////
/////////////////
//鼠标点击
///////////////
canvas.addEventListener（'click'，函数（evt）{
if（mxh/3&&myh/1.5）{
canvas.addEventListener('mousemove', function(evt) {
    if(!clicker){
        // happily record the mouse position, because user hasn't clicked anything

if(clicker){
    if (melXref == mR && melYref == mC) {
        ctx.fillStyle = "black";
        ctx.fillText("It works!!!!!", 200, 200);
    }

    if (melX < w / 3) { // First Column (Mel)

    ... other conditions
}