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 08 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Bootstrap前端开发案例二
2016/06/17 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python3 打开外部程序及关闭的示例
2018/11/06 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python中shell执行知识点
2020/05/06 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
介绍一下linux的文件系统
2015/10/06 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
农村党员干部承诺书
2015/05/04 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android