Question

我正在尝试制作一个简单的游戏。绿色方块是我的游戏角色。我使用了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>

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

为什么我在使用keydown事件时游戏角色会不断加速？

1 个答案: