js 碰碰球

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#box {
700px;
height: 500px;
border: 2px solid black;
position: relative;
top: 100px;
left: 200px;
}

.qq {
position: absolute;
30px;
height: 30px;
background-color: red;
border-radius: 50%;
background:red;
background-size: 30px 30px;
}
</style>
</head>

</div>

<script type="text/javascript">

function Arr(left, top) {

this.box = document.getElementById("box")
this.qiu = document.createElement("p");
this.box.appendChild(this.qiu);
this.qiu.className = "qq"
this.lol = 30
this.left = left || Math.random() * (box.clientWidth - this.lol);
this.top = top || Math.random() * (box.clientHeight - this.lol);
this.qiu.style.left = this.left + "px"
this.qiu.style.top = this.top + "px"
this.oX = parseInt(Math.random() * 1+5) ;
this.oY = parseInt(Math.random() * 1+4) ;

this.tex()
}
Arr.prototype.tex = function() {

var sty = this
var jishi = setInterval(function() {

sty.left += sty.oX
sty.top += sty.oY
sty.qiu.style.left = sty.left + "px"
sty.qiu.style.top = sty.top + "px"
if(sty.left >= box.clientWidth - sty.lol || sty.left <= 0)
{ sty.oX = -sty.oX }

if(sty.top >= box.clientHeight - sty.lol || sty.top <= 0) { sty.oY = -sty.oY}
}, 10)
console.log(sty.left)

}

for (var i = 0; i <5; i++) {
new Arr()
}

</script>

</body>

</html>