HTML5 Canvas Spiel Optimierung

Question

Das Folgende ist ein Beispiel Code, den ich gerade geschrieben zeigen, dass ich bestimmte Dinge an meinem Spiel Griff:

https://jsfiddle.net/qk7ayx7n/25/

<canvas id = "canvas"></canvas> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

JS:

var canvas = document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
canvas.width = 750; //keeping ratio 
canvas.height = 587; //keeping ratio 

$('#canvas').css("height", window.innerHeight); 
$('#canvas').css("width", window.innerHeight * 1.277); //keeping the ratio 
//and also resizing according to the window(not to overflow) 

var board = new Image(); 
board.src = "https://s21.postimg.org/ko999yaaf/circ.png"; 
var circle = new Image(); 
circle.src = "https://s21.postimg.org/4zigxdh7r/circ.png"; 
ctx.drawImage(board, 0, 0); 

var x = 10, y = 10; 
ctx.drawImage(circle, x, y); 
startMoving(); 

function startMoving(){ 
     if(y > 310) return; 
    y+=3; 
    ctx.clearRect(0,0,750,587); 
    ctx.drawImage(board, 0, 0); 
     ctx.drawImage(circle, x, y); 
    setTimeout(function(){startMoving()}, 30); 
} 

Eine kleine Erklärung : Dies ist ein einfaches Brettspiel. Zuerst wird die Leinwand auf die Brettmaße selbst gesetzt, um die Koordinaten XY richtig zu bekommen (das ist hier nicht sinnvoll, aber in meinem eigentlichen Spiel ja).

dann wird es nach dem Fenster des Spielers der Größe verändert, in Bezug auf das tatsächliche Verhältnis des ursprünglichen Plattenbildes. Das Verhältnis zu halten ist wichtig für die Qualität des Bildes. Nun erfolgt die Bewegung mit einem einfachen Timer in einer Funktion, sobald es zu einem bestimmten X und Y kommt wird die Bewegung gestoppt.

ich Schwierigkeiten haben, die Bewegung des Kreises immer ohne Pausen zu bewegen/Verzögerungen bei einigen Browsern und Geräten (wie auf einer cordova app), obwohl es in der Regel gut funktioniert. Ich weiß, dass die Verzögerungen durch die Art und Weise verursacht werden, wie ich mit den Dingen umgehe, aber warum? auch, ich habe Probleme, die Geschwindigkeit der Bewegung konstant zu halten - +3 scheint nicht in jedem Browser gleich zu bewegen.

Answer 1

In den meisten Fällen sollten Sie requestAnimationFrame für JavaScript-basierte Animationen verwenden choppiness zu vermeiden. Bei dieser Technik ist die Position eine Funktion von Zeit nicht wie viele Ausführungsrahmen stattfinden. Auf diese Weise haben schnelle Computer mehr Animationsframes als langsame Computer, aber Sie werden immer noch die gleiche Animationsgeschwindigkeit wahrnehmen. Zum Beispiel:

var x = 10, y = 10; 

var startPos = 10; 
var destPos = 310; 
var startTime = Date.now(); 
var velocity = 0.1; // pixels per millisecond 
var distance = destPos - startPos; 
var duration = Math.abs(distance)/velocity; 

requestAnimationFrame(startMoving); 

function startMoving(now) { 
    var elapsedTime = Math.min(now - startTime, duration); 
    y = startPos + (elapsedTime * velocity); 
    ctx.clearRect(0,0,750,587); 
    ctx.drawImage(board, 0, 0); 
    ctx.drawImage(circle, x, y); 

    if (elapsedTime < duration) 
    requestAnimationFrame(startMoving); 
}