JS实现的随机乱撞的彩色圆球特效代码
<!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实现的随机乱撞的彩色圆球特效代码的更多相关文章
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 总结下js排序算法和乱序算法
其实本人最怕的就是算法,大学算法课就感觉老师在讲天书,而且对于前端来说,算法在实际的应用中实在是很有限.毕竟算法要依靠大量的数据为基础才能发挥出算法的效率,就浏览器那性能,......是吧,退一万步说 ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- JS实现转动随机数抽奖的特效代码
JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- 一款基础模型的JS打飞机游戏特效代码
<!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...
- 疯狂位图之——位图生成12GB无重复随机乱序大整数集
上一篇讲述了用位图实现无重复数据的排序,排序算法一下就写好了,想弄个大点数据测试一下,因为小数据在内存中快排已经很快. 一.生成的数据集要求 1.数据为0--2147483647(2^31-1)范围内 ...
随机推荐
- 【wx:for】小程序列表渲染的使用说明
wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item,即: {{index}} . {{it ...
- leetcode-汉明距离
汉明距离 两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = ...
- kosaraju求强连通分量
在了解kosaraju算法之前我们先了解一下什么是强连通分量,在有向图中如果两个定点vi,ui存在一条路劲从vi到达ui且也存在一条路劲从ui到达vi那么由ui和vi这两个点构成的图成为强连通图,简洁 ...
- 【机器学习】多项式回归sklearn实现
[机器学习]多项式回归原理介绍 [机器学习]多项式回归python实现 [机器学习]多项式回归sklearn实现 使用sklearn框架实现多项式回归.使用框架更方便,可以少写很多代码. 使用一个简单 ...
- [Data Structures and Algorithms - 1] Introduction & Mathematics
References: 1. Stanford University CS97SI by Jaehyun Park 2. Introduction to Algorithms 3. Kuangbin' ...
- 【转】使用CNPM搭建私有NPM
最近的Node项目中因为数据模型等问题,需要有一个对各个模块进行统一的管理,如果把私有的模型publish到公共的npm不太合适,所以决定使用cnpm搭建一个私有的npm,同时也可以对项目常用的npm ...
- hosts_allow配置了却不生效
hosts_allow配置了却不生效 配置了两台白名单的机器,一台生效一台不生效,google后的结果都是更新libwrap.so 安装openssh等等..(问题还是没有解决) 经过对比发现,原来 ...
- 感谢信——Alpha版
作为Thunder团队的leader,当时担任组长,说实话,确实是头脑一热,可后来,在确定选题时,看着大家都有自己的想法,看着大家都那么踊跃,而我因为性格的原因,总是难以做决定,导致选题这件事就开了几 ...
- Java学习个人备忘录之接口
abstract class AbsDemo { abstract void show1(); abstract void show2(); } 当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类 ...
- 什么是Processing
Processing是一种计算机语言,以JAVA语法为基础,可转化成JAVA程序,不过在语法上简易许多.所有的原始代码及开发环境开放,主要用于艺术.影像.影音的设计与处理. 其次为什么要介绍这款软件呢 ...