为了账号安全,请及时绑定邮箱和手机立即绑定

js实现小球运动的问题

js实现小球运动的问题

慕先生4463397 2017-05-08 20:51:38
<!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个?两个问题
查看完整描述

2 回答

  • 2 回答
  • 0 关注
  • 2114 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信