I have this little block that I move around using javascript code. It works all good except if I keep moving it, it can easily get out of the box where it is supposed to be. Can I prevent this somehow? So no matter how far I want to move it, it will stay stuck inside of the container/box ?

Here's my snippet code:

            /// store key codes and currently pressed ones
    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';


    };

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

        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #character {
    position: absolute;
    width: 42px;
    height: 42px;
    background: red;
    z-index:99;
}
#container{
  width: 400px;
  height: 400px;
  background: transparent;
  border:5px solid rgb(0, 0, 0);
  position: relative;
  overflow: hidden;
}

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

PS: You can move the box using keyboard arrows.

CodePudding user response：

Get the container width and height into variable and set a condition on your move

var moveCharacter = function(dx, dy){
    let div_width = document.getElementById('container').clientWidth;
    let div_height = document.getElementById('container').clientHeight;

    if((div_width - character.x)  < 50 ){ // 50 = width of character and padding
       character.x = div_width - 50;
    }

    if(character.x < 10){ // Padding
        character.x = 11;
    }
    if((div_height - character.y)  < 50 ){
       character.y = div_height - 50;
    }
    if(character.y < 10){
        character.y = 11;
    }