js 如何让几个圆球 随机运动

这个球总是叠加到一起了 .. 求大神解释

 var body = document.body;

    function bg() {
        return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
    }
    var show = function() {
        for (var i = 0; i < 10; i++) {
            var newdiv = document.createElement("div");
            var cl = document.createAttribute("style");
            cl.value = "width: 50px;background-color:" + bg() + ";height: 50px;position:absolute;border-radius:50px;";
            newdiv.setAttributeNode(cl);
            body.appendChild(newdiv);
        }
    };
    show();
    var idb = document.getElementsByTagName('div');

    var qx = Math.floor(Math.random() * 100);
    var qy = Math.floor(Math.random() * 100);
    var x = 0;
    var y = 0;
    var sx = 1;
    var sy = 1;

    function add() {

        for (var b = 0; b < idb.length; b++) {

            idb[b].style.top = y + "px";
            idb[b].style.left = x + "px";
        }
        x = x + sx;
        y = y + sy;
        if (x >= innerWidth - 50 || x <= 0) {
            sx = -1 * sx;
        }
        if (y >= innerHeight - 50 || y <= 0) {
            sy = -1 * sy;
        }

    }

    id = setInterval('add()', 10);
阅读 8.6k
3 个回答

第一位大佬答的很好,这个一般涉及动画的效果推荐使用canvas与requestAnimationFrame,,因为你要求是DOM实现,,我给你做了一个样本,参考一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .ball{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
        }
    </style>
</head>
<body>
    <button onclick="DOMrealize()">DOM实现</button>
    <script>
    //分析:小球要实现随机的运动,应该具有不同的移动速度以及不同的运动方向
    //DOM实现
    function DOMrealize(){
        var num=10;//定义生成小球数目
        var minSpeed=2;//小球最小速度
        var maxSpeed=10;//小球最大速度
        var aBall=[];//定义一个数组来接受小球
        //创建一个小球的对象
        function Ball(){
            this.init();
        }
        Ball.prototype={
            init:function(){
                //给小球添加私有属性
                this.speedX=random(minSpeed,maxSpeed);
                this.speedY=random(minSpeed,maxSpeed);
                this.div=document.createElement('div');
                this.div.className='ball';
                this.div.style.backgroundColor='#' + Math.floor(Math.random() * 0xffffff).toString(16);
                this.x=random(0,window.innerWidth-50);
                this.y=random(0,window.innerHeight-50);
            }
        }
        //造小球
        for(var i=0;i<num;i++){
            var ball=new Ball();
            document.body.appendChild(ball.div);
            aBall.push(ball);
        }
        //小球运动
        move();
        function move(){
            for(var i=0,len=aBall.length;i<len;i++){
                draw(aBall[i]);
                updata(aBall[i]);
            }
            requestAnimationFrame(move);
        }
        function draw(obj){
            obj.div.style.top=obj.y+'px';
            obj.div.style.left=obj.x+'px';
        }
        function updata(obj){
            obj.x=obj.div.offsetLeft+obj.speedX;
            obj.y=obj.div.offsetTop+obj.speedY;
            if(obj.x<0){
                obj.x=0;
                obj.speedX*=(-1);
            }
            if(obj.y<0){
                obj.y=0;
                obj.speedY*=(-1);
            }
            if(obj.x>(window.innerWidth-50)){
                obj.x=window.innerWidth-50;
                obj.speedX*=(-1);
            }
            if(obj.y>(window.innerHeight-50)){
                obj.y=window.innerHeight-50;
                obj.speedY*=(-1);
            }
        }
    }
    function random(min,max){
        return ~~(Math.random()*(max-min)+min);
    }
    </script>
</body>
</html>

图片描述

泻药。
因为你所有球的坐标都是由x,y两个变量控制的,所以当然是叠在一起的。
一般这种的做法都是通过单个球实例化一个对象,在requestAnimationFrame时进行统一更新状态,此外真的要做类似动画,可能考虑用canvas实现效果更好,同时进行大量的DOM操作太吃性能。

sx和sy随机+-表示方向,再随机数值表示距离,就行了。

sx:+,sy:+ 向第一象限(右上角)运动
sx:-,sy:+ 向第二象限(左上角)运动
sx:-,sy:- 向第三象限(左下角)运动
sx:+,sy:- 向第四象限(右下角)运动

运动距离=√(sx^2+sy^2)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题