Wie man mit den Pfeiltasten Objekte in Canvas sanft bewegt

Ich arbeite daran, ein einfaches Weltraumspiel zu machen, in dem sich ein Schiff nach links und rechts bewegt, um Asteroiden auszuweichen.Wie man mit den Pfeiltasten Objekte in Canvas sanft bewegt

Ich habe gelernt, mein Schiff von this video nach links und rechts zu bewegen.

Aber die Bewegung ist ziemlich blockig. Wie bewege ich das Schiff reibungslos?

Hier ist mein Code:

// JavaScript Document 
 

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

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

 

 

 

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

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

 
document.onkeydown = move; 
 

 

 

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

 

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

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

 
\t 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() { 
 
\t clearCanvas(); 
 
\t ship(); 
 
}

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

Quelle

2016-10-01 Dylan Madigan

Mögliche Duplikat [Body Animation ist nicht glatt] (http://stackoverflow.com/questions/32365542/body-animation-isnt-smooth) – Kaiido

Im Allgemeinen Ihre Bewegungen wird weicher, wenn Sie kleinere Bewegungen (kleinere 'player.speed') häufiger machen (Zeitintervall 1000/60 = 16,67). Erwägen Sie, etwas über [requestAnimationFrame] (https: //www.paulirish.com/2011/requestanimationframe-for-smart-animating /) das ist eine bessere Timing-Schleife für die Animation. – markE

Verwenden request
Stellen Sie keine update (Ihre Rendering) innerhalb keyUp keyDown Ereignishandler
einen boolean Stellen Variable (eine für jede Directio) und setzen Sie sie auf true auf KeuDown und zu false auf keyUp und innen fügen Sie Ihre Rendering-Funktionen ein einfaches if Check

TL; DR

Ihr Leben einfacher machen.

Sie könnten stattdessen event.key verwenden, das den Schlüsselnamen ('a', 'Esc', 'Leerzeichen' usw.) zurückgibt, es lesbarer macht, wenn Sie keine Kommentare neben den Schlüsselcodes platzieren.

Quelle

2016-10-01 13:00:13 Azamantes

Gute allgemeine Ratschläge, aber da das OP für JavaScript & Game-Dev neu ist, möchten Sie vielleicht Ihre Antwort erweitern, um die Lücke zwischen Ihrer Antwort und ihrer Erfahrung zu schließen. ;-) – markE

Dies ist, weil keydown löst Ereignisse Ähnlichkeit, wie Sie Tastatur auf Notepad eingeben wird, wie es wird einmal auslösen eine leichte Verzögerung haben und sie viele weitere Timer auslösen.

Als @Azamantes erklärte dies lösen Sie eine boolean machen möchten, die true auf keydown und false auf keyup gesetzt. Dann verwenden Sie eine Main Event-Schleife mit entweder setTimeout/setInterval und/oder requestAnimationFrame. Im Beispiel unten habe ich nur verwendet setInterval für die Hauptschleife der Einfachheit halber, da Sie bereits haben, können wir dann move() in das Hauptschleife bewegen:

Hinweis: Für requestAnimationFrame Implementierung siehe @ Markes Kommentar auf diese Frage.

Auch requestAnimationFrame wird standardmäßig so oft wie möglich aktualisiert. Mit anderen Worten, Sie müssen mehr Logik hinzufügen, wenn Sie die FPS steuern müssen, was in HTML5-Spielen üblich ist. Zur Verwendung von requestAnimationFrame mit gesteuerter FPS siehe this answer.

// JavaScript Document 
 

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

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

 
var LEFT = false; 
 
var RIGHT = false; 
 

 

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

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

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

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

 

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

 

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

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

 
\t 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() { 
 
\t clearCanvas(); 
 
\t ship(); 
 
    move(); 
 
}

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

Quelle

2016-10-02 06:25:50

'requestAnimationFrame wird so oft wie möglich aktualisiert', nein, das ist der Punkt von rAF, es wird ** nur ** bei der Bildschirmaktualisierungsrate genannt. – Kaiido

@Kaiido Ja, was ich meine ist, dass es so schnell wie die Bildschirmaktualisierungsrate gehen wird. Das ist der Punkt von "requestAnimationFrame" und warum es nicht so einfach ist, die FPS davon zu kontrollieren –

Wie man mit den Pfeiltasten Objekte in Canvas sanft bewegt

Antwort

Verwandte Themen