JavaScriptのHTMLキャンバスとスクリプトアニメーション

Question

私はアニメーションを記述することができますが、キーボード入力を理解していますが、私はすべてをまとめるのに苦労しています。私は基本的に接続4ゲームをコーディングしていますが、私は問題を単純化しています。

が

function keyboardMove(e){ 
    switch(e.keyCode) { 
    case 32: 
     movePiece(0, 0, 1000); 
     break; 
    } 

movePiece（movePiece関数を呼び出すスペースキーIを押す）下にキャンバスの上から円を移動します。私は0.1で25ミリ秒ごと

function movingPiece(x, startY, endY){ 

var y = startY; 

    while(y<endY) 
    { 
     setInterval(function(){ 
      b_ctx.globalCompositeOperation="destination-over"; 
      b_ctx.fillStyle = "yellow"; 
      b_ctx.beginPath(); 
      b_ctx.arc(x, startY, 45, 0, Math.PI*2, true); 
      b_ctx.fill(); 
     }, 25); 

     y+=0.1; 
    } 
} 

アニメーションは、少なくともではない視覚的に仕事をしたりしないのY位置を更新しましたので、これはゆっくりと起こるしたいです。私は誰かがキーボード・プレスの後でアニメーションを完成させる最善の方法を説明できたらうれしいです。

Answer 1

ここではキーボードの押しは無関係です。 このコードにはいくつかの問題があります：関数名で

1. 誤植
2. は円が今まで移動する必要がある場合は、あなただけyはあなたが入れ子になっている
3. を変更されているとして、Y、ないstartYとを渡す必要がありますsetIntervalはループ自体であるため、ここでループします。 clearInterval（）を使用して停止することができるので、whileは必要ありません。
4. "destination-over"はここでは最適ではないかもしれません。あなたのコードで

var c = document.querySelector('#c') 
 
var b_ctx = c.getContext('2d') ; 
 

 
function movingPiece(x, startY, endY){ 
 

 
var y = startY; 
 

 
    
 
    
 
     var inter = setInterval(function(){ 
 
      
 
      b_ctx.globalCompositeOperation="copy"; 
 
      b_ctx.fillStyle = "yellow"; 
 
      b_ctx.beginPath(); 
 
      b_ctx.arc(x, y, 45, 0, Math.PI*2, true); 
 
      b_ctx.fill(); 
 
      y+=0.1; 
 
      if (y>endY) clearInterval(inter) 
 
     }, 25); 
 

 
     
 
    
 
} 
 
movingPiece(0, 0, 1000);

<canvas id="c"></canvas>