JS实现多小球运动中的问题

首先,附上最终效果图,如下:JS实现多小球运动中的问题_第1张图片
JS实现多小球运动中的问题_第2张图片
JS实现多小球运动中的问题_第3张图片
本效果的实现主要由产生随机数而产生不同颜色以及不同大小的球,然后球在X,Y方向上赋上不同的速度。球存放在数组中,因而可以实现每个球的大小以及不同方向上的速度不一样。
然后,说一下编程过程中遇到的一些问题:

     1.产生了多个球,但是只有一个球动:

JS实现多小球运动中的问题_第4张图片
经检查发现原因是:

for(var i=0;i<100;i++){
            arrball=createball();//创建小球
            setInterval(move,INTERVAL);//调用小球运动函数
        }
  //小球运动函数
        function move(){
                var ball=arrball;
                var left=parseInt(ball.style.left);
                var top=parseInt(ball.style.top);
                left+=speedX;
                if(left>=viewWidth-ball.offsetWidth){
                    speedX=-speedX;
                }
                if(left<0){
                    speedX=-speedX;
                }
                top+=speedY;
                if(top>=viewHeight-ball.offsetWidth){
                    speedY=-speedY;
                }
                if(top<0){
                    speedY=-speedY;
                }
                ball.style.left=left+"px";
                ball.style.top=top+"px";
        }
    创建小球虽然循环创建了100个,但是没有设置数组,最终只有最后一个球会调用运动函数并运动,前面99个球静止;

2.于是将产生的小球都放入数组当中,但是发现小球全部都静止了,如图:
JS实现多小球运动中的问题_第5张图片
代码如下:

var arrball=[];

        for(var i=0;i<100;i++){
            arrball[i]=createball();//创建小球
            setInterval(move,INTERVAL);//调用小球运动函数
        }
        //小球运动函数
        function move(){
                var ball=arrball[i];
                var left=parseInt(ball.style.left);
                var top=parseInt(ball.style.top);
                left+=speedX;
                if(left>=viewWidth-ball.offsetWidth){
                    speedX=-speedX;
                }
                if(left<0){
                    speedX=-speedX;
                }
                top+=speedY;
                if(top>=viewHeight-ball.offsetWidth){
                    speedY=-speedY;
                }
                if(top<0){
                    speedY=-speedY;
                }
                ball.style.left=left+"px";
                ball.style.top=top+"px";
        }

经研究发现原因是:虽然将小球放入数组,但是在move运动函数中并未进行循环遍历每个小球,因此在move函数中也要进行循环遍历;

        3.在move函数中加上for循环遍历之后,又发现新问题,即所有小球运动情况一致,并不会分散开,如图:

JS实现多小球运动中的问题_第6张图片
代码如下:

var arrball=[];

        for(var i=0;i<100;i++){
            arrball[i]=createball();//创建小球
            setInterval(move,INTERVAL);//调用小球运动函数
        }
        //小球运动函数
        function move(){
            for(var i=0;i<100;i++){
                var ball=arrball[i];
                var left=parseInt(ball.style.left);
                var top=parseInt(ball.style.top);
                left+=speedX;
                if(left>=viewWidth-ball.offsetWidth){
                    speedX=-speedX;
                }
                if(left<0){
                    speedX=-speedX;
                }
                top+=speedY;
                if(top>=viewHeight-ball.offsetWidth){
                    speedY=-speedY;
                }
                if(top<0){
                    speedY=-speedY;
                }
                ball.style.left=left+"px";
                ball.style.top=top+"px";
            }
        }

又经过仔细分析发现,虽然每个球放入了数组,并且在move中都循环了一遍,每个球都会运动,但是所有球运动的路径速度一致,说明需要将每个球的运动路径与速度都设为不一样,即将每个球的X,Y方向速度放入数组,speedX[i]=randomNumber(40,50);speedY[i]=randomNumber(20,30);即可让每个球实现不同的运动轨迹,得到文章开头3张图片里的那种效果。
最后,给出完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <script>

    //产生随机数
    var randomNumber=function(min,max){
        return ~~(Math.random()*(max-min)+min);
    }

    //产生随机颜色
    function randomColor(){
        const MIN=0;
        const MAX=0xffffff;
        var color =randomNumber(MIN,MAX);
        return "#"+color.toString(16);
    }


    //创建球
    function createball(){
        var ball=document.createElement("div");
        var width=randomNumber(20,100);
        ball.style.width=width+"px";
        ball.style.height=width+"px";
        ball.style.backgroundColor=randomColor();
        ball.style.borderRadius="50%";
        ball.style.border="1px solid";
        ball.style.position="fixed";
        ball.style.top="0";
        ball.style.left="0";
        document.body.appendChild(ball);
        return ball;
    }
        var speedX=[];
        var speedY=[];
        const INTERVAL=50;//每次运动间隔时间
        var viewWidth=document.documentElement.clientWidth;
        var viewHeight=document.documentElement.clientHeight;
        var arrball=[];

        for(var i=0;i<100;i++){
            arrball[i]=createball();//创建小球
            speedX[i]=randomNumber(40,50);
            speedY[i]=randomNumber(20,30);
        }

        setInterval(move,INTERVAL);//调用小球运动函数

        //小球运动函数
        function move(){
            for(var i=0;i<100;i++){
                var ball=arrball[i];
                var left=parseInt(ball.style.left);
                var top=parseInt(ball.style.top);
                left+=speedX[i];
                if(left>=viewWidth-ball.offsetWidth){
                    speedX[i]=-speedX[i];//碰到右边框反弹
                }
                if(left<0){
                    speedX[i]=-speedX[i];//碰到左边框反弹
                }
                top+=speedY[i];
                if(top>=viewHeight-ball.offsetWidth){
                    speedY[i]=-speedY[i];//碰到下边框反弹
                }
                if(top<0){
                    speedY[i]=-speedY[i];//碰到上边框反弹
                }
                ball.style.left=left+"px";
                ball.style.top=top+"px";
            }
        }
    </script>
</body>
</html>

你可能感兴趣的:(前端JS,js)