如何制作边框？

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/

和上下相同。