Javascript 如何检测元素何时位于屏幕的特定部分

你还记得那个游戏机游戏“吉他英雄”吗？或者，如果你稍微年轻一点，“钢琴砖”

如果您不知道我在说什么，请单击此链接获取想法=

嗯，这正是我在这个网站上所做的（当然是在更基本的层面上）

没有必要阅读整个代码

• 我需要你的帮助：

查看JavaScript代码并转到

animateFunction（）

函数。 在

if语句中

您将看到我用人类语言编写了一个条件，即“如果我按'Q键'，当您得到正确的注释时，左边的方块就是它应该在的位置，那么

console.log（currentNotePosition.bottom）；

”而中间一行和右边的注释的

if语句

是相同的

• 问题是： 当我点击按键（'Q'、'W'和'E'）时，

  console.log（currentNotePosition.bottom）

  确实会执行，但它有时会执行，而不是当便笺在现场时，它应该在我希望它控制台时执行。记录底部位置。因此，基本上，我的代码无法检测音符何时位于可以得分的位置

• 我对这个问题的看法是： 我的代码无法识别我要“在哪个div/music_音符上作曲”

这里是查看和使用我的代码的更好地方（点击“创建”按钮开始“游戏”）： （如果在Codepen游乐场上你看不到“web浏览器屏幕”，那么只需从底部向上拉，它是一个窗口，就像“包含”代码的窗口一样）

PD：这是用Vanilla JavaScrpt编写的（没有库或框架）

让速度=1；
idArray=[]；
让topPositionThatAdds=0；
设左平方={
颜色：“红色”，
位置左：“250px”，
类：'squareLeft'，
}
设平方中={
颜色：“绿色”，
位置左：“750px”，
类：'squareMiddle'，
}
让右平方={
颜色：“黄色”，
位置左：“1250px”，
类：'squareRight'，
}
闲置=0；
randomSquare=[squareLeft，squareMiddle，squareRight]；
函数generateSquares（）{
让randomValue=randomSquare[Math.floor（randomSquare.length*Math.random（））]；
const newDiv=document.createElement（“div”）；
newDiv.classList.add（randomValue.class）；
newDiv.style.top=“-100px”；
newDiv.setAttribute（“id”，idList.toString（））；
懒散的++；
推（空转）；
文件.body.appendChild（newDiv）；
for（设i=0；i700&¤tNotePosition.bottom<900&&element.classList.contains（'squareLeft'））{
console.log（currentNotePosition.bottom）；
}如果（e.keyCode==87/*W*/&¤tNotePosition.bottom>700&¤tNotePosition.bottom<900&&element.classList.contains（'squareMiddle'））{
console.log（currentNotePosition.bottom）；
}如果（e.keyCode==69/*e*/&¤tNotePosition.bottom>700&¤tNotePosition.bottom<900&&element.classList.contains（'squareRight'））{
console.log（currentNotePosition.bottom）；
}
}
}，速度）；
}
}
函数startName（）{
让randomGenerationNumber=Math.floor（Math.random（）*（500-250））+250；
常量间隔=设置间隔（generateSquares，randomGenerationNumber）；
}
document.getElementById（'button'）。addEventListener（“单击”，开始名称）
正文{
背景：黄色；
填充：0；
保证金：0；
溢出：隐藏；
背景尺寸：封面；
}
#酒吧{
位置：绝对位置；
底部：0；
/*顶部：770px*/
高度：100px；
宽度：100%；
背景：rgb（52162162）；
背景：线性梯度（90度，rgba（52162162，.25）0%，rgba（144,28103,1）100%）；
z指数：2；
}
.对{
位置：绝对位置；
高度：100px；
宽度：100px；
z指数：1；
左：250px；
背景尺寸：封面；
背景色：红色；
}
.方中{
位置：绝对位置；
高度：100px；
宽度：100px；
z指数：1；
左：750px；
背景尺寸：封面；
背景颜色：绿色；
}
.左{
位置：绝对位置；
高度：100px；
宽度：100px；
z指数：1；
左：1250px；
背景尺寸：封面；
背景颜色：蓝色；
}

水龙头
创造
好问题……您遇到的问题之一是，整个文档只能有一个
document.body.onkeyup
处理程序
document.body.addEventListener
似乎是您所追求的，因为您可以分配无限的侦听器，但在您的codePen中这样做，即使没有交互，也可以看到整个过程缓慢地爬行。那么我恐怕就要在循环中设置间隔了。您解决这个问题的核心方法（检查与底部的距离）通常是合理的，但目前的实现是行不通的。嵌套间隔只是一个问题。然后是关于无缘无故地重写完全相同的处理程序代码
interval1*interval2
次的部分。但最直接的原因是，这个问题是由于您在
animate（）
函数中创建的竞争条件造成的