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

最新推荐文章于 2023-02-13 10:27:40 发布

ES-Lad

最新推荐文章于 2023-02-13 10:27:40 发布

阅读量590

点赞数

分类专栏：前端JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_46671666/article/details/115015940

版权

前端JS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

首先，附上最终效果图，如下：开始运行，同时产生多个球
撞击边缘后球散开
完全散开
本效果的实现主要由产生随机数而产生不同颜色以及不同大小的球，然后球在X，Y方向上赋上不同的速度。球存放在数组中，因而可以实现每个球的大小以及不同方向上的速度不一样。
然后，说一下编程过程中遇到的一些问题：

     1.产生了多个球，但是只有一个球动：

在这里插入图片描述
经检查发现原因是：

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.于是将产生的小球都放入数组当中，但是发现小球全部都静止了，如图：
在这里插入图片描述
代码如下：

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循环遍历之后，又发现新问题，即所有小球运动情况一致，并不会分散开，如图：

在这里插入图片描述
代码如下：

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>

ES-Lad

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现多小球运动中的问题

首先，附上最终效果图，如下：本效果的实现主要由产生随机数而产生不同颜色以及不同大小的球，然后球在X，Y方向上赋上不同的速度。球存放在数组中，因而可以实现每个球的大小以及不同方向上的速度不一样。然后，说一下编程过程中遇到的一些问题： 1.产生了多个球，但是只有一个球动：经检查发现原因是：for(var i=0;i<100;i++){arrball=createball();//创建小球setInterval(move,INTERVAL);//调用小球运动函数} //小
复制链接

扫一扫

专栏目录