HTML5キャンバスゲームの最適化

Question

次は、私はちょうど私が私のゲームで特定の物事を処理表示するために書いたコード例です：

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); 
} 

少し説明これはシンプルなボードゲームです。座標X Yを正しく得るためにキャンバスをボードの大きさに設定します（これはここでは役に立ちませんが実際のゲームではそうです）。

これは、元のボードイメージの実際の比率に関して、プレーヤーのウィンドウに従ってリサイズされます。この比率を維持することは、画像の品質にとって重要である。 移動では、関数内の単純なタイマーで実行されます。移動が停止した特定のXとYに到達すると、

一部のブラウザやデバイス（コードバアプリなど）では、円の動きが途切れることなく移動するのに問題がありますが、通常は問題なく動作します。私は遅れが私が物事を扱う方法によって引き起こされることを知っていますが、なぜですか？ また、私は動きの速度を一定に保つのに問題があります - すべてのブラウザで同じ+3を動かすようではありません。

Answer 1

ほとんどの場合、不安定さを避けるために、JavaScriptベースのアニメーションには​​を使用する必要があります。この技法では、位置は、時間の関数であり、実行フレームの数は発生しません。この方法では、高速なコンピュータは遅いコンピュータよりも多くのアニメーションフレームを持ちますが、同じアニメーション速度を認識します。たとえば：

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); 
}