带箭头键的平滑移动球javascript

Question

如何在每次单击箭头键时使球顺利移动。每次我点击一个箭头键时，它会变得粗壮，如果我拿着它，每移动一秒钟。我想要它，所以如果我长时间按它，它移动得相当快速和平稳。

\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>