我正在制作这种游戏。这只是一个在屏幕上"行走"的粘人。如果你按"向上"键,我想加上跳跃。
这是我的代码(没有跳转):
$(document).ready(function () {
var sitting = $('#sitting'),
image = $('#img');
sitting.hide();
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {
left: 37,
up: 38,
right: 39,
down: 40,
space: 32
};
switch (keyCode) {
case arrow.left:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '-=60px'
}, 300, "linear");
}
break;
case arrow.up:
break;
case arrow.right:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '+=60px'
}, 300, "linear");
}
break;
case arrow.down:
break;
case arrow.space:
image.fadeToggle(-100, function () {
sitting.fadeToggle(-100);
});
break;
}
});
$('#sit').click(function () {});
});
出于常识,我使用了排队的动画并这样做了(我只减少到大小写箭头.up,因为这是唯一相关的部分):
case arrow.up:
if (!sitting.is(':visible')) {
image.animate({
top: '+=10px'
}, 200, "linear");
image.animate({
bottom: '+=10px'
}, 200, "linear");
}
break;
出于某种原因,它不起作用。不管怎样。这是jsBin
现场演示
var sitting = $('#sitting'),
image = $('#img'), // COMMA HERE
jumping = false ; // ADD THIS
和修改:
case arrow.up:
if (!sitting.is(':visible') && jumping===false) {
jumping = true;
image.stop().animate({
top: '-=150px'
}, 200, "linear", function(){
$(this).animate({top: '+=150'}, 300,'linear', function(){
jumping = false;
});
});
}
break;