当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery开发如何制作随机弹跳的小球特效

jquery开发如何制作随机弹跳的小球特效

2019年03月31日  | 移动技术网IT编程  | 我要评论

jquery开发如何制作随机弹跳的小球特效以下是：


 <!doctype html>
 <html>
 <head>
 <title>html5 随机弹跳的小球</title>
 <style>
 body{
 font-family: 微软雅黑;   
 }
 body,h1{
 margin:0;
 }
 canvas{
 display:block;margin-left: auto;margin-right: auto;
 border:1px solid #ddd;   
 background: -webkit-linear-gradient(top, #222,#111);
 }   
 </style>
 </head>
 <body>
 <h1>html5特效 随机弹跳的小球</h1>
 <p>请使用支持html5的开打本页。 <button id="stop-keleyi-com">暂停</button>
 <button id="run-keleyi-com">继续</button>
 <button id="addball-keleyi-com">增加小球</button> <button onclick="javascript：window.location.reload();">刷新</button>
 <br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。
 </p>
 <canvas id="canvas-keleyi-com" >
 </canvas>
 <script type="text/javascript" src="https://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
 var nimo = {
 aniamted: null,
 content: null,
 data: {
 radiusrange: [5, 20],
 speedrange: [-5, 5],
 scrollheight: null,
 scrollwdith: null
 },
 balls: [],
 ele: {
 canvas: null
 },
 fn: {
 creatrandom: function (startint, endint) {//生产随机数
 var iresult;
 iresult = startint + (math.floor(math.random() * (endint - startint + 1)));
 return iresult
 },
 init: function () {
 nimo.data.scrollwdith = document.body.scrollwidth;
 nimo.data.scrollheight = document.body.scrollheight;
 nimo.ele.canvas = document.getelementbyid('canvas-ke'+'leyi-com');
 nimo.content = nimo.ele.canvas.getcontext('2d');
 nimo.ele.canvas.width = nimo.data.scrollwdith - 50;
 nimo.ele.canvas.height = nimo.data.scrollheight - 100;
 },
 addball: function () {
 var arandomcolor = [];
 arandomcolor.push(nimo.fn.creatrandom(0, 255));
 arandomcolor.push(nimo.fn.creatrandom(0, 255));
 arandomcolor.push(nimo.fn.creatrandom(0, 255));
 var irandomradius = nimo.fn.creatrandom(nimo.data.radiusrange[0], nimo.data.radiusrange[1]);
 var otempball = {
 coordsx: nimo.fn.creatrandom(irandomradius, nimo.ele.canvas.width - irandomradius),
 coordsy: nimo.fn.creatrandom(irandomradius, nimo.ele.canvas.height - irandomradius),
 radius: irandomradius,
 bgcolor: 'rgba(' + arandomcolor[0] + ',' + arandomcolor[1] + ',' + arandomcolor[2] + ',0.5)'
 };
 otempball.speedx = nimo.fn.creatrandom(nimo.data.speedrange[0], nimo.data.speedrange[1]);
 if (otempball.speedx === 0) {
 otempball.speedx = 1
 }
 if (otempball.speedy === 0) {
 otempball.speedy = 1
 }
 otempball.speedy = nimo.fn.creatrandom(nimo.data.speedrange[0], nimo.data.speedrange[1]);
 nimo.balls.push(otempball)
 },
 drawball: function (bstatic) {
 var i, isize;
 nimo.content.clearrect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height)
 for (var i = 0, isize = nimo.balls.length; i < isize; i++) {
 var otarger = nimo.balls[i];
 nimo.content.beginpath();
 nimo.content.arc(otarger.coordsx, otarger.coordsy, otarger.radius, 0, 10);
 nimo.content.fillstyle = otarger.bgcolor;
 nimo.content.fill();
 if (!bstatic) {
 if (otarger.coordsx + otarger.radius >= nimo.ele.canvas.width) {
 otarger.speedx = -(math.abs(otarger.speedx))
 }
 if (otarger.coordsx - otarger.radius <= 0) {
 otarger.speedx = math.abs(otarger.speedx)
 }
 if (otarger.coordsy - otarger.radius <= 0) {
 otarger.speedy = math.abs(otarger.speedy)
 }
 if (otarger.coordsy + otarger.radius >= nimo.ele.canvas.height) {
 otarger.speedy = -(math.abs(otarger.speedy))
 }
 otarger.coordsx = otarger.coordsx + otarger.speedx;
 otarger.coordsy = otarger.coordsy + otarger.speedy;
 }
 }
 },
 run: function () {
 nimo.fn.drawball();
 nimo.aniamted = settimeout(function () {
 nimo.fn.drawball();
 nimo.aniamted = settimeout(arguments.callee, 10)
 }, 10)
 },
 stop: function () {
 cleartimeout(nimo.aniamted)
 }
 }
 }
 window.onload = function () {
 nimo.fn.init();
 var i;
 for (var i = 0; i < 10; i++) {
 nimo.fn.addball();
 }
 nimo.fn.run();
 document.getelementbyid('stop-kel'+'eyi-com').onclick = function () {
 nimo.fn.stop()
 }
 document.getelementbyid('run-keley'+'i-com').onclick = function () {
 nimo.fn.stop()
 nimo.fn.run()
 }
 document.getelementbyid('addball-k'+'eleyi-com').onclick = function () {
 var i;
 for (var i = 0; i < 10; i++) {
 nimo.fn.addball();
 }
 nimo.fn.drawball(true);
 }
 }
 </script>
 </body>
 </html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网