使用键盘控制在画布游戏中平滑角色移动答案

【问题标题】：Smooth character movement in canvas game using keyboard controls使用键盘控制在画布游戏中平滑角色移动
【发布时间】：2013-03-11 16:51:59
【问题描述】：

我正在使用画布和 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;
        }
    }
}

【问题讨论】：

查看力、动量和摩擦的基本物理模拟。使您的钥匙为船添加一种武力，具有群众，并在适用摩擦力的情况下...使用适当的选择参数（质量，摩擦，力），您可以创建各种行为.虽然很棘手！但你可以在以后使用它：获得使船行动更快的奖励，或使船行动重的负奖励。
几乎只是用 JavaScript O.O 重新创建物理定律

标签： javascript canvas game-physics easing

【解决方案1】：

你只是想施加一些摩擦。它很容易。您可以执行以下操作。

this.speed*=0.98;

值越低（0.8、0.5 等），您减速的速度就越快。

我提供了一个演示，您可以在其中移动并逐渐放慢速度。继续玩这个值，看看它是如何影响它的。

Live Demo

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;
});

【讨论】：

太棒了！正是我需要的。极大地简化了我的代码。
喜欢你的回答。将 requestAnimationFrame(update) 调用放在更新函数的末尾而不是顶部有什么区别？
@macalaca no

【解决方案2】：

我想我会做的是在 keyup 上不要停止船，只是有一个函数可以让它减慢一点，然后在 setInterval 中调用这个函数，在任何时间间隔给你想要的效果，然后一旦速度船是零呼叫 clearInterval

所以在 keyup 上你基本上设置了 setInterval(slowShip, 500)

【讨论】：

【解决方案3】：

您可以尝试在每一帧上不断降低速度

if(!playerUp && !playerDown && moveSpeed > 0){
    moveSpeed--;
}

【讨论】：