矢印キーで滑らかに動くボールjavascript

Question

矢印キーをクリックするたびにボールを滑らかに動かす方法を教えてください。私が矢印キーをクリックするたびに、それはちっちゃくして、私はそれを保持する場合は1秒ごとに移動します。私は長い間それを押すと、それはかなり速く滑らかに動くので、それが欲しいです。

\t var canvas = document.getElementById('game'); 
 
\t var ctx = canvas.getContext('2d'); 
 
\t var ball = { 
 
\t \t pos: {x: 500,y: 300}, 
 
\t \t speed: 5, 
 
\t }; 
 
\t var FPS = 30; 
 
window.onload = function() { 
 
\t setInterval(function() { 
 
\t \t gameBack(); 
 
\t }, 1000/FPS); 
 
} 
 
// background code 
 
function gameBack() { 
 
\t drawRect(0,0,canvas.width,canvas.height, 'Black'); 
 
\t colorCircle(ball.pos.x,ball.pos.y,10, 'white'); 
 
} 
 
// Rectangle Code 
 
function drawRect(leftX,topY,width,height, drawColor) { 
 
\t ctx.fillStyle = drawColor; 
 
\t ctx.fillRect(leftX,topY,width,height); 
 
} 
 
//Circle Code 
 
function colorCircle(centerX,centerY,radius, drawColor) { 
 
\t ctx.fillStyle = drawColor; 
 
\t ctx.beginPath(); 
 
\t ctx.arc(centerX,centerY,radius,0,Math.PI*2,true); 
 
\t ctx.closePath(); 
 
\t ctx.fill(); 
 
} 
 
//Game Controls 
 
document.addEventListener('keydown', event => { 
 
    if (event.keyCode === 37) { //Left 
 
    \t xBall(-5); 
 
    } else if (event.keyCode === 39) { //Right 
 
    \t xBall(5); 
 
    } else if (event.keyCode === 38) { //Up 
 
    \t yBall(-5); 
 
    } else if (event.keyCode === 40) { //Down 
 
    \t yBall(5); 
 
    } 
 
}); 
 
function yBall(offset) { 
 
\t ball.pos.y += offset; 
 
} 
 
function xBall(offset) { 
 
\t ball.pos.x += offset; 
 
}

<canvas id="game" width=800 height=600></canvas>

Answer 1

方向ベクトルを追加します。キーで方向ベクトルを制御し、方向ベクトルを使用して各フレーム内の位置を更新します。方向ベクトルを更新する方法に応じて、ボールの速度を速くするか、ゆっくり停止させることができます。例えば

：[ボディアニメーションが滑らかではない]の

\t var canvas = document.getElementById('game'); 
 
\t var ctx = canvas.getContext('2d'); 
 
\t var ball = { 
 
\t \t pos: {x: 500,y: 300}, 
 
     direction: { x: 0, y: 0 }, 
 
\t \t speed: 5, 
 
     brake: 0.9, // smaller number stop faster, max 0.99999 
 
\t }; 
 
\t var FPS = 30; 
 
    window.onload = function() { 
 
    \t setInterval(function() { 
 
      animate(); 
 
    \t \t gameBack(); 
 
    \t }, 1000/FPS); 
 
    }; 
 
    function animate() { 
 
     ball.pos.x += ball.direction.x * ball.speed; 
 
     ball.pos.y += ball.direction.y * ball.speed; 
 
     ball.direction.x *= ball.brake; 
 
     ball.direction.y *= ball.brake; 
 
    } 
 
    // background code 
 
    function gameBack() { 
 
    \t drawRect(0,0,canvas.width,canvas.height, 'Black'); 
 
    \t colorCircle(ball.pos.x,ball.pos.y,10, 'white'); 
 
    } 
 
    // Rectangle Code 
 
    function drawRect(leftX,topY,width,height, drawColor) { 
 
    \t ctx.fillStyle = drawColor; 
 
    \t ctx.fillRect(leftX,topY,width,height); 
 
    } 
 
    //Circle Code 
 
    function colorCircle(centerX,centerY,radius, drawColor) { 
 
    \t ctx.fillStyle = drawColor; 
 
    \t ctx.beginPath(); 
 
    \t ctx.arc(centerX,centerY,radius,0,Math.PI*2,true); 
 
    \t ctx.closePath(); 
 
    \t ctx.fill(); 
 
    } 
 
    //Game Controls 
 
    document.addEventListener('keydown', event => { 
 
     if (event.keyCode === 37) { //Left 
 
     \t xBall(-1); 
 
     } else if (event.keyCode === 39) { //Right 
 
     \t xBall(1); 
 
     } else if (event.keyCode === 38) { //Up 
 
     \t yBall(-1); 
 
     } else if (event.keyCode === 40) { //Down 
 
     \t yBall(1); 
 
     } 
 
    }); 
 
    function yBall(offset) { 
 
    \t ball.direction.y += offset; 
 
    } 
 
    function xBall(offset) { 
 
    \t ball.direction.x += offset; 
 
    }

<canvas id="game" width=800 height=600></canvas>