使用setInterval在多维数组中循环以创建动画
Looping thru a multidimensional array using setInterval to create an animation
我在遍历多维数组以在画布上设置动画时遇到了相当大的麻烦。
我现在得到的是动画的最终位置,而不是整个序列
为什么要这样使用多维数组?这个想法是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>
您应该将setInterval
替换为setTimeout
通过使用setInterval
,您将创建无限循环,因为您在每次draw
函数调用中都会以一定的间隔调用一个新循环。
相关文章:
- 正在为循环创建唯一id
- 当从jquery的点击事件中的每个循环创建的数组到它之外时,它显示空白数组
- 基于循环创建变量
- 未捕获的类型错误:未定义不是函数,在中为循环创建了对象
- 如何在jquery中从$.each循环创建对象数组
- 使用jquery.ech()循环创建Object Key
- 如何在Parse.com SDK中循环创建多个对象
- Javascript 使用 For 循环创建动态表,其中包含要在其中显示的数组
- Javascript循环创建函数并使用收到的基于PHP Query的id附加值
- 在单击使用 for 循环创建的传单标记时给出操作
- Javascript 使用 for 循环创建具有唯一名称的数组
- 使用 Javascript for 循环创建 Javascript 数组
- 使用 for 循环创建一个数组数组
- 是否可以在 Javascript 中使用 for 循环创建多个函数
- 使用 jquery 在多个字母上为每个循环创建一个
- 为5x5表中的循环创建
- 使用for循环创建元素和事件侦听器
- 如何将“$(this)”传递给Slick.js插件(并使用循环创建多个旋转木马)
- jquery for循环创建多个按钮
- 我如何将代码后面的循环创建的Javascript函数组合为一个函数,这样我就不会'不必重复