随机生成气泡碰撞（原生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 ...
随机推荐
- MySQL性能优化（六）-- using filesort，in和exists，慢查询，mysqldumpslow
一.order by产生using filesort详解 1.首先建表和索引(以下使用的sql版本是5.5.54) /*课程表*/ create table course( id int primar ...
- WebSphere和IHS的安装
环境:CentOS6.5, IP :192.168.0.91 hostname: IHS 1.下载Installation Manage安装包 URL:http://www.ibm.com/devel ...
- Set集合遍历方式
for(String str : set) { System.out.println(str); } for (Iterator iter = set.iterator(); iter.hasNext ...
- C++Primer 异常处理
异常是指存在于运行时的反常行为,这些行为超出了函数正常功能的范围. 检测出问题的部分发出某信号表明程序遇到了故障,而且信号的发出方无须知道故障将在何处得到解决. 异常处理机制为程序中异常检测和异常处理 ...
- poj_3977 折半枚举
题目大意 给定N(N<=35)个数字,每个数字都<= 2^15. 其中一个或多个数字加和可以得到s,求出s的绝对值的最小值,并给出当s取绝对值最小值时,需要加和的数字的个数. 题目分析 需 ...
- 原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小
网上搜的资料,源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- css3-巧用选择器 “:target”
今天(昨天)又发现一个知识盲区 css3的:target标签,之前学习的时候就是一眼扫过,说是认识了,但其实也就记了三分钟,合上书就全忘光了. 直到昨天,遇到一个有意思的题目,用css3新特性做一个类 ...
- \r\n和\n的区别
写Java代码的时候习惯用\r\n换行,这样可移植性比较好但是,在UVa - 160中就出现了错误,来看看是为什么吧. http://bbs.csdn.net/topics/220033879
- 使用servlet3.0提供的API来进行文件的上传操作
servlet 3.0针对文件上传做了一些优化,提供了一些更加人性化的API可以直接在request中的到文件的名称.文件size,MIME类型,以及用InputStream表示的文件流的信息 @Re ...
- 【BZOJ3958】[WF2011]Mummy Madness 二分+扫描线+线段树
[BZOJ3958][WF2011]Mummy Madness Description 在2011年ACM-ICPC World Finals上的一次游览中,你碰到了一个埃及古墓. 不幸的是,你打开了 ...