时间戳

首页 > 解决方案 > 碰撞或重叠 - JavaScript

javascript - 碰撞或重叠 - JavaScript

问题描述

我正在尝试创建一个游戏，你可以控制circle1它并让它去circle2，当这种重叠发生时，会有一个警告说“游戏结束”。

我创建了一个在页面加载时激活的功能，并且每 1000 毫秒重复该功能，问题是一旦我更新页面，即使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">⇧&lt;/button>
    <br>
    <button onclick="moveLeft()">⇦&lt;/button>
    <button onclick="moveDown()">⇩&lt;/button>
    <button onclick="moveRight()">⇨&lt;/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">⇧&lt;/button>
    <br>
    <button onclick="moveLeft()">⇦&lt;/button>
    <button onclick="moveDown()">⇩&lt;/button>
    <button onclick="moveRight()">⇨&lt;/button>
  </div>
</body>

标签： javascripthtmlcsscollision-detectionoverlap

解决方案

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

推荐阅读