Javascript 到达容器边界时停止图像移动

我有把小提琴：

如何防止玩家移动到容器边界之外？

试试以下方法：

$（文档）.ready（函数（）{
var player=$（“#player”），
shuriken=$（“shuriken”），
容器=$（“#容器”），
w=container.width（）-shuriken.width（）；
$（窗口）.keydown（函数（e）{
如果（e.which==38）{
if（parseInt（player.css（'top'））>10）{
动画（{top:'-=20px'}）；
动画（{top:'-=20px'}）；
}
}//向上
如果（e.which==40）{
if（parseInt（player.css（'top'））<270）{
动画（{top:'+=20px'}）；
动画（{top:'+=20px'}）；
}
}//向下
如果（e.which==32）{
if（shuriken.css（'left'）！=“249px”）{
动画（{'left'：'+=280px'}）；
}
}
});
});

---

但当按住键并移动过快时，它会崩溃。您可能还需要稍微调整这些值。

您可以使用if语句

if (e.which == 32){ 
if(shuriken.css('left') != '249px'){
shuriken.animate({ 'left' : '+=280px' });
}
}

---

小提琴：这里是你答案的链接

var pane=$（“#pane”），
方框=$（“#方框”），
w=窗格.width（）-box.width（），
d={}，
x=3；
函数newv（v，a，b）{
var n=parseInt（v，10）-（d[a]？x:0）+（d[b]？x:0）；
返回n<0？0:n>w？w:n；
}
$（窗口）.keydown（函数（e）{d[e.which]=true；}）；
$（window.keyup）（函数（e）{d[e.which]=false；}）；
setInterval（函数（）{
box.css({
左：函数（i，v）{返回newv（v，37，39）；}，
顶部：函数（i，v）{returnnewv（v，38，40）；}
});
}, 20);

我已经编辑了您的 经过必要的修改。这对你有帮助吗？问我你是否需要更多的解释

我已经添加了这些来帮助您计算最佳边界

posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);

演示

你想要的条件是

   var wallT = 0,//top
       wallB =269,//bottpm
       wallL = 0,//left
       wallR =269;//right
  function checkBoundUpDw(pos) {                
              if(pos > wallT && pos < wallB){
               return true;
              }
              return false;
   }
 function checkBoundleftRight(pos) {
              if(pos > wallL && pos <wallR){
               return true;
              }
              return false;
   }

var wallT=0，//顶部
wallB=269，//bottpm
wallL=0，//左
wallR=269//正确的
函数checkBoundUpDw（pos）{
如果（位置>墙和位置<墙）{
返回true；
}
返回false；
}
功能检查边界LeftRight（pos）{
如果（pos>wallL&&pos谢谢大家的帮助，但是经过深思熟虑和寻找，我终于成功了，这里是最后一句话：谢谢

 function newv(v, a, b) {
            var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);

            return n < 0 ? 0 : n > w ? w : n;
        }



        $(window).keydown(function (e) {
            d[e.which] = true;
            if (e.which == 32) {

                if (!shurikenHitBorder) {
                    shuriken.animate({ left: '+=280px' }, 'fast');

                    shuriken.fadeIn(100);
                }
                shurikenHitBorder = true;
            }


          });
        $(window).keyup(function (e) { d[e.which] = false; });

        setInterval(function () {
            box.css({top: function (i, v) { return newv(v, 38, 40); }});
        }, 20);

函数newv（v，a，b）{
var n=parseInt（v，10）-（d[a]？x:0）+（d[b]？x:0）；
返回n<0？0:n>w？w:n；
}
$（窗口）.keydown（函数（e）{
d[e.which]=真；
如果（e.which==32）{
如果（！shurikenHitBorder）{
动画（{left:'+=280px'}，'fast'）；
shuriken.fadeIn（100）；
}
shurikenHitBorder=true；
}
});
$（window.keyup）（函数（e）{d[e.which]=false；}）；
setInterval（函数（）{
css（{top:function（i，v）{returnnewv（v，38，40）；}}）；
}, 20);
在每次移动前添加一个边界条件，即..检查新位置是否在左墙和右墙之间或上墙和下墙之间，否则保持相同的位置能否请你给我举个例子@SarathSaleem试试这给了我一个奇怪的行为：@Sora添加了我的答案，但现在我想要的正是我移动游戏时的问题呃上下如果他到达边界，我想阻止他。你可以看到玩家仍然在越过容器的边界。onkeydown:/这在我的屏幕上肯定有效。你在控制台中看到任何错误吗？用相同的代码创建了一个单独的JSFiddle…@Sora你能检查一下上面的小提琴是否解决了你的边界问题吗？嗯，没有w您必须实施节流。如果您无法……，我将进一步帮助您：）
posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);

   var wallT = 0,//top
       wallB =269,//bottpm
       wallL = 0,//left
       wallR =269;//right
  function checkBoundUpDw(pos) {                
              if(pos > wallT && pos < wallB){
               return true;
              }
              return false;
   }
 function checkBoundleftRight(pos) {
              if(pos > wallL && pos <wallR){
               return true;
              }
              return false;
   }

 function newv(v, a, b) {
            var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);

            return n < 0 ? 0 : n > w ? w : n;
        }



        $(window).keydown(function (e) {
            d[e.which] = true;
            if (e.which == 32) {

                if (!shurikenHitBorder) {
                    shuriken.animate({ left: '+=280px' }, 'fast');

                    shuriken.fadeIn(100);
                }
                shurikenHitBorder = true;
            }


          });
        $(window).keyup(function (e) { d[e.which] = false; });

        setInterval(function () {
            box.css({top: function (i, v) { return newv(v, 38, 40); }});
        }, 20);