生活随笔
收集整理的這篇文章主要介紹了
HTML5 随机弹跳的小球
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML5 隨機彈跳的小球 原文:HTML5 隨機彈跳的小球
查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm
Chrome效果圖：
火狐效果圖：
以下是源碼：
1 <!doctype html>
2 <html>
3 <head>
4 <title>HTML5 隨機彈跳的小球-柯樂義
</title>
5 <style>
6 body{
7 font-family: 微軟雅黑;
8 }
9 body,h1{
10 margin:0;
11 }
12 canvas{
13 display:block;margin-left: auto;margin-right: auto;
14 border:1px solid #DDD;
15 background: -webkit-linear-gradient(top, #222,#111);
16 }
17 </style>
18 </head>
19 <body>
20 <h1>柯樂義 HTML5特效 隨機彈跳的小球
</h1>
21 <div>請使用支持HTML5的瀏覽器開打本頁。
<a href="http://keleyi.com/a/bjad/tc1y11dy.htm" target="_blank">原文
</a> <button id="stop-keleyi-com">暫停
</button>
22 <button id="run-keleyi-com">繼續(xù)
</button>
23 <button id="addBall-keleyi-com">增加小球
</button> <button onclick="javascript:window.location.reload();">刷新
</button>
24 <br />每次刷新頁面的小球大小，顏色，運動路線，都是新的，可以點擊上面各個按鈕看看效果。
25 </div>
26 <canvas id="canvas-keleyi-com" >
27
28 </canvas>
29
30 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
31 <script type="text/javascript">
32 var nimo = {
33 aniamted: null,
34 content: null,
35 data: {
36 radiusRange: [5, 20],
37 speedRange: [-5, 5],
38 scrollHeight: null,
39 scrollWdith: null
40 },
41 balls: [],
42 ele: {
43 canvas: null
44 },
45 fn: {
46 creatRandom: function (startInt, endInt) {//生產(chǎn)隨機數(shù)
47 var iResult;
48 iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1)));
49 return iResult
50 },
51 init: function () {
52 nimo.data.scrollWdith = document.body.scrollWidth;
53 nimo.data.scrollHeight = document.body.scrollHeight;
54 nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-com');
55 nimo.content = nimo.ele.canvas.getContext('2d');
56 nimo.ele.canvas.width = nimo.data.scrollWdith - 50;
57 nimo.ele.canvas.height = nimo.data.scrollHeight - 100;
58 },
59 addBall: function () {
60 var aRandomColor = [];
61 aRandomColor.push(nimo.fn.creatRandom(0, 255));
62 aRandomColor.push(nimo.fn.creatRandom(0, 255));
63 aRandomColor.push(nimo.fn.creatRandom(0, 255));
64 var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]);
65 var oTempBall = {
66 coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius),
67 coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius),
68 radius: iRandomRadius,
69 bgColor: 'rgba(' + aRandomColor[0] + ',' + aRandomColor[1] + ',' + aRandomColor[2] + ',0.5)'
70 };
71 oTempBall.speedX = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);
72 if (oTempBall.speedX === 0) {
73 oTempBall.speedX = 1
74 }
75 if (oTempBall.speedY === 0) {
76 oTempBall.speedY = 1
77 }
78 oTempBall.speedY = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);
79 nimo.balls.push(oTempBall)
80 },
81 drawBall: function (bStatic) {
82 var i, iSize;
83 nimo.content.clearRect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height)
84 for (var i = 0, iSize = nimo.balls.length; i < iSize; i++) {
85 var oTarger = nimo.balls[i];
86 nimo.content.beginPath();
87 nimo.content.arc(oTarger.coordsX, oTarger.coordsY, oTarger.radius, 0, 10);
88 nimo.content.fillStyle = oTarger.bgColor;
89 nimo.content.fill();
90 if (!bStatic) {
91 if (oTarger.coordsX + oTarger.radius >= nimo.ele.canvas.width) {
92 oTarger.speedX = -(Math.abs(oTarger.speedX))
93 }
94 if (oTarger.coordsX - oTarger.radius <= 0) {
95 oTarger.speedX = Math.abs(oTarger.speedX)
96 }
97 if (oTarger.coordsY - oTarger.radius <= 0) {
98 oTarger.speedY = Math.abs(oTarger.speedY)
99 }
100 if (oTarger.coordsY + oTarger.radius >= nimo.ele.canvas.height) {
101 oTarger.speedY = -(Math.abs(oTarger.speedY))
102 }
103 oTarger.coordsX = oTarger.coordsX + oTarger.speedX;
104 oTarger.coordsY = oTarger.coordsY + oTarger.speedY;
105 }
106 }
107 },
108 run: function () {
109 nimo.fn.drawBall();
110 nimo.aniamted = setTimeout(function () {
111 nimo.fn.drawBall();
112 nimo.aniamted = setTimeout(arguments.callee, 10)
113 }, 10)
114 },
115 stop: function () {
116 clearTimeout(nimo.aniamted)
117 }
118 }
119 }
120 window.onload = function () {
121 nimo.fn.init();
122 var i;
123 for (var i = 0; i < 10; i++) {
124 nimo.fn.addBall();
125 }
126 nimo.fn.run();
127 document.getElementById('stop-kel'+'eyi-com').onclick = function () {
128 nimo.fn.stop()
129 }
130 document.getElementById('run-keley'+'i-com').onclick = function () {
131 nimo.fn.stop()
132 nimo.fn.run()
133 }
134 document.getElementById('addBall-k'+'eleyi-com').onclick = function () {
135 var i;
136 for (var i = 0; i < 10; i++) {
137 nimo.fn.addBall();
138 }
139 nimo.fn.drawBall(true);
140 }
141 }
142 </script>
143 </body>
144 </html> web前端：http://www.cnblogs.com/jihua/p/webfront.html
posted on
2014-02-23 15:14 NET未來之路 閱讀(
...) 評論() 編輯 收藏
轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3561969.html
總結(jié)
以上是生活随笔為你收集整理的HTML5 随机弹跳的小球的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
