How to make a collision detection between this 2 divs?

Question

I want to activate a collision detection between the green and red div, simple, just square collision. I need it for a game like the dinosaur of google, I'm designing for a class proyect. I putted the var of the size form macaco and obstaculo in comment, beacuse something is not working in it, if i leave it normal, the jump function does not work.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inicio esqueleto</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>

    <div onclick="saltar()" id="macaco" class="macaco"></div> 

    <div id="obstaculo"></div>

<script type="text/javascript">

    var macaco = document.getElementById("macaco");
    var obstaculo = document.getElementById("obstaculo");

    function saltar(){
        macaco.classList.add("play");
        setTimeout(function(){
            macaco.classList.remove("play");
        },1000);
}

// var macaco = {x: 40, y: 70, width: 40, height: 70};
// var obstaculo = {x: 40, y: 50, width: 40, height: 50};


function collision(macaco, obstaculo){
if (macaco.x < obstaculo.x + obstaculo.width &&
    macaco.x + macaco.width > obstaculo.x &&
    macaco.y < obstaculo.y + obstaculo.height &&
    macaco.y + macaco.height > obstaculo.y
    ) {
    alert("It worked!")
    // Colision detectada
} return true
}

</script>

</body>
</html>

#macaco {
    background-color: green;
    height: 70px;
    width: 40px;
    transform: translateX(15vw);
    position: absolute;
    bottom: 22px; 
    position: absolute;
}

#obstaculo {
    background-color: red;
    height: 50px;
    width: 40px;
    transform: translateX(50vw);
    position: absolute;
    bottom: 22px; 
    position: absolute;
    animation: linear obstaculo 2s;
}

.play {
    animation: linear saltar 1s;
}


@keyframes saltar {
    0% {transform: translatey(0px) translateX(15vw)}
    50% {transform: translatey(-120px) translateX(15vw)}
    100% {transform: translatey(0px) translateX(15vw)}
}

@keyframes obstaculo {
    0% {transform: translatey(0) translateX(50vw)}
    100% {transform: translatey(0) translateX(0vw)}
}

You might be interested in the [Phaser](https://phaser.io/) game framework. See the MDN tutorial section on [Collision detection](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) — Yogi, Nov 13 '22 at 20:51
How is `collision` called? `macaco` and `obstaculo` are [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) object which don't have a `width` and `height` property. However, you can get the dimensions of the elements with the [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method. — Emiel Zuurbier, Nov 13 '22 at 20:54
[MDN article for the math behind](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) — vsync, Nov 14 '22 at 13:11
Related - https://stackoverflow.com/questions/2440377/javascript-collision-detection — vsync, Nov 14 '22 at 13:12

score 0 · Answer 1 · answered Nov 13 '22 at 21:58

For a collision between 2 rectangles you can observe only the x (width) part. So it's down to 2 ranges colliding.

[x1, x1 + w1] and [x2, x2 + w2].

This will not happen when x1 + w1 < x2 or x2 + w2 < x1.

So it will happen when the opposite of above happens. Using some Boolean arithmetic (de morgen law) it comes down to:

x1 + w1 >= x2 and x2 + w2 >= x1 (1D collision between 2 ranges)

Back to the 2 rectangles, this needs to happen also for the y side, so we can combine them all to:

function isRectColliding(rect1, rect2) {
  return (rect1.x + rect1.width) >= rect2.x &&
    (rect2.x + rect2.width) >= rect1.x &&
    (rect1.y + rect1.height) >= rect2.y &&
    (rect2.y + rect2.height) >= rect1.y
}

var rect1 = macaco.getBoundingClientRect()
var rect2 = macaco2.getBoundingClientRect()
var rect3 = obstaculo.getBoundingClientRect()


console.log('isRectColliding(rect1, rect3)', isRectColliding(rect1, rect3))
console.log('isRectColliding(rect2, rect3)', isRectColliding(rect2, rect3))

#macaco {
  background-color: green;
  height: 70px;
  width: 40px;
  transform: translateX(15vw);
  position: absolute;
  bottom: 22px;
}

#macaco2 {
  background-color: yellow;
  height: 70px;
  width: 40px;
  transform: translateX(45vw);
  position: absolute;
  bottom: 22px;
}

#obstaculo {
  background-color: red;
  height: 50px;
  width: 40px;
  transform: translateX(50vw);
  position: absolute;
  bottom: 22px;
  position: absolute;
  animation: linear obstaculo 2s;
}

<div id="macaco"></div>
<div id="macaco2"></div>
<div id="obstaculo"></div>

Tryed it and it still dont works. i tryed to make an alert when the divs collides and couldn't — Janner, Nov 13 '22 at 23:48

How to make a collision detection between this 2 divs?

1 Answers1