<!doctype html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>HTML5学习第5天[乱撞的球]</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>JS实现的随机乱撞的彩色圆球特效代码</h1>

<canvas id="canvas" >

</canvas>

<button id="stop">stop</button>

<button id="run">run</button>

<button id="addBall">addBall</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>

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');

   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').onclick=function(){

  nimo.fn.stop()

 }

 document.getElementById('run').onclick=function(){

  nimo.fn.stop()

  nimo.fn.run()

 }

 document.getElementById('addBall').onclick=function(){

  var i;

  for(var i=0;i<10;i++){

   nimo.fn.addBall();

  }

  nimo.fn.drawBall(true);

 }

}

</script>

</body>

</html>

JS实现的随机乱撞的彩色圆球特效代码的更多相关文章

  1. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  2. 总结下js排序算法和乱序算法

    其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...

  3. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  4. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  5. JS实现转动随机数抽奖的特效代码

    JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...

  6. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  8. 一款基础模型的JS打飞机游戏特效代码

    <!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...

  9. 疯狂位图之——位图生成12GB无重复随机乱序大整数集

    上一篇讲述了用位图实现无重复数据的排序,排序算法一下就写好了,想弄个大点数据测试一下,因为小数据在内存中快排已经很快. 一.生成的数据集要求 1.数据为0--2147483647(2^31-1)范围内 ...

随机推荐

  1. Codeforces Round #495 (Div. 2) Sonya and Matrix

    正常没有正方形的限制下,值为i的点个数4i 那么从0开始遍历,第一个不为4i的值就是min(x, y) 由于对称性我们姑且令x为这个值 我们先列举n*m=t的各种情况 对于一对n, m.我们已经知道n ...

  2. 您的下个中文网站可以使用的5个高质量中文Webfont

    你有没有考虑为什么中文网站的版式风格不像大多数现代英文网站那样丰富?您想了解如何让您的下一个中文网站项目更吸引用户的眼球么?继续往下读吧…… 根据Smashing Magazine进行的一项调查显示  ...

  3. ThinkPHP - 4 - 学习笔记（2015.4.12）

    ThinkPHP D方法 D方法用于实例化自定义模型类,是ThinkPHP框架对Model类实例化的一种封装,并实现了单例模式,支持跨项目和分组调用,调用格式如下:D('[项目://][分组/]模型' ...

  4. Simple Expression

    Description You probably know that Alex is a very serious mathematician and he likes to solve seriou ...

  5. C语言中动态内存的分配（malloc，realloc）

    动态内存分配:根据需要随时开辟,随时释放的内存分配方式.分配时机和释放时机完全由程序员决定,由于没有数据声明,这部分空间没有名字.无法像使用变量或数组那样通过变量名或数组名引用其中的数据,只能通过指针 ...

  6. 软工2017第五周——个人PSP

    10.13 --10.19本周例行报告 1.PSP(personal software process )个人软件过程. 类型 任务 预计时间 开始时间                结束时间 中断时 ...

  7. C语言 命令行参数 函数指针 gdb调试

    . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21551397 | http://www.hanshul ...

  8. Debian常用設置

    1. 更新軟件源 sudo cp /etc/apt/sources.list /etc/apt/sources.list_bak #備份 sudo vi /etc/apt/sources.list / ...

  9. 用glob()函数返回目录下的子文件以及子目录

    glob() 函数返回匹配指定模式的文件名或目录 相对于readdir()和opendir()来说,使用glob()函数会方便很多 代码1: <?php function getfilename ...

  10. matlab中滤波函数

    matlab自带滤波器函数小结(图像处理)   1 线性平滑滤波器 用MATLAB实现领域平均法抑制噪声程序: I=imread(' c4.jpg '); subplot(231) imshow(I) ...