随机生成气泡碰撞（原生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 ...
随机推荐
- Dubbo（二） -- Simple Monitor
一.简介 dubbo-monitor-simple是dubbo提供的简单监控中心,可以用来显示接口暴露,注册情况,也可以看接口的调用明细,调用时间等. Simple Monitor挂掉不会影响到Con ...
- docker 配置文件：/etc/docker/daemon.json
/etc/docker/daemon.json 是 docker 的配置文件,默认是没有的,需要我们手动创建,可配置项如下: [root@localhost ~]$ vim /etc/docker/d ...
- Putty的安装和使用
Putty是最简单易用的SSH工具,详细介绍其安装和使用 直接在百度里搜索Putty,可以找到百度软件中心,或者官方网站: PuTTY Download Page. 进入官方网站,直接可执行文件装 ...
- Spring学习笔记--构造器注入
之前讲到的名为"duke"的bean有一个私有成员变量beanBags代表这个杂技师bean的一次性能够抛出的最多的数量,Juggler有一个构造函数,构造函数的第一个参数(这里只 ...
- EL表达式格式化日期时间
1.首先引入标签库 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> ...
- C++Primer 异常处理
异常是指存在于运行时的反常行为,这些行为超出了函数正常功能的范围. 检测出问题的部分发出某信号表明程序遇到了故障,而且信号的发出方无须知道故障将在何处得到解决. 异常处理机制为程序中异常检测和异常处理 ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- poj_3261 后缀数组
题目大意 给出一个数字串,找出其中至少重复K次的最长的子串长度. 题目分析 直接用后缀数组来求解,限制height[i]的长度来对排好序的后缀进行分组(这种方法经常在字符串问题中被使用). 先 ...
- java基础---->多个排序的拓展
根据一些特定的规则,我们可以利用java的反射机制做到很有趣的封装. java的排序封装 一.定义一些comparator AmountComparatorAsc:amount升序 package c ...
- shell ln
功能:ln命令为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在某个固定的目录,放上该文件,然后在 ...