javascript - 在HTML中为元素设置边框

这是我的使用箭头键使飞船移动的代码，并且我需要阻止将此元素（飞船）从页面范围之外移动？

我的意思是当按下键时，使元素下降，我不需要这是我的代码：

$(document).keydown(function(e){
    $("body").innerWidth()
    switch (e.which){
    case 37:    //left arrow key
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:    //up arrow key
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:    //right arrow key
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:    //bottom arrow key
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }

css：

.box{
    position: relative;
    top: 10px;
    width: 130px;
    height: 130px;
    position: relative;
    margin: 200px auto 0;
    background: url("http://davidpapp.com/wp-content/uploads/2015/05/rocket.png") ;
}

最佳答案

花一点时间回顾一下脚本的逻辑。当按下按钮时，无论对象在页面上的位置如何，它都只会移动对象。相反，您应该包括一个条件，以在执行实际移动之前检查它是否可以/应该移动。

$(document).keydown(function(e){
    var width = $("body").innerWidth();//Assigned this value to a variable
    var height = $('body').height();//Created a variable for the height
    var $box = $('.box');//Because I hate typing this so many times
    var posX = parseFloat($box.css('left'));
    var posY = parseFloat($box.css('top'));
    switch (e.which) {
        case 37:    //left arrow key
            //Don't allow if moving to the left would cause it to go less than 0
            if(posX - 50 >= 0) {
                $box.finish().animate({
                    left: "-=50"
                });
            }
            break;
        case 38:    //up arrow key
            //Don't allow if moving up would cause it to go less than 0
            if(posY - 50 >= 0) {
                $box.finish().animate({
                    top: "-=50"
                });
            }
            break;
        case 39:    //right arrow key
            //Not only checking to make sure the origin doesn't go over the width
            //but also keep the width of the box in mind so it appears to stay within bounds
            if(posX + 50 + $box.width() <= width) {
                $box.finish().animate({
                    left: "+=50"
                });
            }
            break;
        case 40:    //bottom arrow key
            //Not only checking to make sure the origin doesn't go past the bottom line
            //but also keep the height of the box in mind so it appears to stay within bounds
            if(posY + 50 + $box.height() <= height) {
                $box.finish().animate({
                    top: "+=50"
                });
            }
            break;
    }
}

附言我写得很快，没有经过测试，所以如果我犯了拼写错误或者混淆了小于号和大于号，哈哈，不要感到惊讶。无论如何，我希望您能理解我要传达的逻辑。