Appear text when one div is on top of the other

Question

I am trying to make some kind of "game" and what I want to do is to when I move around a div, to get notified when the moving red div is on top of the static green div.

By "notified" I mean setting the paragraphs display property to "block" or even my a console.log() , it's not that important how I get the message.

PS: You can move around the red block with your up,left,right,down arrows.

Here's my code:

var keys = {};
        keys.UP = 38;
        keys.LEFT = 37;
        keys.RIGHT = 39;
        keys.DOWN = 40;

    /// store reference to character's position and element
    var character = {
      x: 100,
      y: 100,
      speedMultiplier: 2,
      element: document.getElementById("character")
    };

    /// key detection (better to use addEventListener, but this will do)
    document.body.onkeyup = 
    document.body.onkeydown = function(e){
      if (e.preventDefault) { 
        e.preventDefault();
      }
      else {
        e.returnValue = false; 
      }
      var kc = e.keyCode || e.which;
      keys[kc] = e.type == 'keydown';
    };

    /// character movement update
    var moveCharacter = function(dx, dy){
      character.x += (dx||0) * character.speedMultiplier;
      character.y += (dy||0) * character.speedMultiplier;
      character.element.style.left = character.x + 'px';
      character.element.style.top = character.y + 'px';
    };

    /// character control
    var detectCharacterMovement = function(){
      if ( keys[keys.LEFT] ) {
        moveCharacter(-5, 0);
      }
      if ( keys[keys.RIGHT] ) {
        moveCharacter(5, 0);
      }
      if ( keys[keys.UP] ) {
        moveCharacter(0, -5);
      }
      if ( keys[keys.DOWN] ) {
        moveCharacter(0, 5);
      }
    };

    /// update current position on screen
    moveCharacter();

    /// game loop
    setInterval(function(){
      detectCharacterMovement();
    }, 1000/24);
    

        #character {
    position: absolute;
    width: 42px;
    height: 42px;
    background: red;
    z-index:99;
}
#container{
  width: 250px;
  height: 250px;
  background: black;
  position: relative;
  overflow: hidden;
}
#character2{
    position:absolute;
    width:50px;
    height:50px;
    background-color: yellowgreen;
    top:50px;
    left:50px;
}
#notifier{
    display:none;
}

<div id="container">
        <div id="character"></div>

        <div id="character2"></div>
    </div>
    <p id="notifier"> Red div is on top of the yellow div</p>

Answer 1

function checkCollision(rect, character) {
    if (rect.x < character.x + character.width &&
        rect.x + rect.width > character.x &&
        rect.y < character.y + character.height &&
        rect.height + rect.y > character.y) {
        //do something
    }
}

This function evaluates if two rectangles are colliding, but you need to provide the width and height for each game entity.

You can also use getComputedStyle() to get the css values.

But if you really want to do a game, you probably should restart using a game engine like Phaser for example.

Answer 2

I have adapted this answer so that the message is displayed when the red div is on top of the other :

var keys = {};
keys.UP = 38;
keys.LEFT = 37;
keys.RIGHT = 39;
keys.DOWN = 40;

/// store reference to character's position and element
var character = {
  x: 100,
  y: 100,
  speedMultiplier: 2,
  element: document.getElementById("character")
};

var is_colliding = function(div1, div2) {
  var d1_height = div1.offsetHeight;
  var d1_width = div1.offsetWidth;
  var d1_distance_from_top = div1.offsetTop + d1_height;
  var d1_distance_from_left = div1.offsetLeft + d1_width;

  var d2_height = div2.offsetHeight;
  var d2_width = div2.offsetWidth;
  var d2_distance_from_top = div2.offsetTop + d2_height;
  var d2_distance_from_left = div2.offsetLeft + d2_width;

  var not_colliding =
    d1_distance_from_top <= div2.offsetTop ||
    div1.offsetTop >= d2_distance_from_top ||
    d1_distance_from_left <= div2.offsetTop ||
    div1.offsetLeft >= d2_distance_from_left;

  return !not_colliding;
};

/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup = 
document.body.onkeydown = function(e){
  if (e.preventDefault) { 
    e.preventDefault();
  }
  else {
    e.returnValue = false; 
  }
  var kc = e.keyCode || e.which;
  keys[kc] = e.type == 'keydown';
};

/// character movement update
var moveCharacter = function(dx, dy){
  character.x += (dx||0) * character.speedMultiplier;
  character.y += (dy||0) * character.speedMultiplier;
  character.element.style.left = character.x + 'px';
  character.element.style.top = character.y + 'px';
  
  if(is_colliding(character.element, document.getElementById("character2"))) {
    document.getElementById("notifier").style.display = "block";
  } else {
    document.getElementById("notifier").style.display = "none";
  }
};

/// character control
var detectCharacterMovement = function(){
  if ( keys[keys.LEFT] ) {
    moveCharacter(-5, 0);
  }
  if ( keys[keys.RIGHT] ) {
    moveCharacter(5, 0);
  }
  if ( keys[keys.UP] ) {
    moveCharacter(0, -5);
  }
  if ( keys[keys.DOWN] ) {
    moveCharacter(0, 5);
  }
};

/// update current position on screen
moveCharacter();

/// game loop
setInterval(function(){
  detectCharacterMovement();
}, 1000/24);

#character {
    position: absolute;
    width: 42px;
    height: 42px;
    background: red;
    z-index:99;
}
#container{
  width: 250px;
  height: 250px;
  background: black;
  position: relative;
  overflow: hidden;
}
#character2{
    position:absolute;
    width:50px;
    height:50px;
    background-color: yellowgreen;
    top:50px;
    left:50px;
}
#notifier{
    display:none;
}

<div id="container">
    <div id="character"></div>

    <div id="character2"></div>
</div>
<p id="notifier"> Red div is on top of the yellow div</p>