HTML5 随机弹跳的小球

原文: HTML5 随机弹跳的小球

查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm

Chrome效果图:
HTML5 随机弹跳的小球

火狐效果图:
HTML5 随机弹跳的小球


以下是源码:

  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">继续</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) {//生产随机数

 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

你可能感兴趣的:(html5)