第JavaScript實(shí)現(xiàn)多球運(yùn)動效果本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)多球運(yùn)動的具體代碼，供大家參考，具體內(nèi)容如下

代碼如下：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

title多球運(yùn)動/title

style

*{margin:0;padding:0;}

body{background-color:#90f;}

.ball{position:absolute;left:0;top:0;width:100px;height:100px;background:#f0f;border-radius:50%;}

/style

/head

body

script

run(22)//封裝

//定義速度

varspeed;

functionrun(num){

//創(chuàng)建出num個div

for(vari=0;ii++){

//[2,11)隨機(jī)速度

speed=Math.floor(Math.random()*9+2);

//創(chuàng)建生成節(jié)點(diǎn)

vardiv=document.createElement("div");

//添加類名

div.className='ball'

//自定義屬性保存值

div.speedX=Math.floor(Math.random()*9+2)

div.speedY=Math.floor(Math.random()*9+2)

//將div放置到body中

document.body.appendChild(div)

//獲取元素

varbox=document.getElementsByClassName("ball")

//獲取文檔可視區(qū)域的寬高

varmaxX=document.documentElement.clientWidth-box[0].offsetWidth;

varmaxY=document.documentElement.clientHeight-box[0].offsetHeight;

//自適應(yīng)窗口

window.onresize=function(){

maxX=document.documentElement.clientWidth-box[0].offsetWidth;

maxY=document.documentElement.clientHeight-box[0].offsetHeight;

play()

functionplay(){

for(vari=0;ii++){

//獲取

varball=box[i];

varstartTop=ball.offsetTop;

varstartLift=ball.offsetLeft;

//startTop都為零；

vartop=startTop+ball.speedY;

varleft=startLift+ball.speedX;

//判斷小球是否出左右邊界

if(left=0||left=maxX){

//改變方向

ball.speedX=-ball.speedX;

ball.style.background=randomColor()

//判斷

if(left=0){

left=0;

}elseif(left=maxX){

left=maxX;

//判斷小球是否出上下邊界

if(top=0||top=maxY){

//改變方向；

ball.speedY=-ball.speedY;

ball.style.background=randomColor()

//判斷

if(top=0){

top=0;

}elseif(top=maxY){

top=maxY;

ball.style.top=top+"px";

ball.style.left=left+"px";

//執(zhí)行動畫幀

requestAnimationFrame(play);

//顏色隨機(jī)

functionrandomColor(){

varr=Math.floor(Math.random()*256),

g=Math.floor(Math.random()*256),

b=Math.floor(Math.random()*256);