Question

我正在建造一个简单的Javascript Whack-a-mole游戏。我相信问题是当读取鼠标的“坐标”时，图片的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

这在黑暗中是一个镜头（并且它的评论太多了），但是从我所知道的，当你在{{中记录鼠标位置时1}}事件，您在mousemove事件中不这样做。我相信它不是因为图片的X和Y已经改变了，可能是由于点击后click事件被触发，最后记录的鼠标的X和Y已经改变了。

一般解决方案（因为它可以通过许多不同方式解决）可能是在mousemove事件中记录鼠标的行和列，然后在click事件中禁止任何鼠标位置更新您的mousemove变量为clicker。所以可能类似以下内容：

true

在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变量。注意单个等号？ 那太糟糕了！而不是检查它的值，你被分配了它的值。记住单个等于是赋值，双等于是等价。

你可以通过几种方式解决这个错误;最简单的方法是简单地确保将其更改为&& clicker = true，以及其他任何可能导致该错误的地方。或者，由于它是布尔值，您可以简单地执行==或&& clicker，具体取决于条件。

或者，从您的逻辑看起来，因为每个&& !clicker和if取决于if else是clicker if`，如下所示：

true, you can get rid of the redundant checking in each condition and simply wrap the entire thing in one

Whack-a-Mole游戏缺陷

1 个答案: