我正在尝试做两件事，但找不到方法:
- 更重要的是，当按键向上时，在完全停止之前，使船舶在
keydown的方向上有更多的动画，并且如果我按另一个方向，船舶将等待动画在改变方向之前完成。
2.使船舶运动更加真实，不像文本编辑器。
$(document).ready(function() {
//Variables
var screenWidth = $(window).width(); //Screen width
var screenHeight = $(window).height(); //Screen height
var shipWidth = $("#ship").width(); //Ship width
var y = 0; //Background y position
var currentShipPos; //ship current position
setShipPosition(screenWidth / 2 - shipWidth / 2, screenHeight / 1.5 - shipWidth / 2);
startBackgroundMovement();
//Start move the screen
function startBackgroundMovement() {
setInterval(function() {
y += 1;
$('body').css('background-position-y', y + 'px');
}, 10);
}
//Spaceship starting position
function setShipPosition(posX, posY) {
$("#ship").css("left", posX);
$("#ship").css("top", posY);
currentShipPos = posX;
//alert(currentShipPos);
}
//Move spaceship
$(document).keydown(function(e) {
if (!$('#ship').is(':animated')) {
switch (e.which) {
case 37: //left
currentShipPos -= 10;
$('#ship').animate({
left: currentShipPos + "px"
}, 0, 'swing');
//left edge of screen
if (currentShipPos < 0) {
currentShipPos = 0;
}
break;
case 39: //right
currentShipPos += 10;
$('#ship').animate({
left: currentShipPos + "px"
}, 0, 'swing');
//right edge of screen
if (currentShipPos > screenWidth - shipWidth) {
currentShipPos = screenWidth - shipWidth;
}
break;
default:
return;
}
e.preventDefault(); //not sure if needed
}
});
});html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url('http://www.playmycode.com/dynamic/project_images/495/3495/20888.1363023335.png');
background-repeat: repeat;
overflow: hidden;
background-position: 0 0;
}
#ship {
position: absolute;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="ship" src="http://www.clipartbest.com/cliparts/dTr/M8g/dTrM8gnT9.png" width="40px" />
</body>最佳答案
我重构了一点，去掉了$.animate()，使用这个循环来制作船舶动画:
(function shipLoop() {
if (ship.goingLeft) {
ship.lspeed = Math.min(ship.lspeed *1.1 || 1, ship.maxSpeed);
} else {
ship.lspeed = Math.max(ship.lspeed - 0.5, 0);
}
if (ship.goingRight) {
ship.rspeed = Math.min(ship.rspeed *1.1 || 1, ship.maxSpeed);
} else {
ship.rspeed = Math.max(ship.rspeed - 0.5, 0);
}
ship.position = ship.position + (ship.rspeed - ship.lspeed);
$ship.css('left', ship.position);
requestAnimationFrame(shipLoop);
}());
按键处理程序设置这些属性，但实际上从未立即更改绘制位置，现在您还需要按键事件:
$(document).keydown(function(e){
switch(e.which){
case 37://left
ship.goingLeft= true;
break;
case 39://right
ship.goingRight= true;
default: return;
e.preventDefault();//not sure if needed
}
}).keyup(function(e){
switch(e.which){
case 37://left
ship.goingLeft= false;
break;
case 39://right
ship.goingRight= false;
default: return;
e.preventDefault();//not sure if needed
}
});
关于jQuery animate() 使用 keydown 进行平滑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27545369/