js实现小球运动的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    a{text-decoration: none;color: #333;}
    ul,li{list-style: none;}
    body{font-size: 14px;font-family: "微软雅黑";}
    .box{width:100px;height:100px;background:red;border-radius: 50%;position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
    <script type="text/javascript">
    for(var i=0;i<=10;i++){
        var div=document.createElement("div");
        document.body.appendChild(div);
        div.className="box";
        div.x=0;//开始值
        div.y=0;
        div.xspeed=i+2;//速度
        div.yspeed=i+2;
        div.onclick=function(){
            var dom=arr.splice(arr.indexOf(this),1);//找到每一个
            this.parentNode.removeChild(dom[0]);

        }
        var divClass=document.getElementsByClassName("box");
            var arr=[].slice.call(divClass);//转换成数组
    }
    function play(){
        for(var j=0;j<arr.length;j++){
            var boxDome=arr[j];
            var maxW=document.innerWidth-boxDome.offsetWidth;
            var maxH=document.innerHeight-boxDome.offsetHeight;
            boxDome.x+=div.xspeed;
            boxDome.y+=div.yspeed;
            if(boxDome.x<0){
                boxDome.x=0;
                boxDome.xspeed=-div.xspeed;
            }
            if(boxDome.x>maxW){
                boxDome.x=maxW;
                boxDome.xspeed=-div.xspeed;
            }
            if(boxDome.y<0){
                boxDome.y=0;
                boxDome.yspeed=-div.yspeed;
            }
            if(boxDome.y>maxH){
                boxDome.y=maxH;
                boxDome.yspeed=-div.yspeed;
            }
            boxDome.style.left=boxDome.x+'px';
            boxDome.style.top=boxDome.y+'px';

        }

    }
    play();
    setInterval(play,1000/30);
    </script>
</body>
</html>

小球控制不了,应该是10个怎么看到1个?两个问题

慕先生4463397

浏览 1997回答 2

2回答

随时随地看视频慕课网APP