碰撞或重叠 - JavaScript答案

【问题标题】：Collision or overlap - JavaScript碰撞或重叠 - JavaScript
【发布时间】：2020-12-29 10:17:22
【问题描述】：

我正在尝试创建一个游戏，您可以在其中控制 circle1 并将其转到 circle2，当发生这种重叠时，会显示“游戏结束”的警报。

我创建了一个在页面加载时激活的功能，并且每 1000ms 重复该功能，问题是一旦我更新页面，即使circle1 没有叠加在circle2 上，它也会给我一个警报，当我按确定时，它会打开另一个等等...

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

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="script.js"></script>
</head>
<body onload="checkCollision()">
    <div id="content"></div>
    <div id="contentTwo"></div>
    <div id="buttonDiv">
    <button onclick="moveUp()" class="buttonUp">⇧</button>
    <br>
    <button onclick="moveLeft()">⇦</button>
    <button onclick="moveDown()">⇩</button>
    <button onclick="moveRight()">⇨</button>
    </div>
</body>
</html>

CSS：

body {
    background-color: #222222;
}
#content {
    background-color: #aaaaaa;
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 50px;
    left: 200px;
    top: 20px;
}
#contentTwo {
    background-color: #dddddd;
    width: 40px;
    height: 40px;
    position: relative;
    top: 80px;
    border-radius: 50px;
}
button {
    width: 50px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    margin: auto;
}
.buttonUp {
    margin-top: 300px;
}
#buttonDiv {
    text-align: center;
    width: auto;
    height: auto;
    background-color: transparent;
}

JavaScript：

var pixelTop = 20;
var pixelLeft = 200;
function checkCollision() {
    if (document.getElementById("content").top === document.getElementById("contentTwo").top) {
        alert("Game Over");
        }
    setTimeout("checkCollision()",1000);
}
function moveUp() {
    pixelTop += -10;
    document.getElementById("content").style.top = pixelTop+"px";
}
function moveLeft() {
    pixelLeft += -10;
    document.getElementById("content").style.left = pixelLeft+"px";
}
function moveDown() {
    pixelTop += 10;
    document.getElementById("content").style.top = pixelTop+"px";
}
function moveRight() {
    pixelLeft += 10;
    document.getElementById("content").style.left = pixelLeft+"px";
}

我希望当circle1 与circle2 处于同一位置时，会出现“游戏结束”警报。

片段：

var pixelTop = 20;
var pixelLeft = 200;

function checkCollision() {
  if (document.getElementById("content").top === document.getElementById("contentTwo").top) {
    alert("Game Over");
  }
  setTimeout("checkCollision()", 1000);
}

function moveUp() {
  pixelTop += -10;
  document.getElementById("content").style.top = pixelTop + "px";
}

function moveLeft() {
  pixelLeft += -10;
  document.getElementById("content").style.left = pixelLeft + "px";
}

function moveDown() {
  pixelTop += 10;
  document.getElementById("content").style.top = pixelTop + "px";
}

function moveRight() {
  pixelLeft += 10;
  document.getElementById("content").style.left = pixelLeft + "px";
}

body {
  background-color: #222222;
}

#content {
  background-color: #aaaaaa;
  width: 60px;
  height: 60px;
  position: relative;
  border-radius: 50px;
  left: 200px;
  top: 20px;
}

#contentTwo {
  background-color: #dddddd;
  width: 40px;
  height: 40px;
  position: relative;
  top: 80px;
  border-radius: 50px;
}

button {
  width: 50px;
  height: 50px;
  font-size: 30px;
  font-weight: bold;
  margin: auto;
}

.buttonUp {
  margin-top: 300px;
}

#buttonDiv {
  text-align: center;
  width: auto;
  height: auto;
  background-color: transparent;
}

<body onload="checkCollision()">
  <div id="content"></div>
  <div id="contentTwo"></div>
  <div id="buttonDiv">
    <button onclick="moveUp()" class="buttonUp">⇧</button>
    <br>
    <button onclick="moveLeft()">⇦</button>
    <button onclick="moveDown()">⇩</button>
    <button onclick="moveRight()">⇨</button>
  </div>
</body>

【问题讨论】：

标签： javascript html css collision-detection overlap

【解决方案1】：

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

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

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

由于它们都是未定义的，因此它们是相等的。相反，如果您想访问 'top' css 属性，您需要使用以下方法： getComputedStyle(document.getElementById("content")).top

您可以在此处阅读更多内容： https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

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

不确定这是否是最好的方法，但我会改为使用 getBoundingClientRect 方法 - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

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

您应该能够计算两个对象之间的距离，然后确定两个对象是否相交，这里有一个示例供您参考： https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

最后，我建议尝试添加日志，以防遇到意外情况，只需记录条件的结果即可轻松看出那里有问题。

【讨论】：

【解决方案2】：

@pardovot 是的，我解决了，非常感谢，这是 JavaScript 代码：

var pixelTop = 20;
var pixelLeft = 200;
function moveUp() {
    pixelTop += -10;
    document.getElementById("content").style.top = pixelTop+"px";
}
function moveLeft() {
    pixelLeft += -10;
    document.getElementById("content").style.left = pixelLeft+"px";
}
function moveDown() {
    pixelTop += 10;
    document.getElementById("content").style.top = pixelTop+"px";
}
function moveRight() {
    pixelLeft += 10;
    document.getElementById("content").style.left = pixelLeft+"px";
}
function checkCollision() {
    var content1 = document.getElementById("content");
    var position1 = content1.getBoundingClientRect();
    var x1 = position1.left;
    var y1 = position1.top;
    var w1 = position1.width;
    var h1 = position1.height;
    var content2 = document.getElementById("contentTwo");
    var position2 = content2.getBoundingClientRect();
    var x2 = position2.left;
    var y2 = position2.top;
    var w2 = position2.width;
    var h2 = position2.height;
    if (x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2) {
        console.log("Hitted")
    }
    setTimeout("checkCollision()",1);
}

【讨论】：