HTML5、'for' 循环和飞机的问题

Question

我在创建网页时遇到了更多问题。老实说，我不知道出了什么问题。我认为这可能与我的 'for' 循环有关，但我不确定。我正在尝试获取随机图像以从随机 x 位置开始在 canvas 上设置动画。我将其设置为随机图像将从随机位置开始的位置，但它不会移动。如果有人不介意快速浏览一下，那就太好了。只是想让你知道，这个问题可能有一个非常简单的答案（来源：我很累）。谢谢你的时间

<html>
<head>
    <style>
    </style>
    <script>
        var airplaneArray = [];


        function draw(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var monoRed = document.getElementById('monoRed');
            var biRed = document.getElementById('biRed');
            var jet = document.getElementById('jet');
            var biBlue = document.getElementById('biBlue');
            var imageArray = [monoRed,biRed,jet,biBlue];

            function plane(x,y,xspeed,yspeed,source,size){
                this.x = x;
                this.y = y;
                this.xspeed = xspeed;
                this.yspeed = yspeed;
                this.source = source;
                this.size = size;
            }
            plane.prototype.draw = function(){
                ctx.drawImage(this.source,this.x,this.y,this.size,this.size);
            }
            plane.prototype.move = function(){
                this.x += this.xspeed;
            }

            while(airplaneArray.length-1 < 5){
                airplaneArray.push(new plane(Math.floor(Math.random()*1000),100,1,1,imageArray[Math.floor(Math.random()*4)],100),0);
            }

            ctx.save();
            ctx.clearRect(0,0,1000,500);
                ctx.fillStyle = 'rgba(200,0,0,1)';
                ctx.fillRect(10,10,10,10);
                for(i=0; i < airplaneArray.length; i++){
                    airplaneArray[i].draw();
                    airplaneArray[i].move();
                }
            ctx.restore();

            var loopTimer = setTimeout('draw('+x+','+y+')',30);
        }
    </script>
</head>
<body onload="draw()">

    <canvas id="canvas" width="1000" height="500"></canvas>

    <img id="monoRed" src="http://www.vaachapter11.com/images/monoplane-red.png" width="0" height="0" alt="hi" />
    <img id="biRed" src="http://www.vaachapter11.com/images/Biplane-Red.png" width="0" height="0" />
    <img id="jet" src="http://www.vaachapter11.com/images/Jet-screaming.png" width="0" height="0" />
    <img id="biBlue" src="http://www.vaachapter11.com/images/Biplane-blue.png" width="0" height="0" />
</body>  
</html>

Answer 1

你的代码有两个问题：

从 airplaneArray.push(new plane(Math.floor(Math.random()*1000),100,1,1,imageArray[Math.floor(Math.random()*4)],100),0);

,0

将 setTimeout 更改为 setTimeout('draw()',30);

我的一些小评论：

<script> 标签应该放在 </body> 标签之前。
将所有声明和数据准备移出draw()函数。
应该改进你的算法来改变每架飞机的速度。示例：airplaneArray.push(new plane(Math.floor(Math.random()*1000),100,Math.floor(Math.random()*20)+1,1,imageArray[Math.floor(Math.random()*4)],100));

HTML5、'for' 循环和飞机的问题

Problems with HTML5, 'for' loops, and airplanes

html

javascript

animation

html5-canvas