Как сделать границу?

Question

У меня есть элемент

<div id="square"></div> 

Он имеет свойство перемещаться по документу

var square = document.getElementById("square"); 
    document.body.onkeydown = function(e) { 
    if (e.keyCode == 37) {left()} 
    if (e.keyCode == 38) {up()} 
    if (e.keyCode == 39) {right()} 
    if (e.keyCode == 40) {down()} 
} 

Как сделать функцию, которая не позволила движения, если square элемента находится ближе всего к документу границы? JSFiddle: https://jsfiddle.net/zutxyLsq/

Answer 1

Вы должны проверить, если оставить вне границ, как это:

function left() { 
    console.log('Left'); 
    var left = parseInt(square.style.left || getComputedStyle(square)['left'], 10); 
    if (left >= 50) { 
     square.style.left = (left - 50) + 'px'; 
    } 
} 
function right() { 
    console.log('Right'); 
    var left = parseInt(square.style.left || getComputedStyle(square)['left'], 10); 
    if (left+50+square.offsetWidth < window.innerWidth) { 
     square.style.left = (left + 50) + 'px'; 
    } 
} 

https://jsfiddle.net/zutxyLsq/3/

и то же вверх и вниз.