JavaScript實現小球碰撞特效。類似自由落體運動。實現原理非常簡單，就是動態的改變每個元素的坐標。使用radius屬性將圖片圓角化。使用left，top屬性動態的改變小球的位置。碰撞反彈球，當碰撞到容器的邊緣后，進行反彈，反向改變坐標。

首先創建Screen類，并在Screen的構造函數中給出了球移動、碰撞所需的各種屬性變量，如ballsnum、spring、bounce、gravity等等 ?然后用原型prototype給出相應的函數，如創建球，createBalls，球碰撞hitBalls，球移動moveBalls，給每個函數添加相應的功能、

最后用按鈕點擊事件調用函數，僅此而已。只是我這里把點擊的效果注釋掉了，直接刷新頁面就會隨機改變。

運行效果如下：

html代碼如下：html>

業余草：www.xttblog.com

body?{

margin:0;

padding:0;

text-align:?center;

}

#screen?{?width:?800px;?height:?640px;?position:?relative;?background:?#ccccff;margin:?0?auto;vertical-align:?bottom}

#inner?{?position:?absolute;?left:0px;?top:0px;?width:100%;?height:100%;?}

#screen?p?{color:white;font:bold?14px;}

.one?{?background:url('images/QP1.png')?no-repeat;?background-size:?100%?auto;}

.two?{?background:url('images/QP2.png')?no-repeat;?background-size:?auto?100%;}

.three?{?background:url('images/QP3.png')?no-repeat;?background-size:?auto?100%;?}

.four?{?background:url('images/QP4.png')?no-repeat;?background-size:?auto?100%;}

.five?{?background:url('images/QP5.png')?no-repeat;?background-size:?auto?100%;}

.six?{?background:url('images/QP6.png')?no-repeat;?background-size:?auto?100%;}

.seven?{?background:url('images/QP7.png')?no-repeat;?background-size:?auto?100%;?}

.eight?{?background:url('images/QP8.png')?no-repeat;?background-size:?auto?100%;?}

.nine?{?background:url('images/QP9.png')?no-repeat;?background-size:?auto?100%;}

.ten{?background:url('images/QP10.png')?no-repeat;?background-size:?auto?100%;}

hi?test?it!

相關js代碼如下：var?getFlag=function?(id)?{

return?document.getElementById(id);???//獲取元素引用

}

var?extend=function(des,?src)?{

for?(p?in?src)?{

des[p]=src[p];

}

return?des;

}

var?clss=['one','two','three','four','five','six','seven','eight','nine','ten'];

var?Ball=function?(diameter,classn)?{

var?ball=document.createElement("div");

ball.className=classn;

with(ball.style)?{

width=height=diameter+'px';position='absolute';

}

return?ball;

}

var?Screen=function?(cid,config)?{

//先創建類的屬性

var?self=this;

if?(!(self?instanceof?Screen))?{

return?new?Screen(cid,config)

}

config=extend(Screen.Config,?config)????//configj是extend類的實例????self.container=getFlag(cid);????????????//窗口對象

self.container=getFlag(cid);

self.ballsnum=config.ballsnum;

self.diameter=80;???????????????????????//球的直徑

self.radius=self.diameter/2;

self.spring=config.spring;??????????????//球相碰后的反彈力

self.bounce=config.bounce;??????????????//球碰到窗口邊界后的反彈力

self.gravity=config.gravity;????????????//球的重力

self.balls=[];??????????????????????????//把創建的球置于該數組變量

self.timer=null;???????????????????????//調用函數產生的時間id

self.L_bound=0;???????????????????????//container的邊界

self.R_bound=self.container.clientWidth;??//document.documentElement.clientWidth?||?document.body.clientWidth?兼容性

self.T_bound=0;

self.B_bound=self.container.clientHeight;

};

Screen.Config={?????????????????????????//為屬性賦初值

ballsnum:10,

spring:0.8,

bounce:-0.9,

gravity:0.05

};

Screen.prototype={

initialize:function?()?{

var?self=this;

self.createBalls();

self.timer=setInterval(function?(){self.hitBalls()},?30)

},

createBalls:function?()?{

var?self=this,

num=self.ballsnum;

var?frag=document.createDocumentFragment();????//創建文檔碎片，避免多次刷新

for?(i=0;i

var?ball=new?Ball(self.diameter,clss[i]);

//var?ball=new?Ball(self.diameter,clss[?Math.floor(Math.random()*?num?)]);//這里是隨機的10個小球的碰撞效果

ball.diameter=self.diameter;

ball.radius=self.radius;

ball.style.left=(Math.random()*self.R_bound)+'px';??//球的初始位置，

ball.style.top=(Math.random()*self.B_bound)+'px';

ball.vx=Math.random()?*?6?-3;

ball.vy=Math.random()?*?6?-3;

frag.appendChild(ball);

self.balls[i]=ball;

}

self.container.appendChild(frag);

},

hitBalls:function?()?{

var?self=this,

num=self.ballsnum,

balls=self.balls;

for?(i=0;i

var?ball1=self.balls[i];

ball1.x=ball1.offsetLeft+ball1.radius;??????//小球圓心坐標

ball1.y=ball1.offsetTop+ball1.radius;

for?(j=i+1;j

var?ball2=self.balls[j];

ball2.x=ball2.offsetLeft+ball2.radius;

ball2.y=ball2.offsetTop+ball2.radius;

dx=ball2.x-ball1.x;??????????????????????//兩小球圓心距對應的兩條直角邊

dy=ball2.y-ball1.y;

var?dist=Math.sqrt(dx*dx?+?dy*dy);???????//兩直角邊求圓心距

var?misDist=ball1.radius+ball2.radius;???//圓心距最小值

if(dist?

//假設碰撞后球會按原方向繼續做一定的運動，將其定義為運動A

var?angle=Math.atan2(dy,dx);

//當剛好相碰，即dist=misDist時，tx=ballb.x,?ty=ballb.y

tx=ball1.x+Math.cos(angle)?*?misDist;

ty=ball1.y+Math.sin(angle)?*?misDist;

//產生運動A后，tx?>?ballb.x,?ty?>?ballb.y,所以用ax、ay記錄的是運動A的值

ax=(tx-ball2.x)?*?self.spring;

ay=(ty-ball2.y)?*?self.spring;

//一個球減去ax、ay，另一個加上它，則實現反彈

ball1.vx-=ax;

ball1.vy-=ay;

ball2.vx+=ax;

ball2.vy+=ay;

}

}

}

for?(i=0;i

self.moveBalls(balls[i]);

}

},

moveBalls:function?(ball)?{

var?self=this;

ball.vy+=self.gravity;

ball.style.left=(ball.offsetLeft+ball.vx)+'px';

ball.style.top=(ball.offsetTop+ball.vy)+'px';

//判斷球與窗口邊界相碰，把變量名簡化一下

var?L=self.L_bound,?R=self.R_bound,?T=self.T_bound,?B=self.B_bound,?BC=self.bounce;

if?(ball.offsetLeft?

ball.style.left=L;

ball.vx*=BC;

}

else?if?(ball.offsetLeft?+?ball.diameter?>?R)?{

ball.style.left=(R-ball.diameter)+'px';

ball.vx*=BC;

}

else?if?(ball.offsetTop?

ball.style.top=T;

ball.vy*=BC;

}

if?(ball.offsetTop?+?ball.diameter?>?B)?{

ball.style.top=(B-ball.diameter)+'px';

ball.vy*=BC;

}

}

}

window.οnlοad=function()?{

var?sc=null;

document.getElementById("inner").innerHTML='';

sc=new?Screen('inner',{ballsnum:10,?spring:0.3,?bounce:-0.9,?gravity:0.01});

sc.initialize();

getFlag('start').οnclick=function?()?{

document.getElementById("inner").innerHTML='';

sc=new?Screen('inner',{ballsnum:10,?spring:0.3,?bounce:-0.9,?gravity:0.01});

sc.initialize();

}

getFlag('stop').οnclick=function()?{

clearInterval(sc.timer);

}

}

看起來很簡單吧！

總結

以上是生活随笔為你收集整理的java小球碰撞界面设计_JavaScript实现小球碰撞特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。