原生JS实现多球回弹

╰+哭是因爲堅強的太久メ 2022-03-20 11:56 157阅读 0赞

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDUxOTMy_size_16_color_FFFFFF_t_70][]

**Main.js**

/**
     * Created by DELL on 2017/7/10.
     */
    function MoveDiv(div,i) {
        this.div=div;
        this.div.bool=false;
        this.div.style.left="0px";
        this.div.style.top=i*60+"px";
        this.div.style.opacity=1;
        this.div.addEventListener("click",this.clickHandler)
    }
    MoveDiv.prototype={
        clickHandler:function (e) {
            if(!e){
                e=window.event;
            }
            this.bool=!this.bool;
        },
        update:function () {
            if(this.div.bool) return;
            this.div.style.left=parseFloat(this.div.style.left)+1+"px";
            this.div.style.opacity=parseFloat(this.div.style.opacity)-0.001;
        }
    };
    function HitCircle(div) {
        this.div=div;
        this.div.style.left=Math.random()*450+"px";
        this.div.style.top=Math.random()*450+"px";
        this.div.style.display="none";
        var str="#";
        for(var i=0;i<3;i++){
            var color=Math.floor(Math.random()*256).toString(16);
            if(color.length<2){
                color="0"+color;
            }
            str+=color;
        }
        this.div.style.backgroundColor=str;
        this.abx=1;
        this.aby=1;
        this.speedx=5;
        this.speedy=3;
    }
    HitCircle.prototype={
        begin:false,
        update:function () {
           if(!this.begin) return;
            this.div.style.display="block";
            if(parseFloat(this.div.style.left)>500){
                this.abx=-1;
            }else if(parseFloat(this.div.style.left)<0){
                this.abx=1;
            }
            if(parseFloat(this.div.style.top)>500){
                this.aby=-1;
            }else if(parseFloat(this.div.style.top)<0){
                this.aby=1;
            }
            this.div.style.left=parseFloat(this.div.style.left)+this.speedx*this.abx+"px";
            this.div.style.top=parseFloat(this.div.style.top)+this.speedy*this.aby+"px";
        }
    
    };

**html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 50px;
                height: 50px;
                background-color: aquamarine;
                position: absolute;
                border-radius: 50px;
            }
    
        </style>
        <script src="js/main.js"></script>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs=document.getElementsByTagName("div");
        var list=[];
        for(var i=0;i<divs.length;i++){
            var obj=new HitCircle(divs[i])
            list.push(obj);
        }
        animation();
        var time=60;
        var num=0;
        function animation() {
            requestAnimationFrame(animation);
           showDiv();
            for(var i=0;i<list.length;i++){
                list[i].update();
            }
        }
        function showDiv() {
            if(time==0){
                list[num].begin=true;
                num++;
                if(num!=list.length){
                    time=60;
                }
            }
            time--;
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDUxOTMy_size_16_color_FFFFFF_t_70]: /images/20220320/ec86beb0dd874d9992f8eff0cb72ce2c.png