如果if语句为true，则停止.animate（）

Question

我有一个JQuery游戏，虽然当它碰到游戏所在的div的边缘时我不能让角色停止。

有没有一种方法，一旦.animate()启动它就会在剩余边距为一定数量时停止？

这是一个小提琴：

http://jsfiddle.net/qUufA/5/

Answer 1

的 LIVE DEMO

取代动画，运行间隔，检查碰撞并执行移动。
将所有键存储到对象m中（移动）：

var c = $(".character");
var g = $(".game");
var m = {}; // moves
var intv;
var coll = {}; // collisions
var e1, e2;

$(document).on('keydown keyup',function ( e ) {
  var keyDown = e.type == "keydown"; 
  switch (e.which) {
    case 37:
      m.left = keyDown;
      break;
    case 38:
      m.up = keyDown;
      break;
    case 39:
      m.right = keyDown;
      break;
    case 40:
      m.down = keyDown;
      break;
  } 
});

function collisions( el1, el2 ){
  e1 = {
    W : el1.width(),
    H : el1.height()
  };
  e2 = {
    X : el2.position().left,
    Y : el2.position().top,
    W : el2.width(),
    H : el2.height()
  };  
  coll.left   = e2.X <= 0 ;
  coll.up    = e2.Y <= 0 ;  
  coll.right  = e2.X+e2.W >= e1.W ; 
  coll.down = e2.Y+e2.H >= e1.H ;
}

function movePX(){
    collisions( g, c );
    if (m.left ) {
      c.css({left: coll.left ? 0 : "-=2"});
    }
    if (m.up) {
      c.css({top: coll.up ? 0 : "-=2"});
    }
    if (m.right) {
      c.css({ left: coll.right ? e1.W-e2.W : "+=2" });
    }
    if (m.down) {
      c.css({top: coll.down ? e1.H-e2.H : "+=2"});
    }
}

// Engine
intv = setInterval(function() {
   movePX();
   // put other functions here
}, 10);

Answer 2

根据建议，使用步骤回调功能，看看它是否可以帮到你。 步骤回调函数有两个参数，现在和 fx 。 fx 对象具有元素的所有属性，您可以在游戏应用中使用它。

出于您的目的，您可以使用 fx.elem.offsetLeft 属性。

e.g。

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    console.log(fx.elem.offsetLeft); //gives you the margin left of current element
  }
});

要了解更多信息，请参阅：http://api.jquery.com/animate/

Answer 3

这是样本锻炼。

var c = $(".character");
var g = $(".game");
var _anim = false; // global variable 

function get_margin(sel, pos) {
     return parseInt(sel.css('margin-' + pos).replace('px'), 10);
}

// only for left arrow
// I hope u can do the rest

    if (event.keyCode == 37) {
         if ( get_margin(c, 'left') ===  50) {
                _anim.stop();
         } else {
                _anim = $('.character').animate({
                         'margin-left': '-=20px'
                       });
         }
    }

<强> Partially done JSFIDDLE