冲突或重叠-JavaScript

我正在尝试创建一个游戏，您可以控制

circle1

，并将其转到

circle2

，当这种重叠发生时，会出现一个警告，提示“游戏结束”

我创建了一个在页面加载时激活的函数，每1000毫秒重复一次该函数，问题是一旦我更新页面，即使

circle1

没有叠加在

circle2

上，它也会给我一个警报，当我按ok时，它会打开另一个，以此类推

你能纠正我吗？我做错了什么

HTML:

指数
⇧


⇦
⇩
⇨

CSS:

正文{
背景色：#22222；
}
#内容{
背景色：#AAAAA；
宽度：60px；
高度：60px；
位置：相对位置；
边界半径：50px；
左：200px；
顶部：20px；
}
#内容二{
背景色：#dddddd；
宽度：40px；
高度：40px；
位置：相对位置；
顶部：80px；
边界半径：50px；
}
钮扣{
宽度：50px；
高度：50px；
字体大小：30px；
字体大小：粗体；
保证金：自动；
}
.钮扣{
边缘顶部：300px；
}
#纽顿迪夫{
文本对齐：居中；
宽度：自动；
高度：自动；
背景色：透明；
}

JavaScript:

var pixelTop=20；
var pixelLeft=200；
函数checkCollision（）{
if（document.getElementById（“content”）.top==document.getElementById（“contentTwo”）.top）{
警报（“游戏结束”）；
}
setTimeout（“checkCollision（）”，1000）；
}
函数moveUp（）{
pixelTop+=-10；
document.getElementById（“content”）.style.top=pixelTop+“px”；
}
函数moveLeft（）{
像素左+=-10；
document.getElementById（“content”）.style.left=pixelLeft+“px”；
}
函数moveDown（）{
pixelTop+=10；
document.getElementById（“content”）.style.top=pixelTop+“px”；
}
函数moveRight（）{
像素左+=10；
document.getElementById（“content”）.style.left=pixelLeft+“px”；
}

我想当

circle1

与

circle2

处于相同位置时，会出现“游戏结束”警报。

片段：

var pixelTop=20；
var pixelLeft=200；
函数checkCollision（）{
if（document.getElementById（“content”）.top==document.getElementById（“contentTwo”）.top）{
警报（“游戏结束”）；
}
setTimeout（“checkCollision（）”，1000）；
}
函数moveUp（）{
pixelTop+=-10；
document.getElementById（“content”）.style.top=pixelTop+“px”；
}
函数moveLeft（）{
像素左+=-10；
document.getElementById（“content”）.style.left=pixelLeft+“px”；
}
函数moveDown（）{
pixelTop+=10；
document.getElementById（“content”）.style.top=pixelTop+“px”；
}
函数moveRight（）{
像素左+=10；
document.getElementById（“content”）.style.left=pixelLeft+“px”；
}

正文{
背景色：#22222；
}
#内容{
背景色：#AAAAA；
宽度：60px；
高度：60px；
位置：相对位置；
边界半径：50px；
左：200px；
顶部：20px；
}
#内容二{
背景色：#dddddd；
宽度：40px；
高度：40px；
位置：相对位置；
顶部：80px；
边界半径：50px；
}
钮扣{
宽度：50px；
高度：50px；
字体大小：30px；
字体大小：粗体；
保证金：自动；
}
.钮扣{
边缘顶部：300px；
}
#纽顿迪夫{
文本对齐：居中；
宽度：自动；
高度：自动；
背景色：透明；
}

⇧


⇦
⇩
⇨

在您试图实现目标的过程中存在一些缺陷

首先，发生这种情况的原因是您试图错误地访问“top”css属性，因此导致条件双方都未定义且相等：

document.getElementById("content").top // undefined 
document.getElementById("contentTwo").top // undefined

因为它们都是未定义的，所以它们是相等的。相反，如果您想访问“top”css属性，则需要使用以下方法： getComputedStyle（document.getElementById（“内容”））.top

您可以在此处阅读更多内容：

其次，您试图实现的逻辑存在问题，即使在contenttop属性等于contentTwo top属性的情况下，这也不意味着这两个元素相交

不确定这是否是最好的方法，但我要做的是使用getBoundingClientRect方法-

这样，您就可以获得所有需要的信息（例如-x、y、宽度、高度、左、右、下、上），以便计算这两个圆是否相交

您应该能够计算这两个对象之间的距离，然后确定这两个对象是否相交，以下是一个可供参考的示例：

---

最后，我建议您尝试添加日志，以防出现意外情况，只需记录条件的结果，您就可以很容易地看到那里出了问题。

在您尝试实现目标的方式中存在一些缺陷

首先，发生这种情况的原因是您试图错误地访问“top”css属性，因此导致条件双方都未定义且相等：

document.getElementById("content").top // undefined 
document.getElementById("contentTwo").top // undefined

因为它们都是未定义的，所以它们是相等的。相反，如果您想访问“top”css属性，则需要使用以下方法： getComputedStyle（document.getElementById（“内容”））.top

您可以在此处阅读更多内容：

其次，您试图实现的逻辑存在问题，即使在contenttop属性等于contentTwo top属性的情况下，这也不意味着这两个元素相交

不确定这是否是最好的方法，但我要做的是使用getBoundingClientRect方法-

这样，您就可以获得所有需要的信息（例如-x、y、宽度、高度、左、右、下、上），以便计算这两个圆是否相交

你应该会计算