キーボードコントロールを使用したキャンバスゲームでのスムーズなキャラクタ移動

Question

右、私はキャンバスとJavaScriptを使用してsidescrollingエンドレススペーステーマのゲームを作成しています。私は上下の矢印を使って宇宙船をコントロールしています。私は、船を止めて船が死んでしまうのを防ぐために、何らかの動きを緩めたいと思っています。私は、keyUpイベントに私がどうなるのかと思う...

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

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

Answer 2

をしていないされて周りを見回してきたと発見していない私自身の試みを加えたものだけで動作していない、これは私が試したものです船を止めて少し遅くする機能を持っていれば、どんな間隔でもこの関数をsetIntervalで呼び出して、船の速度が0になったらclearInterval

setInterval（slowShip、500）

Answer 3

は、あなただけの

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

を行うことができませんでしか、そのための特別な式をしたいのですか？