<!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. Linux命令应用大词典-第24章 任务计划

    24.1 contab:针对个人用户维护crontab文件

  2. 关于Python 中的 if 语句

    学习Python,最开始我们都是先从函数学起,Python教程中有很多函数,if算是其中之一. 可能最为人所熟知的编程语句就是 if 语句了.例如: >>> >>> ...

  3. linux学习总结----mongoDB总结

    dbhelper.py 用户登录和注册(加密算法) 加密导包 import hashlib 或者使用Md5 加密 MongoDB ->JSON service mysql start servi ...

  4. 245. Subtree【LintCode java】

    Description You have two very large binary trees: T1, with millions of nodes, and T2, with hundreds ...

  5. 【springmvc+mybatis项目实战】杰信商贸-4.maven依赖+PO对+映射文件

    上一篇我们附件的增删改查功能全部完成.但是我们的附件有一个字段叫做“类型”(ctype),这里我们要使用数据字典,所以对于这一块我们要进行修改. 首先介绍一下数据字典 数据字典它是一个通用结构,跟业务 ...

  6. 数据库Mysql的学习(三)-各种约束

    删除数据库表 drop table [if exists] 表一,表二.....; 表分区:比如图书信息表有1000万个图书信息,如何优化他,其中一种方式就是表分区.就是把一张表的数据分成多个区块,这 ...

  7. Appium ——Android KEYCODE键值：

    Python下语法: driver.keyevent(键值) 电话按键: 键名 描述 键值 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME ...

  8. Ubuntu—安装并运行sublime

    step1 到官网看看 https://www.sublimetext.com/3 step2 根据版本选择,我的是32位的 step3 ubuntu终端安装 (1)切换目录 -$ cd /opt  ...

  9. vector：动态数组

    vector是C++标准模板库中的部分内容,中文偶尔译作“容器”,但并不准确.它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存 ...

  10. RNN概述-深度学习 -神经网络

    一 RNN概述    前面我们叙述了BP算法, CNN算法, 那么为什么还会有RNN呢?? 什么是RNN, 它到底有什么不同之处? RNN的主要应用领域有哪些呢?这些都是要讨论的问题. 1) BP算法 ...