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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
详解JS中的attribute属性
Apr 25 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
php文件包含的几种方式总结
2019/09/19 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
web打印小结
2017/01/11 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python用户自定义异常的实现
2020/12/25 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
临床医学专业毕业生的自我评价
2013/10/17 职场文书
社区七一党员活动方案
2014/01/25 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2014年法务工作总结
2014/12/11 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
Python3的进程和线程你了解吗
2022/03/16 Python
Python字符串格式化方式
2022/04/07 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python