JS实现随机乱撞彩色圆球特效的方法


Posted in Javascript onMay 05, 2015

本文实例讲述了JS实现随机乱撞彩色圆球特效的方法。分享给大家供大家参考。具体实现方法如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS实现的随机乱撞的彩色圆球特效代码</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="jquery-1.6.2.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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 星级评分效果(手写)
Dec 24 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
Angular 路由route实例代码
Jul 12 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
JS实现滑动插件
Jan 15 Javascript
jquery实现图片随机排列的方法
May 04 #Javascript
jquery实现的美女拼图游戏实例
May 04 #Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php析构函数的具体用法小结
2014/03/11 Javascript
javascript截取字符串小结
2015/04/28 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python 生成器协程运算实例
2017/09/04 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
测量实习生自我鉴定
2013/09/19 职场文书
门卫岗位安全职责
2013/12/13 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
农村党支部先进事迹
2014/01/14 职场文书
早读迟到检讨书
2014/01/24 职场文书
家长对小学生的评语
2014/01/28 职场文书
授权委托书怎么写
2014/04/03 职场文书
政治学求职信
2014/06/03 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android