HTML5 随机弹跳的小球

最新推荐文章于 2025-11-12 16:43:07 发布

转载最新推荐文章于 2025-11-12 16:43:07 发布 · 275 阅读

文章标签：

#前端 #javascript #ViewUI

本文介绍了一个使用 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">继续</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>