JS实现随机乱撞彩色圆球特效的方法

这篇文章主要介绍了JS实现随机乱撞彩色圆球特效的方法,可实现彩色小球的碰撞效果,涉及随机函数与页面样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现随机乱撞彩色圆球特效的方法。分享给大家供大家参考。具体实现方法如下：

1. <!doctype html> 
2. <html lang="en"> 
3. <head> 
4. <meta charset="UTF-8"> 
5. <title>JS实现的随机乱撞的彩色圆球特效代码</title> 
6. <style> 
7. body{ 
8. font-family: 微软雅黑;  
9. } 
10. body,h1{ 
11. margin:0; 
12. } 
13. canvas{ 
14. display:block;margin-left: auto;margin-right: auto; 
15. border:1px solid #DDD;  
16. background: -webkit-linear-gradient(top, #222,#111); 
17. }  
18. </style> 
19. </head> 
20. <body> 
21. <h1>JS实现的随机乱撞的彩色圆球特效代码</h1> 
22. <canvas id="canvas" > 
23. </canvas> 
24. <button id="stop">stop</button> 
25. <button id="run">run</button> 
26. <button id="addBall">addBall</button> 
27. <script src="jquery-1.6.2.min.js"></script> 
28. <script> 
29. var nimo={ 
30. aniamted:null, 
31. content:null, 
32. data:{ 
33. radiusRange:[5,20], 
34. speedRange:[-5,5], 
35. scrollHeight:null, 
36. scrollWdith:null 
37. }, 
38. balls:[], 
39. ele:{ 
40. canvas:null 
41. }, 
42. fn:{ 
43. creatRandom:function(startInt,endInt){//生产随机数 
44. var iResult;  
45. iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1))); 
46. return iResult 
47. }, 
48. init:function(){ 
49. nimo.data.scrollWdith=document.body.scrollWidth; 
50. nimo.data.scrollHeight=document.body.scrollHeight; 
51. nimo.ele.canvas=document.getElementById('canvas');  
52. nimo.content=nimo.ele.canvas.getContext('2d');  
53. nimo.ele.canvas.width=nimo.data.scrollWdith-50; 
54. nimo.ele.canvas.height=nimo.data.scrollHeight-100; 
55. }, 
56. addBall:function(){ 
57. var aRandomColor=[]; 
58. aRandomColor.push(nimo.fn.creatRandom(0,255)); 
59. aRandomColor.push(nimo.fn.creatRandom(0,255)); 
60. aRandomColor.push(nimo.fn.creatRandom(0,255));  
61. var iRandomRadius=nimo.fn.creatRandom(nimo.data.radiusRange[0],nimo.data.radiusRange[1]); 
62. var oTempBall={ 
63. coordsX:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.width-iRandomRadius), 
64. coordsY:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.height-iRandomRadius), 
65. radius:iRandomRadius,  
66. bgColor:'rgba('+aRandomColor[0]+','+aRandomColor[1]+','+aRandomColor[2]+',0.5)' 
67. };  
68. oTempBall.speedX=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]); 
69. if(oTempBall.speedX===0){ 
70. oTempBall.speedX=1 
71. } 
72. if(oTempBall.speedY===0){ 
73. oTempBall.speedY=1 
74. } 
75. oTempBall.speedY=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]); 
76. nimo.balls.push(oTempBall) 
77. }, 
78. drawBall:function(bStatic){  
79. var i,iSize; 
80. nimo.content.clearRect(0,0,nimo.ele.canvas.width,nimo.ele.canvas.height) 
81. for(var i=0,iSize=nimo.balls.length;i<iSize;i++){ 
82. var oTarger=nimo.balls[i];  
83. nimo.content.beginPath(); 
84. nimo.content.arc(oTarger.coordsX,oTarger.coordsY,oTarger.radius,0,10); 
85. nimo.content.fillStyle=oTarger.bgColor;  
86. nimo.content.fill(); 
87. if(!bStatic){ 
88. if(oTarger.coordsX+oTarger.radius>=nimo.ele.canvas.width){ 
89. oTarger.speedX=-(Math.abs(oTarger.speedX)) 
90. } 
91. if(oTarger.coordsX-oTarger.radius<=0){ 
92. oTarger.speedX=Math.abs(oTarger.speedX) 
93. } 
94. if(oTarger.coordsY-oTarger.radius<=0){ 
95. oTarger.speedY=Math.abs(oTarger.speedY) 
96. } 
97. if(oTarger.coordsY+oTarger.radius>=nimo.ele.canvas.height){ 
98. oTarger.speedY=-(Math.abs(oTarger.speedY)) 
99. } 
100. oTarger.coordsX=oTarger.coordsX+oTarger.speedX; 
101. oTarger.coordsY=oTarger.coordsY+oTarger.speedY;  
102. }  
103. } 
104. }, 
105. run:function(){ 
106. nimo.fn.drawBall(); 
107. nimo.aniamted=setTimeout(function(){ 
108. nimo.fn.drawBall(); 
109. nimo.aniamted=setTimeout(arguments.callee,10) 
110. },10) 
111. }, 
112. stop:function(){ 
113. clearTimeout(nimo.aniamted) 
114. } 
115. } 
116. } 
117. window.onload=function(){ 
118. nimo.fn.init(); 
119. var i; 
120. for(var i=0;i<10;i++){ 
121. nimo.fn.addBall(); 
122. } 
123. nimo.fn.run(); 
124. document.getElementById('stop').onclick=function(){ 
125. nimo.fn.stop() 
126. } 
127. document.getElementById('run').onclick=function(){ 
128. nimo.fn.stop() 
129. nimo.fn.run() 
130. } 
131. document.getElementById('addBall').onclick=function(){ 
132. var i; 
133. for(var i=0;i<10;i++){ 
134. nimo.fn.addBall();  
135. } 
136. nimo.fn.drawBall(true); 
137. } 
138. } 
139. </script> 
140. </body> 
141. </html> 

希望本文所述对大家的javascript程序设计有所帮助。