大量隨機圓球隨機方向移動,原生js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Balls Motions</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: #333;
/* 33~CC, 51~204 */
}
.ball {
width: 100px;
height: 100px;
background: #369;
border-radius: 50%;
position: fixed;
}
</style>
</head>
<body>
<div id="desktop"></div>
<script>
// 屏幕寬高
var maxw = window.innerWidth;
var maxh = window.innerHeight;
// 動態取屏幕寬高值
function winfo() {
maxw = window.innerWidth;
maxh = window.innerHeight;
}
window.onresize = winfo;
// 隨機函數
function rand(a, b) {
return Math.round(Math.random() * (b - a) + a);
}
var max = 500;
// 添加小球（對象）標簽
// var str = (new Array(max + 1)).join(‘<div class="ball"></div>‘);
// for (var i = 0; i < max; i++) {
// str += ‘<div class="ball"></div>‘;
// }
// document.querySelector(‘#desktop‘).innerHTML = str;
document.querySelector(‘#desktop‘).innerHTML =
(new Array(max + 1)).join(‘<div class="ball"></div>‘);
var objs = document.querySelectorAll(‘.ball‘);
var balls = [];
objs.forEach(function (el) {
var d = rand(5, 20);
balls.push({
obj: el,
d: d,
x: rand(0, maxw - d),
y: rand(0, maxh - d),
dx: rand(0, 1) ? 1 : -1,
dy: rand(0, 1) ? 1 : -1,
sx: rand(2, 10),
sy: rand(2, 10),
bg:
"rgba(" +
rand(51, 204) + ", " +
rand(51, 204) + ", " +
rand(51, 204) + ", " +
rand(30, 80) / 100 + ")"
});
});
console.log("all balls:", balls);
// balls[0].obj.style.left = balls[0].x + ‘px‘;
// balls[0].obj.style.top = balls[0].y + ‘px‘;
// balls[0].obj.style.background = balls[0].bg;
// 運動
function motion() {
//balls.forEach(function (el, index, arr) {
for (var i = 0; i < balls.length; i++) {
var el = balls[i];
el.x += el.dx * el.sx;
el.y += el.dy * el.sy;
if (el.x > maxw && el.dx > 0) {
el.x = -el.d;
el.dy = rand(0, 1) ? 1 : -1;
el.sx = rand(1, 5);
}
if (el.x < -100 && el.dx < 0) {
el.x = maxw;
el.dy = rand(0, 1) ? 1 : -1;
el.sx = rand(1, 5);
}
if (el.y > maxh && el.dy > 0) {
el.y = -el.d;
el.dx = rand(0, 1) ? 1 : -1;
el.sy = rand(1, 5);
}
if (el.y < -100 && el.dy < 0) {
el.y = maxh;
el.dx = rand(0, 1) ? 1 : -1;
el.sy = rand(1, 5);
}
// 設置外觀
el.obj.style.width = el.d + ‘px‘;
el.obj.style.height = el.d + ‘px‘;
el.obj.style.left = el.x + ‘px‘;
el.obj.style.top = el.y + ‘px‘;
el.obj.style.background = el.bg;
}
// });
// 預約下次
setTimeout(motion, 0);
}
motion();
</script>
</body>
</html>
大量隨機圓球隨機方向移動,原生js