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 ...
随机推荐
- 【SpringBoot】Web开发
一.简介 1.1 引入SpringBoot模块 1.2 SpringBoot对静态资源的映射规则 二.模版引擎 2.1 简介 2.2 引入thymeleaf 2.3 Thymeleaf使用 一.简介 ...
- RxJava事件流变换者--操作符
对于Rxjava来说,操作符是它的一个非常重要的概念,如官网: 而上节上也贴了一下都有哪些操作符,其实还不少,所以有必要仔细学习一下关于操作符这块的东东,那操作符在Rxjava中扮演着什么样的角色呢, ...
- CAP理论概述
CAP理论 CAP原则,指在一个分布式系统中,Consistency(一致性).Availability(可用性).Partitiontolerance(分区容错性),三者不可同时拥有. 一致性(C) ...
- 长春理工大学第十四届程序设计竞赛A Rubbish——并查集&&联通块
题目 链接 题意:在 $10^5 \times 10^5$ 的大网格上,给出 $n$ 的格点的坐标,求联通块数(上下左右及对角线都认为相邻) 分析 DFS需要遍历网格的每个格点,可能会超时? 初始化时 ...
- [codeforces792C][dp]
https://codeforc.es/contest/792/problem/C C. Divide by Three time limit per test 1 second memory lim ...
- 题解 [51nod1607] 卷积和
题面 解析 神仙LZF随机找出的毒瘤题. 一开始读题过于草率导致\(naive\)了. step 1 看上去特别像数位DP(实际上也有一点). 先预处理出有\(i\)位的数(最高位不为\(0\))的数 ...
- nginx配置项
try_files location / { try_files $uri $uri/ /index.php?$query_string; } 当用户请求 http://host/instance时, ...
- php判断文件是否为txt文件
可以使用pathinfo方法来通过后缀名进行判断文件类型. /** * 获取文件后缀(如果文件名为11.11,11不是后缀,会默认11为后缀) * $file string 文件路径或者文件名 */ ...
- 两种dp模型
两个常见模型 bzoj 4321 题意:编号为1~n的人排成一排,问有多少种排法使得任意相邻两人的编号之差不为1或-1. n<=1000 排列计数问题:考虑把数从小到大插入的过程进行dp. 设 ...
- Mybatis源码学习之事务管理(八)
简述 在实际开发中,数据库事务的控制是一件非常重要的工作,本文将学习Mybatis对事务的管理机制.在Mybatis中基于接口 Transaction 将事务分为两种,一种是JdbcTransacti ...