Smooth Moving Ball with Arrow keys javascript

Question

How do you make the ball move smoothly every time I click an arrow key. Everytime I click an arrow key, it get chunky and only moves every 1 second if I hold it. I want it so if I press it for a long time, it moves fairly fast and smooth.

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

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

Answer 1

Add a direction vector. Let the keys control the direction vector and use the direction vector to update the position in each frame. Depending on how you update the direction vector, you can make the ball gain speed or slowly stop.

For example:

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

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