Collision or overlap - JavaScript

Question

I'm trying to create a game where you control circle1 and make it go to circle2 and when this overlap happens there is an alert that says "Game Over".

I created a function that activates when the page loads and every 1000ms repeats the function, the problem is that as soon as I update the page, even if circle1 is not superimposed on circle2, it gives me an alert, and when I press ok, it opens another and so on...

Can you correct me? What am I doing wrong?

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";
}

I want when circle1 is in the same position as circle2, a "Game Over" alert appears.

Snippet:

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>

Dharman · Accepted Answer · 2020-12-29 10:56:37Z

There are a few flaws in the way you're trying to achieve your goal here.

First of all, the reason it happens is that you're trying to access the 'top' css attribute incorrectly, therefore the result in undefined and equal for both sides of the condition:

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

Since both of them are undefined, they are equal. Instead, if you'd want to access the 'top' css attribute you'll need to use the following method: getComputedStyle(document.getElementById("content")).top

You can read more here: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Second, there is an issue with the logic you're trying to implement, even in a case where the content top attribute would equal to contentTwo top attribute, that still doesn't mean that the 2 elements intersects.

Not sure if it's the best approach, but what I'd do instead is use the getBoundingClientRect method - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

That way you can get all the needed information(such as - x, y, width, height, left, right, bottom, top) in order to calculate whether the 2 circles intersects or not.

You should be able to calculate the distance between the 2 objects and then determine whether the 2 objects intersects or not, here is an example you can use for reference: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Last, I'd suggest trying to add logs in case you're having an unexpected scenario, by simply logging the result of the condition you could've easily seen that something is wrong there.

Ale · Accepted Answer · 2020-12-29 12:25:40Z

@pardovot Yes i solved it, thanks a lot, this is the JavaScript code:

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

Collectives™ on Stack Overflow

Collision or overlap - JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related