一种随机碰撞彩球特效的JS方法

本文介绍了一种用js实现彩球效应随机碰撞的方法，供大家参考，具体的实现方法如下：

js实现随机碰撞的彩球特效代码

体{
字体：微软雅黑；
}
主体，H1
保证金：0；
}
帆布{
显示：块；左边缘：自动；边缘正确：自动；
边境：1px solid # DDD；
背景：WebKit的线性梯度（顶部，# 222，# 111）；
}
js实现随机碰撞的彩球特效代码
停止
运行
addball
尼莫= { var
aniamted：空，
内容：null，
数据：{
RadiusRange：{ 5 }，
SpeedRange：{ -5,5} }，
ScrollHeight：空，
scrollwdith：空
}，
球：{ }，
Ele：{
帆布：空
}，
FN：{
CreatRandom：功能（startint，endint）{ / /随机数产生
VaR iResult；
startint iResult = +（math.floor（Math.random（）*（endint startint + 1））））
返回iResult
}，
init：函数（）{
尼莫，scrollwdith = document.body.scrollwidth数据；
尼莫，scrollheight = document.body.scrollheight数据；
尼莫。元。画布document.getelementbyid（'canvas）；
尼莫。内容= nimo.ele.canvas.getcontext（二维的）；
尼莫。元宽度= nimo.data.scrollwdith-50。帆布；
尼莫。电器。高度= nimo.data.scrollheight-100画布；
}，
AddBall：函数（）{
无功arandomcolor = { }；
ARandomColor.push（nimo.fn.creatrandom（0255））；
ARandomColor.push（nimo.fn.creatrandom（0255））；
ARandomColor.push（nimo.fn.creatrandom（0255））；
无功irandomradius = nimo.fn.creatrandom（尼莫。数据。radiusrange { 0 }，尼莫。数据。radiusrange { 1 }）；
无功otempball = {
CoordsX：nimo.fn.creatrandom（irandomradius，尼莫。元。画布宽度irandomradius），
CoordsY：nimo.fn.creatrandom（irandomradius，尼莫。元。帆布。高度irandomradius），
半径：irandomradius，
背景：'rgba（+ arandomcolor { 0 } +，+ arandomcolor { 1 } +，+ arandomcolor { 2 } + '，0.5）
}；
otempball。Speedx = nimo.fn.creatrandom（尼莫。数据。速度范围{ 0 }，尼莫。数据。速度范围{ 1 }）；
如果（otempball Speedx = = =。0）{
otempball Speedx = 1。
}
如果（otempball迅速= = =。0）{
otempball快速= 1。
}
otempball。快速= nimo.fn.creatrandom（尼莫。数据。速度范围{ 0 }，尼莫。数据。速度范围{ 1 }）；
Nimo.balls.push（otempball）
}，
DrawBall：功能（bstatic）{
var i，显象管尺寸；
nimo.content.clearrect（0,0，nimo.ele.canvas.width，尼莫。元。帆布。高度）
对于（var i = 0，显象管尺寸= nimo.balls.length；i < isize；i++）{
无功otarger =尼莫。球{我}；
Nimo.content.beginPath（）；
Nimo.content.arc（otarger.coordsx，otarger.coordsy，otarger.radius，0）；
尼莫。内容。fillStyle = otarger.bgcolor；
Nimo.content.fill（）；
如果（！bstatic）{
如果（otarger。coordsx + otarger。半径> =尼莫。元。画布宽度）{
OTarger。Speedx = -（Math.abs（otarger。Speedx））
}
如果（otarger。coordsx otarger。半径<= 0）{
OTarger。Speedx = math.abs（otarger。Speedx）
}
如果（otarger。coordsy otarger。半径<= 0）{
OTarger。快速= math.abs（otarger。快速）
}
如果（otarger。coordsy + otarger。半径> =尼莫。元。帆布。高度）{
OTarger。快速= -（Math.abs（otarger。快速））
}
OTarger。coordsx = otarger coordsx + otarger.speedx；
OTarger。coordsy = otarger coordsy + otarger.speedy；
}
}
}，
运行：函数（）{
Nimo.fn.drawBall（）；
尼莫。aniamted = setTimeout（）{（）函数（
Nimo.fn.drawBall（）；
尼莫。aniamted = setTimeout（arguments.callee，10）
}，10）
}，
停止：函数（）{
ClearTimeout（尼莫。aniamted）
}
}
}
窗口。指针函数（）{
Nimo.fn.init（）；
var i；
对于（var i = 0；i < 10；i + +）{
Nimo.fn.addBall（）；
}
Nimo.fn.run（）；
document.getelementbyid（停止'）。Onclick =函数（）{
Nimo.fn.stop（）
}
document.getelementbyid（'run）。Onclick =函数（）{
Nimo.fn.stop（）
Nimo.fn.run（）
}
document.getelementbyid（'addball）。Onclick =函数（）{
var i；
对于（var i = 0；i < 10；i + +）{
Nimo.fn.addBall（）；
}
nimo.fn.drawball（真的）；
}
}
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。