光滑的移动球与箭头键javascript

Question

每次点击箭头键，如何让球顺利移动。每次我点击一个箭头键，它会变得矮胖，只有我按住它才会每1秒移动一次。我想要它，所以如果我按下它很长一段时间，它移动相当快速和平滑。

	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

添加方向向量。让键控制方向矢量并使用方向矢量更新每帧中的位置。根据您更新方向向量的方式，您可以使球获得速度或缓慢停止。

例如：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;