javascript 使用键盘控制在画布游戏中平滑角色移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15344104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth character movement in canvas game using keyboard controls
提问by Joe Taylor
I'm creating a side-scrolling endless space themed game using canvas and JavaScript. I'm controlling a spaceship just by using the up and down arrows and I want to implement some kind of movement easing so that the ship doesn't just stop dead when I let go of the keys. I've looked around and haven't found anything plus my own attempts just aren't working. This is what I've tried.
我正在使用画布和 JavaScript 创建一个横向卷轴无尽空间主题游戏。我只是通过使用向上和向下箭头来控制宇宙飞船，我想实现某种运动缓和，这样当我松开按键时，飞船不会停止死亡。我环顾四周，没有发现任何东西，加上我自己的尝试没有奏效。这是我试过的。
Jet.prototype.checkDirection = function () {
if (this.isUpKey) {
this.drawY -= this.speed;
if (this.speed < 5) {
this.speed += 0.1;
}
}
if (this.isDownKey) {
this.drawY += this.speed;
if (this.speed < 5) {
this.speed += 0.1;
}
}
if (!this.isUpKey) {
if (!this.isDownKey) {
if (this.speed >= 0) {
this.drawY -= this.speed;
this.speed -= 1;
}
}
}
if (!this.isDownKey) {
if (!this.isUpKey) {
if (this.speed >= 0) {
this.drawY += this.speed;
this.speed -= 1;
}
}
}
回答by Loktar
You just want to apply some friction. Its pretty easy. You can do something like the following.
你只是想施加一些摩擦。它很容易。您可以执行以下操作。
this.speed*=0.98;
The lower the value (0.8, 0.5, etc) the faster you will slow down.
值越低（0.8、0.5 等），您减速的速度就越快。
I provided a demo where you can move around and will gradually slow down. Go ahead and play with the value and see how it affects it.
我提供了一个演示，您可以在其中移动并逐渐放慢速度。继续玩这个值，看看它如何影响它。
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 300;
var x = 150, //initial x
y = 150, // initial y
velY = 0,
velX = 0,
speed = 2, // max speed
friction = 0.98, // friction
keys = [];
function update() {
requestAnimationFrame(update);
// check the keys and do the movement.
if (keys[38]) {
if (velY > -speed) {
velY--;
}
}
if (keys[40]) {
if (velY < speed) {
velY++;
}
}
if (keys[39]) {
if (velX < speed) {
velX++;
}
}
if (keys[37]) {
if (velX > -speed) {
velX--;
}
}
// apply some friction to y velocity.
velY *= friction;
y += velY;
// apply some friction to x velocity.
velX *= friction;
x += velX;
// bounds checking
if (x >= 295) {
x = 295;
} else if (x <= 5) {
x = 5;
}
if (y > 295) {
y = 295;
} else if (y <= 5) {
y = 5;
}
// do the drawing
ctx.clearRect(0, 0, 300, 300);
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fill();
}
update();
// key events
document.body.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
});
回答by Tutan Ramen
I think what I would do is on keyup don't stop the ship, just have a function that slows it down a little then call this function in setInterval at whatever interval gives you the desired effect and then once the speed of the ship is zero call clearInterval
我想我会做的是在键盘上不要停止船，只是有一个函数可以让它慢一点，然后在 setInterval 中以任何间隔调用这个函数给你想要的效果，然后一旦船的速度为零调用 clearInterval
So on keyup u basically setup setInterval(slowShip, 500)
所以在 keyup 上你基本上设置了 setInterval(slowShip, 500)
回答by john guthrie
You could try reducing the speed continuously on every frame
您可以尝试在每一帧上不断降低速度
if(!playerUp && !playerDown && moveSpeed > 0){
moveSpeed--;
}
