需要幫助在Canvas上移動兩個對象

Question

首先，我正在學習JavaScript並嘗試創建一個舊的Atari Pong游戲。 我停留在這一點，我可以讓其中一個槳移動，但不是第二個。 游戲仍然有效，但一個槳不會移動。 這是我不會移動的槳的代碼：

var p2X = canvas.width/2 + 550;
var p2Y = canvas.height/2;
var p2Radius = 35;
var p2Height = 100;

和：

var p2UpPressed = false;
var p2DownPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

我已經使用EventListener和keyUp / downHandler作為第一個paddle，我想知道這是否是第二個不會移動的原因？

function keyDownHandler(e){
if(e.keyCode == 87){
p2UpPressed = true;
}
else if(e.keyCode == 83){
p2DownPressed = true;
}
}
function keyUpHandler(e){
if(e.keyCode == 87){
p2UpPressed = false;
}
else if(e.keyCode == 83){
p2DownPressed = false;
}
}

這是實際的移動位：

if(p2UpPressed && p2Y <canvas.height-p2Radius){
p2Y += 7;
}
else if(p2DownPressed && p2Y > 0){
p2Y-=7;
}

任何幫助將非常感激。 謝謝！

Answer 1

首先，提示調試：首先查看是否正在調用播放器2的處理程序！ 容易做，只需把console.log("hello fren"); 在處理程序中，然后按鍵並觀察控制台。 或者，您可以在控制台中使用斷點或“監視” p2UpPressed變量，但這些技術有點高級，在這種情況下並不是必需的。

因此，基於猜測，然后在評論中進行確認，您的處理程序功能對於兩個玩家都是相同的。 這將無法工作，因為它將簡單地使用代碼中首先定義的任何函數。 不要忘記你可以隨心所欲地命名函數，所以你可以將它們命名為p1KeyDownHandler和p2KeyDownHandler ，或yoyoboi和misterdude如果你覺得如此傾向（雖然慣例是你給它們命名為明智的東西：P）。

我很確定你可以為同一個事件添加多個處理程序，但這可能是更好的方法：

function keyDownHandler(e) {
    if (e.keyCode == xx) { //replace xx with whatever keycode you want for p1
        p1UpPressed = true;
    } else if (e.keyCode == xx) { //same as above
        p1DownPressed = true;
    } else if (e.keyCode == 87) {
        p2UpPressed = true;
    } else if (e.keyCode == 83) {
        p2DownPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.keyCode == xx) { //same as above
        p1UpPressed = false;
    } else if (e.keyCode == xx) { //same as above
        p1DownPressed = false;
    } else if (e.keyCode == 87) {
        p2UpPressed = false;
    } else if (e.keyCode == 83) {
        p2DownPressed = false;
    }
}

然后你只做一次：

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);