原生JS实现多球回弹

最新推荐文章于 2024-04-20 09:17:06 发布

不要变一休_

最新推荐文章于 2024-04-20 09:17:06 发布

阅读量296

点赞数

本文链接：https://blog.csdn.net/qq_42451932/article/details/87108512

版权

效果图：

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>

不要变一休_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现多球回弹

效果图： 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"; ...
复制链接

扫一扫