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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js给selected添加options的方法
May 06 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
TypeScript入门-接口
Mar 30 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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缓存的详解
2013/05/15 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
浅析JS运动
2015/12/28 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
详解vue后台系统登录态管理
2019/04/02 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
求职简历推荐信范文
2013/12/02 职场文书
善意的谎言事例
2014/02/15 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
总账会计岗位职责
2015/04/02 职场文书
结婚纪念日感言
2015/08/01 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
利用python进行数据加载
2021/06/20 Python