随机生成气泡碰撞（原生js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机生成气泡碰撞</title>
<style>
html {
height: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
div.wrap {
height: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
div:not(.wrap) {
border-radius: 50%;
/*-webkit-animation:tanslateAni 5000ms infinite linear alternate;*/
/*transition: all 10000ms linear;*/
}
div:nth-of-type(2) {
-webkit-animation-delay: 2000ms;
}
div:nth-of-type(3) {
-webkit-animation-delay: 4000ms;
}
div:nth-of-type(4) {
-webkit-animation-delay: -1000ms;
}
@-webkit-keyframes tanslateAni {
0% {
-webkit-transform: rotate(10deg) translate3d(0px, 0px, 0)
}
35% {
-webkit-transform: rotate(0deg) translate3d(20px, 0px, 0)
}
70% {
-webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0)
}
100% {
-webkit-transform: rotate(0deg) translate3d(-20px, 0px, 0)
}
}
span {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法（必须放在最后） */
</style>
</head>
<body>
<div class="wrap" id='parent'></div>
<span></span>
</body>
<script>
var elWidth = 110;
var containerWidth;
var color = ['-webkit-repeating-radial-gradient(red, yellow 10%, green 15%)', 'green', 'blue', 'black', 'yellow'];
//随机的颜色
var ballNum = 20;
//var pageHeight=window.screen.height;
var pageHeight = document.body.clientHeight;
//var pageWidth=window.screen.width;
var pageWidth = document.body.clientWidth;
containerWidth = pageWidth;
var sizeRange = 60;
var balls = [];
window.onload = function() {
createBalls(elWidth + sizeRange, pageWidth, pageHeight, ballNum);
setInterval(function() { ballHit(balls, pageWidth, pageHeight) }, 30)
}
//生成虚拟网格
function createTable(ballWidth, pageWidth, pageHeight) {
var col = Math.floor(pageWidth / ballWidth);
var marginH = pageWidth % ballWidth;
var marginV = pageHeight % ballWidth;
var row = Math.floor(pageHeight / ballWidth);
var total = col * row;
var ballMap = [];
for(var i = 0; i < total; i++) {
//网格map存入一维数组 //top、left值有较大偏差原因：/、%运算为小数，与Java不同
ballMap[i] = { left: marginH / 2 + Math.floor(i % col) * ballWidth, top: marginV / 2 + Math.floor(i / col) * ballWidth }
}
return ballMap;
}
//生成小球
var spaceIndex = 25;
function createBalls(ballWidth, pageWidth, pageHeight, ballNum) {
var ballMap = createTable(ballWidth, pageWidth, pageHeight);
var range = ballMap.length
if(ballNum >= range - spaceIndex) {
ballNum = range - spaceIndex;
}
var ballsData = [];
var ballIndex;
ballIndex = getRandom(0, range, ballNum);
for(var i = 0; i < ballIndex.length; i++) { ballsData[i] = ballMap[ballIndex[i]]; } renderBalls(ballsData, ballNum);
} //渲染小球
function renderBalls(ballData, ballNum) {
for(var i = 0; i < ballNum; i++) {
var divBall = createEl('div')
//（待改进)
balls.push({
el: divBall,
left: ballData[i].left,
top: ballData[i].top,
vx: Math.random() * 6 - 3,
vy: Math.random() * 6 - 3,
raduis: parseInt(divBall.style.width) / 2
});
}
for(var j = 0; j < ballNum; j++) {
balls[j].el.style.left = balls[j].left + 'px';
balls[j].el.style.top = balls[j].top + 'px';
}
} //随机数去重
function noRepeat(arr, newNum, range) {
var isRepeat = false;
for(var i = 0; i < arr.length; i++) {
if(newNum == arr[i]) {
isRepeat = true;
break;
}
}
if(isRepeat) {
newNum = Math.floor(Math.random() * range);
noRepeat(arr, newNum, range);
} else {
return newNum;
}
} //随机数去重工具函数2
function getRandom(min, max, n) {
if(n > (max - min + 1) || max < min) {
return null;
}
var result = [];
var count = 0;
while(count < n) {
var num = Math.floor(Math.random() * (max - min)) + min;
var flag = true;
for(var j = 0; j < n; j++) {
if(num == result[j]) {
flag = false;
break;
}
}
if(flag) {
result[count] = num;
count++;
}
}
return result;
} //随机生成一个dom元素
function createEl(el, text) {
var elment = document.createElement(el);
document.getElementById('parent').appendChild(elment);
var len = Math.ceil(Math.random() * sizeRange);
elment.style.width = len + elWidth + 'px';
elment.style.height = len + elWidth + 'px';
elment.style.background = color[Math.floor(Math.random() * 5)];
elment.style.position = 'absolute';
elment.innerHTML = text || "";
return elment;
}
function moveBall(balls) {
for(var i = 0; i < balls.length; i++) {
balls[i].left += balls[i].vx;
balls[i].top += balls[i].vy;
balls[i].el.style.left = balls[i].left + 'px';
balls[i].el.style.top = balls[i].top + 'px';
}
}
var spring = 1; //球与球之间弹性系数
var bounce = -1; //球与边缘之间弹性系数
function ballHit(balls, pageWidth, pageHeight) {
//检测边缘
for(var i = 0; i < balls.length; i++) {
if(balls[i].left <= 0 || balls[i].left >= pageWidth - 2 * balls[i].raduis) {
balls[i].vx *= bounce;
}
if(balls[i].top <= 0 || balls[i].top >= pageHeight - 2 * balls[i].raduis) {
balls[i].vy *= bounce;
}
}
//检测小球与小球
for(i = 0; i < balls.length; i++) {
var ball1 = balls[i];
ball1.x = ball1.left + ball1.raduis;
ball1.y = ball1.top + ball1.raduis;
for(j = i + 1; j < balls.length; j++) {
var ball2 = balls[j];
ball2.x = ball2.left + ball2.raduis;
ball2.y = ball2.top + ball2.raduis;
dx = ball2.x - ball1.x;
dy = ball2.y - ball1.y;
var dist = Math.sqrt(dx * dx + dy * dy);
var misDist = ball1.raduis + ball2.raduis;
if(dist < misDist) {
var angle = Math.atan2(dy, dx);
tx = ball1.x + Math.cos(angle) * misDist;
ty = ball1.y + Math.sin(angle) * misDist;
ax = (tx - ball2.x) * spring;
ay = (ty - ball2.y) * spring;
ball1.vx -= ax;
ball1.vy -= ay;
ball2.vx += ax;
ball2.vy += ay;
}
}
}
moveBall(balls);
}
</script>
</html>
随机生成气泡碰撞（原生js）的更多相关文章
- js 随机生成姓名、手机号、身份证号、银行卡号
开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的j ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- js随机生成验证码及其颜色
今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- JS随机生成不重复数据的代码分享
JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...
- js 随机生成信用卡号
本文实例讲述了JavaScript随机生成信用卡卡号的方法.分享给大家供大家参考.具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用 ...
- js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
随机推荐
- 改进动态设置query cache导致额外锁开销的问题分析及解决方法-mysql 5.5 以上版本
改进动态设置query cache导致额外锁开销的问题分析及解决方法 关键字:dynamic switch for query cache, lock overhead for query cach ...
- ExtJs 6.0+快速入门，ext-bootstrap.js文件的分析，各版本API下载
ExtJS6.0+快速入门+API下载地址 ExtAPI 下载地址如下,包含各个版本 http://docs.sencha.com/misc/guides/offline_docs.html 1.使用 ...
- 上传控件CSS用图片代替
<style type="text/css"> a.btn {width: 120px;height: 42px;overflow: hidden;display: b ...
- JavaScript 中的陷阱
JavaScript 通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的. “未声明直接简单使用”,指的是不用 ...
- 如何搭建本地WordPress
今天就来介绍一下如何在Windows下搭建本地WordPress. 安装前准备 1.正常的电脑 2.PHPNow http://www.phpnow.org 这里面的PHPNow环境包其实包含了常见 ...
- session.setAttribute和session.getAttribute
网上搜了些资料 ----------------------------------------------------------------------------- B/S架构中,客户端与服务器 ...
- ELK平台介绍
在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自:http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志.应用程序日志和安全 ...
- 【BZOJ2595】[Wc2008]游览计划 斯坦纳树
[BZOJ2595][Wc2008]游览计划 Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行, 每行有 M 个非负整数, 如果该整数为 0, 则该方块为 ...
- 【BZOJ2007】[Noi2010]海拔 对偶图最短路
[BZOJ2007][Noi2010]海拔 Description YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见,可以将YT市看作 一个正方形,每一个区域也可看 ...
- 【BZOJ1096】[ZJOI2007]仓库建设 斜率优化
[BZOJ1096][ZJOI2007]仓库建设 Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司 ...