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

发布于
2017-10-15

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

 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);

html javascript php

阅读 8.6k

3 个回答

得票最新

李昌义

66227

发布于
2017-10-15

✓ 已被采纳

第一位大佬答的很好，这个一般涉及动画的效果推荐使用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>

图片描述