为什么当我使用 keydown 事件时我的游戏角色一直加速？答案

【问题标题】：Why does my game character keep accelerating when I use the keydown event?为什么当我使用 keydown 事件时我的游戏角色一直加速？
【发布时间】：2019-10-21 03:12:28
【问题描述】：

我正在尝试制作一个简单的游戏。绿色方块是我的游戏角色。我使用了 keydown 事件来使我的角色能够左右移动。当我按住右或左箭头键时，角色会继续加速。如果您从点击右箭头键或左箭头键开始，您将看到角色所在位置和角色所在位置之间的空间间隔会随着您单击更多而增加。如何使我的角色以恒定的空间间隔以恒定的速度移动。

//variables
var canvas = document.getElementById("canvas");
var draw = canvas.getContext("2d");
var characterx = 20;
var charactery = window.innerHeight - 60;
var dx = 0.01;
var dy = 0.01;

//canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;



//main game function
function run() {

	//loops the function
	requestAnimationFrame(run);

	//clears the screen
	draw.clearRect(0, 0, canvas.width, canvas.height)

	//draws the ground
	draw.beginPath();
	draw.fillStyle = "#823819";
	draw.fillRect(0, canvas.height - 20, canvas.width, 20);
	draw.fill();
	draw.closePath();

	//draws the main character
	draw.beginPath();
	draw.fillStyle = "#128522";
	draw.fillRect(characterx, charactery, 40, 40);
	draw.fill();
	draw.closePath();

	//key evevnts
	window.addEventListener("keydown",function(event) {
		if(event.keyCode == 39) {
			characterx  += dx;
		}
	});

	window.addEventListener("keydown",function(event) {
		if(event.keyCode == 37) {
			characterx  -= dx;
		}		
	});

};
run();

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		body {
			margin: 0;
			overflow: hidden;
		}
		canvas {
			margin: 0;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript game-physics

【解决方案1】：

您的事件监听器应该添加到您的游戏循环之外。

目前，您正在为每一帧的每个按键添加一个额外的侦听器，这意味着在第一帧您将移动 dx * 1 以获得按键，但在第 100 帧您将移动 dx * 100 以获得单个按键。

这也是为什么您的 dx 值必须如此之低的原因 - 我在下面的示例中增加了它，但您可以根据需要进行调整。

//variables
var canvas = document.getElementById("canvas");
var draw = canvas.getContext("2d");
var characterx = 20;
var charactery = window.innerHeight - 60;
var dx = 3.0;
var dy = 3.0;

//canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//key evevnts
window.addEventListener("keydown",function(event) {
	if(event.keyCode == 39) {
		characterx  += dx;
	}
});
window.addEventListener("keydown",function(event) {
	if(event.keyCode == 37) {
		characterx  -= dx;
	}		
});

//main game function
function run() {

	//loops the function
	requestAnimationFrame(run);

	//clears the screen
	draw.clearRect(0, 0, canvas.width, canvas.height)

	//draws the ground
	draw.beginPath();
	draw.fillStyle = "#823819";
	draw.fillRect(0, canvas.height - 20, canvas.width, 20);
	draw.fill();
	draw.closePath();

	//draws the main character
	draw.beginPath();
	draw.fillStyle = "#128522";
	draw.fillRect(characterx, charactery, 40, 40);
	draw.fill();
	draw.closePath();

};
run();

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		body {
			margin: 0;
			overflow: hidden;
		}
		canvas {
			margin: 0;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

【讨论】：