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 ...
随机推荐
- validform 自定义校验
validform虽然很强大,但是依然不能满足我们各种奇葩的校验,这是时候就需要我们自己去手写. vaildform 也是基于jq的,正常我们需要引入5个文件 supply 是我们自定义方法的js文件 ...
- CDH5.16.1的agent启动报错:ERROR Error, CM server guid updated, expected d9bcadb4-f983-41b8-a667-66760f47bc91, received a67f5efa-8473-4f6a-94d6-231d1f432ef0
1 详细错误 0/Oct/2019 14:56:13 +0000] 28577 MainThread agent ERROR Error, CM server guid updated, expect ...
- Django—model系统:ORM之其他骚操作
Django ORM执行原生SQL # extra # 在QuerySet的基础上继续执行子语句 # extra(self, select=None, where=None, params=None, ...
- EasyUI中取的DataGrid中选中行数据
dataGrid中显示列:ItemID,ItemCode,ItemName,Note 一.选中一行 var selRow = $('#dataGrid').datagrid('getSelected' ...
- C++STL库常用函数用法
开学就要上OOP了.....感觉十分萌萌哒- -! 整理自<ACM程序设计>,本文为转载(原文地址) 迭代器(iterator) 个人理解就是把所有和迭代有关的东西给抽象出来的,不管是数组 ...
- pyltp安装
第一步:下载wheel文件 第二步:进入该文件的文件夹 第三步:pip install wheel文件名 注意:python的安装版本必须和pyltp的版本相同,我这版本都是pyhton3.6.之前p ...
- Spring-简介-IOC理论推导
1.Spring 1.1.简介 Spring:春天----->给软件行业带来了春天! 2002,首次推出了Spring框架的雏形:interface21框架! Spring框架即以interfa ...
- tensorflow 更新出现HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.
pip install --upgrade tensorflow --default-timeout=1000
- Load store and memoryless
metal https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/MTLBestPractice ...
- 中文录入问题 转载自:http://blog.csdn.net/ichsonx/article/details/8625925
2.1中文录入问题 默认安装的msysgit的shell环境中无法输入中文,为了能在shell界面输入中文,需要修改配置文件/etc/inputrc,增加或修改相关配置如下: #disable/ena ...