防止块接触容器边界

Question

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.

Answer 1

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