<!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五彩小球的更多相关文章

  1. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  2. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. js中小球碰壁反弹

    一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...

  4. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  5. 撩课-Web架构师养成系列第一篇

    前言 Web架构师养成系列共15篇,每周更新一篇,主要分享.探讨目前大前端领域(前端.后端.移动端)企业中正在用的各种成熟的.新的技术.部分文章也会分析一些框架的底层实现,让我们做到知其然知其所以然. ...

  6. Unity3D 5.x 简单实例 - 脚本编写

    1,Vector3 类型变量存储向量坐标值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3 ...

  7. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  8. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

  9. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

随机推荐

  1. tempfile：临时文件系统对象

    介绍 想要安全的创建名字唯一的临时文件,以防止被试图破坏应用或窃取数据的人猜出,这很有难度.tempfile模块提供了多个函数来安全创建临时文件系统资源.TemporaryFile函数打开并返回一个未 ...

  2. Django_01_创建图书管理项目

    在django中,项目的组织结构为一个项目包含多个应用,一个应用对应一个业务模块 示例:创建项目的名称为test1,完成“图书-英雄”信息的维护,创建应用名称为booktest 创建项目:首先进入到虚 ...

  3. __builtin_ _Find_first()

    •int __builtin_ffs (unsigned int x) 返回x的最后一位1的是从后向前第几位,比如7368(1110011001000)返回4. •int __builtin_clz ...

  4. bind9+dlz+mysql连接断开问题

    前言 关于bind-dlz介绍:http://bind-dlz.sourceforge.net/ DLZ(Dynamically Loadable Zones)与传统的BIND9不同,BIND的不足之 ...

  5. 生成器(generator) 详解

    1. 生成器是什么? 利用迭代器,我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成.但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记录,进而才能根据当前状态生成 ...

  6. CentOS7下tftp服务安装配置

    1.软件包安装 root用户或者普通用户使用sudo权限执行如下命令: yum install xinetd tftp tftp-server # root 用户执行 sudo yum install ...

  7. CloseableHttpClient设置超时

    Java开发我们常常需要和第三方系统进行通信,通信的方式有多种,如dubbo方式,webservice,微服务和CloseableHttpClient等方式,常涉及到超时问题,这里主要说的是Close ...

  8. 斑马105SLPlus串口打印二维码

    1.根据说明书调试硬件,校准介质还有色带(很重要),我自己搞了好几天才搞明白. 2.设置好参数,比如打印介质连续.非连续,热敏还是热转质 3.打印机上电后悔自动校准,校准成功后就可以直接通过串口打印, ...

  9. 【Android-GridView控件】 九宫格

    效果图: 1.主界面布局 activity_main.xml GridView的三种属性: android:numColumns="" 每一行显示多少列 android:horiz ...

  10. 【转】pe结构详解

    (一)基本概念 PE(Portable Execute)文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等, 事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是 ...