重擊遊戲瑕疵

Question

我正在建造一個簡單的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); 

}）

Answer 1

這是一個有點黑暗（和其過多加入了註釋）一射，但我可以告訴，而你是在mousemove事件中記錄鼠標位置，你在click事件中是而不是這樣做。我相信它沒有那麼多，圖片的X和Y已經改變了，可能是由於點擊之後mousemove事件觸發，最後錄製的鼠標的X和Y已經改變。

的一般解（因爲它可以解決許多不同的方式）可能是記錄鼠標的行和列在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似乎始終都在使用，所以我不會爲了簡潔起見而發佈完整的代碼塊，但我認爲你明白了。

ALSO：我注意到在你的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 one if`，就像這樣：

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 
}