打鼹鼠游戏的缺陷

Question

我在建设一个简单的游戏。我相信问题是，当鼠标的“协调”被读取时，图片的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);

})

Answer 1

这是在黑暗中拍摄的一个小镜头(在评论中写得太多了)，但据我所知，当您在mousemove事件中记录鼠标位置时，您是而不是在click事件中这样做。我相信这并不是说图片的X和Y发生了变化，可能是由于点击后的mousemove事件，最后一次录制的鼠标的X和Y已经改变了。

一个一般的解决方案(因为它可以通过多种不同的方式来解决)可能是在click事件中记录鼠标的行和列，然后如果您的mousemove变量是true，则禁止鼠标在mousemove事件中的任何位置更新。所以也许是这样的：

canvas.addEventListener('mousemove', function(evt) {
    if(!clicker){
        // happily record the mouse position, because user hasn't clicked anything

在paint方法中，您可以检查clicker是否为true，并使用以前记录在click事件中的最后一个已知的鼠标位置执行文本处理，然后在完成处理时将其重置为false。您的paint方法相当大，而且在整个过程中似乎都使用了clicker，所以为了简洁起见，我不会发布完整的代码块，但我认为您已经理解了。

还:我注意到在您的if语句中，您正在使用&& clicker = true检查clicker变量。注意到单个等号吗？，这是非常糟糕的！不是检查它的值，而是分配它的值。记住，单等号代表赋值，双等于表示等价。

您可以通过几种方法解决该错误；最简单的方法是确保将其改为==，以及其他任何可能发生该错误的地方。或者，由于它是一个布尔值，您可以根据条件简单地执行&& clicker或&& !clicker。

或者，从逻辑上看，因为每个if和if else都取决于clicker是否是true, you can get rid of the redundant checking in each condition and simply wrap the entire thing in oneif`‘，如下所示：

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
}