0

多次元配列をループしてキャンバス上でアニメーション化するのにかなりの問題があります。

私が今得ているのは、シーケンス全体ではなく、アニメーションの最終位置です

多次元配列でこれが好きなのはなぜですか？アイデアは、PHP が多次元配列を出力し、それをループしてアニメーションを作成できるというものです。

  <script>
           canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");

    r = new Image()
    r.src = 'redsprites.png';
    image2 = new Image()
    image2.src = 'pitch.png';
    b = new Image()
    b.src = 'bluesprites.png';
    z = new Image()
    z.src = 'ball.png';



var action = [[[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
 [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
 [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
 [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
 [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ]];

  var draw = function(){
  //ctx.clearRect(0, 0, 500, 700);
  ctx.drawImage(image2, 0, 0, 622, 924, 0, 0, 300, 500);
for(h = 0; h < action.length; h++)

   {

for(m = 0; m < action[h].length; m++)

       {
        ctx.drawImage(action[h][m][0], 0, 0, 100, 100, action[h][m][1], action[h][m][2], 15, 15);
        }
 }
}

setInterval(draw, 100);
 </script>
4

1 に答える 1

0

に置き換える必要がsetIntervalありsetTimeoutます。
を使用すると、各関数呼び出しsetIntervalで特定の間隔で新しいループを呼び出すため、無限ループが作成されます。draw

于 2013-02-24T12:18:38.263 に答える