js五彩小球
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
width: 100%;
overflow: hidden; /*隐藏滚动条，消除小球碰到滚动条出现的窗口闪动*/
}
.content{
width: 100%;
height: 100%;
position: relative;
background: black;
}
.ball{
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="content" id="con"></div>
<script type="text/javascript">
//定义随机函数
function RandomNum(num1,num2){
return Math.floor(Math.random()*(num2-num1+1)+num1);
}
//构造小球函数
function Ball(){
this.ball=document.createElement("div");
var randomNum=RandomNum(20,50);
this.width=randomNum
this.height=randomNum
//如果元素有id名，我们可以直接使用，不用document.get....获取
this.left=RandomNum(0,con.offsetWidth-randomNum);
this.top=RandomNum(0,con.offsetHeight-randomNum);
this.backgroundColor="rgba("+RandomNum(0,255)+","+RandomNum(0,255)+","+RandomNum(0,255)+","+Math.random()+")";//随机颜色
this.tempX=this.left;
this.tempY=this.top;
this.speedx=RandomNum(10,20)-15.5;//后面的小数是保证随机产生的方向有正有负
this.speedy=RandomNum(10,20)-15.5;
}
//画小球的方法
Ball.prototype.draw=function(){
this.ball.style.width=this.width+"px";
this.ball.style.height=this.height+"px";
this.ball.className="ball";
this.ball.style.left=this.tempX+"px";
this.ball.style.top=this.tempY+"px";
this.ball.style.backgroundColor=this.backgroundColor;
con.appendChild(this.ball);
}
//运动函数
Ball.prototype.move=function(){
this.tempX=this.tempX+this.speedx;
this.tempY=this.tempY+this.speedy;
// 判断临界值
if(this.tempX+this.width>=document.body.clientWidth||this.tempX<=0){
this.speedx = -this.speedx;//改变方向
}
if(this.tempY+this.height>=document.body.clientHeight||this.tempY<=0) {
this.speedy = -this.speedy;
}
this.draw();
}
//产生小球
var balls=[];
for(var i=0;i<100;i++){
var ball=new Ball();
balls.push(ball);//生成的小球对象放进数组
}
function start(){
for(var i = 0;i < balls.length;i++) {
balls[i].move();
}
}
window.onload=function(){
setInterval(start,10);//设置定时器
}
</script>
</body>
</html>
js五彩小球的更多相关文章
- js实现小球的弹性碰撞。
前 言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...
- js实现小球碰撞游戏
效果图: 效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- js中小球碰壁反弹
一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...
- Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
- 撩课-Web架构师养成系列第一篇
前言 Web架构师养成系列共15篇,每周更新一篇,主要分享.探讨目前大前端领域(前端.后端.移动端)企业中正在用的各种成熟的.新的技术.部分文章也会分析一些框架的底层实现,让我们做到知其然知其所以然. ...
- Unity3D 5.x 简单实例 - 脚本编写
1,Vector3 类型变量存储向量坐标值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...
- 原生js小球运动
//html代码 <input type="button" value="小球运动" /> <div></div> //js ...
随机推荐
- str 文本函数的调用
方法 说明 S.isdigit() 判断字符串中的字符是否全为数字 S.isalpha() 判断字符串是否全为英文字母 S.islower() 判断字符串所有字符是否全为小写英文字母 S.isuppe ...
- 移动端meta常用的设置
1.qq强制横屏或者竖屏显示 : <meta name="x5-orientation" content="portrait ||andscape&quo ...
- java 值传递还是引用传递
首先看一下这篇文章 -- 跳 这篇文章就进行了大致的介绍,以及一些简单的例子,但是还缺少一个关键的例子: public class QQ { public static void main(Strin ...
- 基于递归的BFS（Level-order）
上篇中学习了二叉树的DFS深度优先搜索算法,这次学习另外一种二叉树的搜索算法:BFS,下面看一下它的概念: 有些抽象是不?下面看下整个的遍历过程的动画演示就晓得是咋回事啦: 了解其概念之后,下面看下如 ...
- R语言简单介绍
R语言 概述 R语言是用于统计分析,图形表示和报告的编程语言和软件环境. R语言由Ross Ihaka和Robert Gentleman在新西兰奥克兰大学创建,目前由R语言开发核心团队开发. R语言的 ...
- Permission denied (publickey,gssapi-keyex,gssapi-with-mic)
当出现警告的时候,恭喜你,你已经离成功很近了. 远程主机这里设为slave2,用户为Hadoop. 本地主机设为slave1 以下都是在远程主机slave2上的配置,使得slave1可以免密码连接到s ...
- lite-monitor 一款基于shell命令的监控系统
介绍 lite-monitor 一款基于shell命令的监控系统,可以根据项目中输出的日志定时输出或者统计输出,并发送钉钉机器人报警消息. lite-monitor能做什么: 定时监控某个服务进程是否 ...
- qt 启动参数 -qws
运行嵌入式程序 在嵌入式QT版本中,程序需要服务器或自己作为服务器程序. 服务器程序构造的方法是构造一个QApplication::GuiServe类型的QApplication对象.或者使用-qws ...
- SimpleDateFormat线程不安全及解决办法(转)
以前没有注意到SimpleDateFormat线程不安全的问题,写时间工具类,一般写成静态的成员变量,不知,此种写法的危险性!在此讨论一下SimpleDateFormat线程不安全问题,以及解决方法. ...
- 享元模式（Flyweight）---结构型
1 基础知识 定义:提供了减少对象数量从而改善应用所需的对象结构的方式.特征:运用共享技术有效支持大量细粒度的对象. 本质:分离与共享. 使用场景: (1)如果一个应用程序使用了大量的细粒度对象,可以 ...