原生js生成气泡碰撞,随机生成颜色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0}#main {margin: 0 auto;position: relative;background-color: #fff}#main div {position: absolute;width: 100px;height: 100px;overflow: hidden;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;background-color: chartreuse;/* background-image: url("img/blue.png");background-repeat: no-repeat; */}#red {display: block;width: 120px;height: 120px;position: absolute;left: calc(50% - 60px);top: calc(50% - 60px);background-color: brown;background-size: cover;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%}</style>
</head><body><div id="main"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><script>var main = document.getElementById('main');  //获取运动边界和10个divvar circles = main.getElementsByTagName('div');// 每次Math.random调用都会产生全新的随机数;console.log('-------', main.getElementsByTagName('div'));// circles.forEach(element => {//     // element.style.backgroundColor = random_color;//     element.style.cssText = "background:" + random_color// });for (let i = 0; i < circles.length; i++) {var r = parseInt(256 * Math.random()); //小于 255 254.xxxxxxvar g = parseInt(256 * Math.random());var b = parseInt(256 * Math.random()); // 随机颜色 ;  => 字符串;var random_color = "rgb(" + r + "," + g + "," + b + ")";circles[i].style.cssText = "background:" + random_color;}var container = [];//存放10个球的每个具体信息，包括坐标，速度等值var arr = [];var maxW = 0;//初始化运动的最大宽和高，初始定义0var maxH = 0;var cwidth = circles[0].offsetWidth; //小球的直径//根据浏览器窗口的大小自动调节小球的运动空间window.onresize = function () {// maxW = window.innerWidth - circles[0].clientWidth;  //为了让小球不卡在浏览器边缘，maxW = 500 - circles[0].clientWidth;  //为了让小球不卡在浏览器边缘，// maxH = window.innerHeight - circles[0].clientHeight;    // 所以要减去自身的宽高maxH = 500 - circles[0].clientHeight;    // 所以要减去自身的宽高main.style.width = 500 + 'px';   //将容器的宽高和文档显示区宽高相等main.style.height = 500 + 'px';};onresize();//数组对象的初始化for (var i = 0; i < circles.length; i++) {arr = [];arr.x = Math.floor(Math.random() * (maxW + 1));//初始x坐标arr.y = Math.floor(Math.random() * (maxH + 1));//初始y坐标arr.cx = arr.x + circles[0].offsetWidth / 2;//圆心x坐标arr.cy = arr.y + circles[0].offsetHeight / 2;//圆心y坐标arr.movex = Math.floor(Math.random() * 2);//x轴移动方向arr.movey = Math.floor(Math.random() * 2);//y轴移动方向// arr.speed = 2 + Math.floor(Math.random() * 4);//随机速度arr.speed = 0.5//随机速度arr.timer = null;//计时器arr.index = i;//索引值container.push(arr); //存放所有的属性值circles[i].style.left = arr.x + 'px';//小球位置初始化circles[i].style.top = arr.y + 'px';}//碰撞函数function crash(a) {var ball1x = container[a].cx; //在数组中任意球的圆心坐标var ball1y = container[a].cy;//思路：先随便拿一个球，然后遍历所有球，拿这个球和所有球的圆心距离比较for (var i = 0; i < container.length; i++) {if (i !== a) { //判断取出来的球不是本身，才能和其他球进行距离判断var ball2x = container[i].cx; //将其他球的圆心坐标赋值给球2var ball2y = container[i].cy;//圆心距 求两个点之间的距离,开平方var distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));if (distence <= cwidth) { //球心距离和求直径比较if (ball1x > ball2x) { //当前位于未知求的右方if (ball1y > ball2y) {//预设未知球撞当前球，然后当前球改变运动container[a].movex = 1; //1表示为正值，对应的右和下container[a].movey = 1;//0表示为负值，对应的左和上} else if (ball1y < ball2y) {container[a].movex = 1;container[a].movey = 0;} else {container[a].movex = 1;}} else if (ball1x < ball2x) {if (ball1y > ball2y) {container[a].movex = 0;container[a].movey = 0;} else if (ball1y < ball2y) {container[a].movex = 0;container[a].movey = 1;} else {container[a].movex = 0;}} else {if (ball1y > ball2y) {container[a].movey = 1;} else if (ball1y < ball2y) {container[a].movey = 0;}}}}}}//移动函数function move(balls) { //每个球单独有定时器balls.timer = setInterval(function () {if (balls.movex === 1) { //如果往右跑，则一直加速度，碰到边界，改为反方向运动balls.x += balls.speed;if (balls.x + balls.speed >= maxW) {//防止小球出界balls.x = maxW;balls.movex = 0;//小球运动方向发生改变}} else {balls.x -= balls.speed; // 1和0表示正反方向if (balls.x - balls.speed <= 0) {balls.x = 0;balls.movex = 1;}}if (balls.movey === 1) {balls.y += balls.speed;if (balls.y + balls.speed >= maxH) {balls.y = maxH;balls.movey = 0;}} else {balls.y -= balls.speed;if (balls.y - balls.speed <= 0) {balls.y = 0;balls.movey = 1;}}balls.cx = balls.x + circles[0].offsetWidth / 2;//小球圆心等于：运动中x的值加上自身的半径balls.cy = balls.y + circles[0].offsetHeight / 2;circles[balls.index].style.left = balls.x + 'px';//小球相对于屏幕的位置circles[balls.index].style.top = balls.y + 'px';crash(balls.index); //每个小球进行碰撞检测}, 25);}//对每一个小球绑定计时器，让小球动起来for (var i = 0; i < container.length; i++) {move(container[i]);}</script>
</body></html>

原生js生成气泡碰撞,随机生成颜色相关推荐

JS随机生成ID 以及随机生成坐标
随着时间来生成不同ID // 随机生成 ID const idStr = Date.now().toString(36) this.itemObj.id = idStrconsole.log(this ...
【PostgreSQL】GIN索引安装与使用 - 全模糊匹配/数组匹配，PG批量插入上万随机生成数据，随机生成字符串/数组
目录环境拓展库安装生成随机假数据查询使用GIN索引 GIN索引使用条件参考环境 PostgreSQL DBeaver 拓展库安装打开SQL编辑器: 输入命令运行即可: CREATE EX ...
ZedGraph怎样在生成曲线时随机生成不一样的颜色
场景在使用ZedGraph生成多条曲线时为了能区分曲线颜色,要求随机设置曲线颜色. 首先从System.Drawing.Color中获取所有颜色的对象的数组,然后将其顺序打乱随机排序,然后在生成曲线 ...
js 利用Unicode码随机生成中文昵称
前言网上前辈们分享的随机昵称生成方式,都是通过随机获取事先定义的数组内容进行组合来实现随机生成一个类似真名的数据(最近我做的一个项目需求中的,要求随机生成昵称但是不要真名),那这就有点蛋疼了,我总不 ...
java 时间生成字符串_java随机生成时间字符串的方法
本文实例为大家分享了java随机生成时间字符串的具体代码,供大家参考,具体内容如下 package com.wechat.utils; import java.text.SimpleDateForma ...
mysql 随机生成中文名,MySQL随机生成电话号码，邮箱和中文姓名sql
原本系统中数据量有限,还有很多是英文的,老板演示的时候觉得不专业,需要随机生成一些内容,记录一下sql以便重复利用. 1. 随机座机号码 select concat(rpad(CEIL(RAND()* ...
python随机生成正态分布_随机生成正态分布数据
http://www.petroleumcloud.cn/pages/620.html 正态分布,又名高斯分布,是一个非常重要的概率分布.在数学.物理及工程等领域以及统计学的许多方面有着重大的影响力. ...
java随机生成数字(Java随机生成字母)
java里怎么产生1-100的随机数我来说说这个用法 Math.random()这方法会返回一个(0,1)的double值 double a=Math.random(); 那么就a<1 &am ...
python——根据公司名称查找公司地址（批量）、随机生成姓名、随机生成手机号
根据公司名称查找公司地址随机生成姓名随机生成手机号各个功能都已经封装成了独立的方法,直接粘贴使用即可 import requests import re from urllib import p ...
python彩票生成_python3学习--随机生成密码、随机生成彩票号
################随机生成密码##################### 1.写一个函数:函数的功能是生成一批密码,存到文件里面 def gen_password(num): #num ...

原生js生成气泡碰撞,随机生成颜色

原生js生成气泡碰撞,随机生成颜色

原生js生成气泡碰撞,随机生成颜色相关推荐

最新文章

热门文章