2

我有这个小提琴：http: //jsfiddle.net/ps4t9/4/

$(window).keydown(function (e) {
        if (e.which == 38) { player.animate({ top: '-=20px' }); shuriken.animate({ top: '-=20px' }); } // up
        if (e.which == 40) { player.animate({ top: '+=20px' }); shuriken.animate({ top: '+=20px' }); } // down
        if (e.which == 32) { shuriken.animate({ left: '+=280px' });} // space bar hit

    });

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

4

6 回答 6

1

试试这个：http: //jsfiddle.net/ps4t9/11/

$(document).ready(function () {
  var player = $("#Player"),
      shuriken = $("#Shuriken"),
      container = $("#Container"),
      w = container.width() - shuriken.width();

  $(window).keydown(function (e) {
    if (e.which == 38) {
      if (parseInt(player.css('top')) > 10) {
        player.animate({ top: '-=20px' });
        shuriken.animate({ top: '-=20px' });
      }
    } // up
    if (e.which == 40) {
      if (parseInt(player.css('top')) < 270) {
        player.animate({ top: '+=20px' });
        shuriken.animate({ top: '+=20px' });
      }
    } // down
    if (e.which == 32) { 
      if (shuriken.css('left') != '249px') {
        shuriken.animate({ 'left' : '+=280px' });
      }
    }
  });
});

当按住键并且移动太快时它会中断。您可能还需要稍微调整这些值。

于 2013-07-20T07:27:11.510 回答
1

您可以使用 if 语句

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

小提琴：http: //jsfiddle.net/Hive7/ps4t9/5/

于 2013-07-20T07:27:16.223 回答
1

演示http://jsfiddle.net/u6vXK/1/

你想要的条件是

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

长按不行，一个一个按，表示按住等待动画结束再按，要加上动画条件等优势提示。

于 2013-07-20T08:18:46.757 回答
0

这是您答案的链接

http://jsfiddle.net/bDMnX/7/

    var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

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; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);
于 2013-07-20T07:43:11.377 回答
0

谢谢大家的帮助，但经过深入的冥想和搜索，呵呵，我设法使它工作，这是最后的 jsfiddle：http: //jsfiddle.net/ps4t9/15/谢谢

 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);
于 2013-07-20T09:52:22.293 回答
-1

我已经对您的JSFiddle 进行了必要的修改。这对你有帮助吗？问我是否需要更多解释...

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

posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);
于 2013-07-20T08:04:00.913 回答