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函数{ $body.innerWidth 变量宽度=window.innerWidth； var height=window.innerHeight； 变量偏移量=$.box.offset； 开关e，哪个{ 案例37： ifoffset.left>=50 $.box.finish.animate{ 左：-=50 }; 打破 案例38： ifoffset.top>=100 $.box.finish.animate{ 顶部：-=50 }; 打破 案例39://右箭头键 ifoffset.左+130+50<宽度 $.box.finish.animate{ 左：+=50 }; 打破 案例40://底部箭头键 ifoffset.top+50<高度 $.box.finish.animate{ 顶部：+=50 }; 打破 } } 身体{ } .盒子{ 位置：相对位置； 顶部：10px； 宽度：130px； 高度：130像素； 位置：相对位置； 利润率：200px自动0； 背景：urlhttp://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;
    }
}

---

顺便说一句，我写这篇文章很快，而且没有经过测试，所以如果我犯了拼写错误或者把小于号和大于号混淆了，请不要感到惊讶，哈哈。无论如何，我希望你能理解我试图表达的逻辑。

你试过什么？在你的代码示例中，我看不到有人试图解决你的问题。我现在不知道如何使我的页面灵活-如果你尝试我的代码，你现在应该知道我的意思页面扩展了Hi@HeroGuevara，你希望太空船不要超出页面宽度，对吗？是的，这就是我想要的，请帮助我，拯救我的一天