<!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. MVC数据的注册及验证简单总结

    一.注解 注解是一种通用机制,可以用来向框架注入元数据,同时,框架不只驱动元数据的验证,还可以在生成显示和编辑模型的HTML标记时使用元数据. 二.验证注册的使用 1.Require:属性为Null或 ...

  2. zookeeper应用：屏障、队列、分布式锁

    zookeeper工具类: 获取连接实例:创建节点:获取子节点:设置节点数据:获取节点数据:访问控制等. package org.windwant.zookeeper; import org.apac ...

  3. Memcached命令-存储命令-查找命令-清理命令

    Memcached set 存储命令 Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数 ...

  4. Attention注意力机制介绍

    什么是Attention机制 Attention机制通俗的讲就是把注意力集中放在重要的点上,而忽略其他不重要的因素.其中重要程度的判断取决于应用场景,拿个现实生活中的例子,比如1000个人眼中有100 ...

  5. ZOJ 3229 Shoot the Bullet（有源汇的上下界最大流）

    Description Gensokyo is a world which exists quietly beside ours, separated by a mystical border. It ...

  6. Python 字符串与基本语句

    Python特点 python中没有变量的声明 语句结束后没有分号 严格要求缩进 支持很长很长的大数运算(直接在Idle中输入即可) 用"#"来注释 BIF:Bulit-in fu ...

  7. Java中Collection和Collections的区别（转载）

    转载来源:http://www.cnblogs.com/dashi/p/3597937.html 1.java.util.Collection 是一个集合接口(集合类的一个顶级接口).它提供了对集合对 ...

  8. eg_1

    1. 编写一个程序,输出一个字符串中的大写英文字母个数,小写英文字母个数以及非英文字母个数. 第一种方法: public class Test { public static void main(St ...

  9. #Leetcode# 700. Search in a Binary Search Tree

    https://leetcode.com/problems/search-in-a-binary-search-tree/ Given the root node of a binary search ...

  10. ibatsi学习总结

    学习来源:黑马程序员 先总结一下遇到的问题 问题1:1,resultMap 可以不写,比如配置1 配置1: <typeAlias alias="puser" type=&qu ...