<!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. JAVA Map 之元素定位，冲突碰撞

    基本特性: 维持健值对的集合接口,健不可以重复,每一个健只能映射到一个值. Map替代了原来的虚拟类Directory. Map提供了三种集合视角,keys(KeySet),values(Values ...

  2. python爬虫基础之一（爬淘宝）

    没想到python如此强大, 今天看一会视频学会了一段python爬虫 这就是我今天学到的内容爬去淘宝网关于书包的一些信息,包括价格, #coding=utf-8 import requests#导入 ...

  3. 407. Plus One【LintCode java】

    Description Given a non-negative number represented as an array of digits, plus one to the number. T ...

  4. KVM嵌套虚拟化

    1. 检查环境 $ grep -E 'svm|vmx' /proc/cpuinfo ~]#  lsmod | grep kvm kvm_intel             170181  0 kvm  ...

  5. FPGA学习-PS2接口

    选自http://m.elecfans.com/article/774143.html

  6. Python中对变量是否为None的判断

    三种主要的写法有: 第一种:if X is None; 第二种:if not X: 当X为None,  False, 空字符串"", 0, 空列表[], 空字典{}, 空元组()这 ...

  7. MVC4+EF5 edmx代码分析

    本文分析Entity Framework(EF)从数据库自动生成的模型文件代码(扩展名为edmx). 一. 概述 本文使用的数据库结构尽量简单,只有2个表,一个用户表和一个分公司表(相当于部门表),一 ...

  8. 最近面试js部分试题总结

    二,JavaScript面试题总结 1,首先是数组去重算法:给一个数组,去掉重复值 (function() { var arr = [1, 2, 3, 3, 4, ]; function unique ...

  9. 使用WCF上传数据

    通过传递Stream对象来传递大数据文件,但是有一些限制: 1.只有 BasicHttpBinding.NetTcpBinding 和 NetNamedPipeBinding 支持传送流数据. 2. ...

  10. java 字符串—数字常用处理

    // 判断一个字符串是否都为数字 public boolean isDigit(String strNum) { return strNum.matches("[0-9]{1,}" ...