HTML5,“ for”循环和飞机问题

用户名

我在创建的网页上遇到了更多麻烦。老实说,我不知道出什么问题了。我认为这可能与我的“ for”循环有关,但我不确定。我正在尝试从一个随机的x位置开始,获取一个随机的图像在整个画布上进行动画处理。我将其设置为随机图像将在随机位置开始但不会移动的位置。如果有人不介意快速浏览,那将是很棒的。只是让您知道,这个问题可能有一个非常简单的答案(来源:我很累)。感谢您的时间

<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>
他们有

您的代码中有两个问题:

  1. ,0从中删除airplaneArray.push(new plane(Math.floor(Math.random()*1000),100,1,1,imageArray[Math.floor(Math.random()*4)],100),0);
  2. 将setTimeout更改为 setTimeout('draw()',30);

我的一些小意见:

  1. <script>标签应放在</body>标签之前
  2. 将所有声明和数据准备移出draw()功能。
  3. 应该改进您的算法来改变每个平面的速度。例子:airplaneArray.push(new plane(Math.floor(Math.random()*1000),100,Math.floor(Math.random()*20)+1,1,imageArray[Math.floor(Math.random()*4)],100));

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章