需要帮助在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);