javascript - 为html中的元素制作边框 block

Question

这是我使用箭头键使宇宙飞船移动的代码，我需要阻止将此元素(宇宙飞船)移出页面范围吗？

我的意思是当按下键时，元素会向下移动我不需要，请这是我的代码:

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

样式:

.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") ;
}

Answer 1

花点时间检查脚本的逻辑。按下按钮时，它只会移动对象，而不管它在页面上的位置。相反，您应该在执行实际移动之前包含一个条件来检查它是否可以/应该移动。

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

附言我很快就写了这篇文章并且没有测试，所以如果我犯了拼写错误或者混淆了小于号和大于号，请不要感到惊讶，哈哈。无论如何，我希望您理解我试图传达的逻辑。