原生JS实现多球回弹

效果图:

 

原生JS实现多球回弹_第1张图片

 

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





    
    Title
    
    


 

你可能感兴趣的:(原生JS实现多球回弹)