Почему мой игровой персонаж продолжает ускоряться, когда я использую событие keydown? - PullRequest
Новая
       12

Почему мой игровой персонаж продолжает ускоряться, когда я использую событие keydown?

0 голосов
/ 20 октября 2019

Я пытаюсь сделать простую игру. Зеленый блок - мой игровой персонаж. Я использовал событие 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>

1 Ответ

0 голосов
/ 20 октября 2019

Ваши слушатели событий должны быть добавлены за пределы игрового цикла.

В настоящее время вы добавляете дополнительного слушателя для каждого нажатия клавиш в каждом кадре, что означает, что в первом кадре вы будете перемещать 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>
...