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.