如何使用箭头键在画布中平滑移动对象

Question

如何使用箭头键在画布中平滑移动对象

Dyl*_*gan 2 html javascript canvas arrow-keys

我正在制作一个简单的太空游戏，其中一艘船左右移动以躲避小行星。

我从这个视频中学会了左右移动我的船。

但运动非常块状。如何平稳地移动船？

这是我的所有代码：

// JavaScript Document

////// Variables //////
var canvas = {width:300, height:300 };
var score = 0;

var player = {
	x:canvas.width/2,
	y:canvas.height-100,
	speed: 20
};




////// Arrow keys //////

function move(e) {
	
	if(e.keyCode == 37) { 
		player.x -= player.speed;
	}
	if(e.keyCode == 39) {
		player.x += player.speed;	
	}
	
	update();
	
}

document.onkeydown = move;



////// other functions //////


//function to clear canvas
function clearCanvas() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
}

// Draw Player ship.
function ship(x,y) {
	var x = player.x;
	var y = player.y;
	ctx.fillStyle = "#FFFFFF";

	ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+15,y+50);
    ctx.lineTo(x-15,y+50);
    ctx.fill();
}

// update

setInterval (update, 50);

function update() {
	clearCanvas();
	ship();
}

Run Code Online (Sandbox Code Playgroud)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Game</title>   

<script src="game-functions.js"></script>
        
</head>

<body>

<canvas id="ctx" width="300" height="300" style="border: thin solid black; background-color: black;"></canvas>
<br>


<script>
////// Canvas setup //////
var ctx = document.getElementById("ctx").getContext("2d");



</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Spe*_*rek 6

这是因为keydown触发事件类似于您在记事本上键入键盘的方式，因为它会触发一次，但会有轻微的延迟，并且会触发更多的计时器。

正如@Azamantes所说要解决这个问题，您需要创建一个设置为trueonkeydown和falseon的布尔值keyup。然后，您将使用带有 asetTimeout/setInterval和/或的主事件循环requestAnimationFrame。在下面的示例中setInterval，为了简单起见，我仅用于主循环，因为您已经拥有它，然后我们可以move()进入该主循环：

注意：有关实施，requestAnimationFrame请参阅@MarkE 对此问题的评论。

也requestAnimationFrame将刷新尽可能多的，因为它可以在默认情况下。换句话说，如果您需要控制 FPS，则需要添加更多逻辑，这在 HTML5 游戏中很常见。要requestAnimationFrame与受控 FPS 一起使用，请参阅此答案。

// JavaScript Document

////// Variables //////
var canvas = {width:300, height:300 };
var score = 0;

var player = {
	x:canvas.width/2,
	y:canvas.height-100,
	speed: 3
};

var LEFT = false; 
var RIGHT = false;


////// Arrow keys //////

function move() {
	
	if(LEFT) { 
		player.x -= player.speed;
	}
	if(RIGHT) {
		player.x += player.speed;	
	}
	
}

document.onkeydown = function(e) {
	if(e.keyCode == 37) LEFT = true;
	if(e.keyCode == 39) RIGHT = true;
}

document.onkeyup = function(e) {
	if(e.keyCode == 37) LEFT = false;
	if(e.keyCode == 39) RIGHT = false;
}


////// other functions //////


//function to clear canvas
function clearCanvas() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
}

// Draw Player ship.
function ship(x,y) {
	var x = player.x;
	var y = player.y;
	ctx.fillStyle = "#FFFFFF";

	ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+15,y+50);
    ctx.lineTo(x-15,y+50);
    ctx.fill();
}

// update

setInterval (update, 10);

function update() {
	clearCanvas();
	ship();
    move();
}

Run Code Online (Sandbox Code Playgroud)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Game</title>   

<script src="game-functions.js"></script>
        
</head>

<body>

<canvas id="ctx" width="300" height="300" style="border: thin solid black; background-color: black;"></canvas>
<br>


<script>
////// Canvas setup //////
var ctx = document.getElementById("ctx").getContext("2d");



</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，11 月前
查看次数：	9235 次
最近记录：	8 年，11 月前