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);

我已经为第一个paddle使用了EventListener和keyUp / downHandler，我想知道这是不是为什么第二个不会移动？

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);

需要帮助在Canvas上移动两个对象

1 个答案: