我有一个 JQuery 游戏,但我无法让角色div
在到达游戏所在的边缘时停止。
有没有一种方法,一旦.animate()
开始,它就会在剩余边距达到一定数量时停止?
这是一个小提琴:
我有一个 JQuery 游戏,但我无法让角色div
在到达游戏所在的边缘时停止。
有没有一种方法,一旦.animate()
开始,它就会在剩余边距达到一定数量时停止?
这是一个小提琴:
而不是动画,运行一个间隔,检查碰撞并做你的动作。
将所有键存储到一个对象中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);
This is sample workout.
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'
});
}
}
按照建议,使用 step 回调函数,看看它是否可以帮助你。 step回调函数有两个参数,now和fx。 fx对象具有元素的所有属性,您可以在游戏应用程序中使用它。
出于您的目的,您可以使用fx.elem.offsetLeft属性。
例如
$('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/