Javascript keypress addEventListener
我很抱歉,因为我是一个新手,所以我的编程效率低下,这是一个巨大的难题。Javascript keypress addEventListener
我试图在HTML5画布上使用Javascript制作一个非常基本的游戏,我似乎无法找到一种简单的方法来“检查”多个用户输入。
我已经成功地使用addEventListener进行单人游戏。但是,当试图使其成为多人游戏时,一切都会崩溃。我不确定是否使用'keydown'addEventListener两次。
基本上,游戏使用WASD键和第二个玩家的答案使用箭头键检查第一个玩家的答案。
目前,我有下面的代码片段和代码是完全复制了p2Game与功能 ga.addEventListener('keydown', check2, false)
:
function p1Game() {
ga.addEventListener('keydown', check1, false);
blankp1screen();
p1Time = 0;
switch(random[p1Level]) {
case 1: // if the answer is UP, we will display DOWN
p1drawTriangleDown();
p1correctkeyID = 87; // answer for UP (W) key
break;
case 2: // if the answer is DOWN, we will display UP
p1drawTriangleUp();
p1correctkeyID = 83; // answer for DOWN (S) key
break;
case 3: // if the answer is LEFT, we will display RIGHT
p1drawTriangleRight();
p1correctkeyID = 65; // answer for the LEFT (A) key
break;
case 4: // if the answer is RIGHT, we will display LEFT
p1drawTriangleLeft();
p1correctkeyID = 68; // answer for the RIGHT (D) key
break;
}
function check1(e) {
p1tt += p1Time;
if (e.keyCode == 87 || e.keyCode == 83 || e.keyCode == 65 || e.keyCode == 68) { // Checks if user enters the keys we want
p1Answer = e.keyCode; // Stores the key to check
if (p1correctkeyID == p1Answer) { // If the answer is the correct answer...
if (p1Level < maxlevel) { // ...if we're not on level 10, we'll continue!
blankp1screen();
p1correctkeyID = null;
p1Answer == null;
p1Levelup();
if ((p1Level - p2Level) == checkforafk) {
p2Slow();
} else {
p1Game();
}
} else if (p1Level == maxlevel) { // if we're on the max level, we'll let the player win!
p1Win();
}
} else if (p1correctkeyID !== p1Answer) {
p1Lose(); }
}
}
ga.removeEventListener('keypress', check1, false);
}
对于p2Game:
function p2Game() {
ga.addEventListener('keydown', check2, false);
p2Time = 0;
blankp2screen();
switch(random[p2Level]) {
case 1: // if the answer is UP, we will display DOWN
p2drawTriangleDown();
p2correctkeyID = 38; // answer for UP (W) key
break;
case 2: // if the answer is DOWN, we will display UP
p2drawTriangleUp();
p2correctkeyID = 40; // answer for DOWN (S) key
break;
case 3: // if the answer is LEFT, we will display RIGHT
p2drawTriangleRight();
p2correctkeyID = 37; // answer for the LEFT (A) key
break;
case 4: // if the answer is RIGHT, we will display LEFT
p2drawTriangleLeft();
p2correctkeyID = 39; // answer for the RIGHT (D) key
break;
}
function check2(e) {
p1tt += p2Time;
if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 37 || e.keyCode == 39) { // Checks if user enters the keys we want
p2Answer = e.keyCode; // Stores the key to check
if (p2correctkeyID == p1Answer) { // If the answer is the correct answer...
if (p2Level < maxlevel) { // ...if we're not on level 10, we'll continue!
blankp2screen();
p2correctkeyID = null;
p2Answer == null;
p2Levelup();
if ((p2Level - p1Level) == checkforafk) {
p2Slow();
} else {
p2Game();
}
} else if (p2Level == maxlevel) { // if we're on level 10, we'll let the player win!
p2Win(); // Max Level! Congratulations!
}
} else if (p2correctkeyID !== p2Answer) {
p2Lose();
}
}
}
ga.removeEventListener('keypress', check2, false);
}
那么很难说没有一个运行的例子来调试。但首先,如果你运行你的代码两次,你将有两个听众为每个球员。如果你运行三次,你将有三次,依此类推。这是因为您正在为事件添加事件侦听器,但是您将删除keypress
,这意味着您永远不会删除处理程序。
我的建议是,你不应该在不同的地方处理这两个输入,它看起来似乎很容易,但它会在你的代码中产生'同步'问题,因为你不得不处理玩家1的状态处理玩家2的代码。因此,只需一个事件处理代码,并为每个事件做你需要做的事情。我认为如果你使用了很好的抽象,你会最终得到更易于遵循的代码(我知道你说你开始编程,所以这就是为什么我建议你应该采取一种更容易推理的方法现在)。
哦!我完全没有看到这个错字!感谢您的回答!除了addEventListener之外,是否还会有其他函数来删除包含和删除的冗余?我试图在用户获胜后删除EventListener,但似乎我不能跨功能完成此操作 – Transit
请解释一下问题所在。 “一切都分崩离析”似乎不是一个适当的问题或问题。代码看起来或多或少是正确的,但由于无法运行,所以不可能知道您目前的问题是什么。 – damianmr
道歉!在回答/经历2次迭代之后,游戏跳转到p1Lose()并且p2Game()似乎没有接受任何输入。 重新启动游戏(再次调用p1Game()和p2Game()函数)后,游戏认为player1的每个输入都是错误的。 我已经用p2Game()的代码更新了我的帖子。 – Transit
你必须从头开始重写这段代码。由于您反复调用'p2Game',因此您还可以多次调用addEventListener,将重复事件处理程序链接到click事件。这意味着当您点击时,相同的功能会被执行很多次,而且只会变得更糟。你需要坐下来重新考虑这一点。 – trincot