Code exercise series, used for review and review
1. Ball movement:
Among them, setInterval can be replaced by requestAnimationFrame;
function anime() {// Perform page refresh frequency every 16 milliseconds
requestAnimationFrame(anime);
}
window.onload = function () {
var arr = [];
init();
function init() {
for (var i = 0; i < 30; i++) {
arr.push(createBall(getRandom(10, 20), getRandom(2, 10)));
}
setInterval(animationBall, 16);
}
function animationBall() {
for (var i = 0; i < arr.length; i++) {
arr[i].style.left = arr[i].offsetLeft + arr[i].speedX + 'px';
arr[i].style.top = arr[i].offsetTop + arr[i].speedY + 'px';
if (arr[i].offsetLeft < 0 || arr[i].offsetLeft > arr[i].parentElement.offsetWidth) {
arr[i].speedX = -arr[i].speedX;
}
if (arr[i].offsetTop < 0 || arr[i].offsetTop > arr[i].parentElement.offsetHeight) {
arr[i].speedY = -arr[i].speedY;
}
}
}
function createBall(size, speedX, speedY, parent) {
parent = !parent ? document.body : parent;
var div = document.createElement('div');
setStyle(div, {
'position': 'absolute',
'width': size * 2 + 'px',
'height': size * 2 + 'px',
'borderRadius': size + 'px',
'backgroundColor': setBgColor(),
// 'top': getRandom(0, 500) + 'px',
// 'left': getRandom(0, 500) + 'px'
})
speedY = !speedY ? 5 : speedY;
speedX = !speedX ? 5 : speedX;
div.speedX = speedX;
div.speedY = speedY;
parent.appendChild(div);
return div;
}
function setBgColor() {
return `rgba(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)},${Math.random(0,1)})`;
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function setStyle(elem, style) {
for (var key in style) {
elem.style[key] = style[key];
}
}
function animation() {
for (var i = 0; i < arr.length; i++) {
// 匀速运动
arr[i].style.left = arr[i].offsetLeft + arr[i].speedX + 'px';
arr[i].style.top = arr[i].offsetTop + arr[i].speedY + 'px';
if (arr[i].offsetLeft < 0 || arr[i].offsetLeft >= arr[i].parentElement.offsetWidth) {
arr[i].speedX = -arr[i].speedX;
}
if (arr[i].offsetTop < 0 || arr[i].offsetTop >= arr[i].parentElement.offsetHeight) {
arr[i].speedY = -arr[i].speedY;
}
}
}
}
Ball movement: Observer mode:
Use the observer watch list, add the object to the observer list or delete it from the observer list when you click the ball; perform exercise;
window.onload = function () {
class TimeManager {
static add(elem) {
if (TimeManager.managerList.indexOf(elem) > 0) return TimeManager.managerList;
TimeManager.managerList.push(elem);
return TimeManager.managerList;
}
static remove(elem) {
var index = TimeManager.managerList.indexOf(elem);
if (index < 0) return TimeManager.managerList;
TimeManager.managerList.splice(index, 1);
return TimeManager.managerList;
}
static start() {
if (TimeManager.id) return;
TimeManager.id = setInterval(this.animation, 16);
}
static end() {
clearInterval(TimeManager.id);
TimeManager.id = 0;
}
static animation() {
for (var i = 0; i < TimeManager.managerList.length; i++) {
TimeManager.managerList[i].update();
}
}
static get managerList() {
if (!TimeManager._managerList) {
TimeManager._managerList = [];
}
return TimeManager._managerList;
}
}
// function animation() {
// requestAnimationFrame(animation);
// for (var i = 0; i < arr.length; i++) {
// arr[i].update();
// }
// }
// }
class Ball {
constructor(r, parent) {
this.createBall(r, parent);
this.speedX = 0;
this.speedY = 0;
}
createBall(r, parent) {
if (this.ball) return this.ball;
if (!parent) parent = document.body;
if (r <= 0) r = 20;
this.ball = document.createElement('div');
this.ball.style.width = r * 2 + 'px';
this.ball.style.height = r * 2 + 'px';
this.ball.style.borderRadius = r + 'px';
this.ball.style.position = 'absolute';
this.ball.style.backgroundColor = 'red';
this.ball.self = this;
this.ball.addEventListener('click', this.clickHandler);
parent.appendChild(this.ball);
return this.ball;
}
clickHandler(e) {
this.bool = !this.bool;
if (this.bool) {
TimeManager.add(this.self);
// 将Ball 存入列表中,然后调用Ball中的update方法，调用当前ball移动
return;
}
TimeManager.remove(this.self);
}
update() {
this.speedY += 1;// 球的加速减速
this.ball.style.left = this.ball.offsetLeft + this.speedX + 'px';
this.ball.style.top = this.ball.offsetTop + this.speedY + 'px';
if (this.ball.offsetLeft > 300 || this.ball.offsetLeft < 0) {
this.speedX = -this.speedX;
}
if (this.ball.offsetTop > 300 || this.ball.offsetTop < 0) {
this.speedY = -this.speedY;
}
}
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function init() {
for (var i = 0; i < 20; i++) {
var ball = new Ball(getRandom(10, 20));
ball.speedX = getRandom(1, 2);
ball.speedY = getRandom(1, 2);
}
TimeManager.start();
// animation();
}
// window.onload = function () {
// var arr = [];
// for (var i = 0; i < 20; i++) {
// var ball = new Ball(getRandom(10, 20), this.getRandom(1, 10), this.getRandom(5, 10));
// ball.init();
// arr.push(ball);
// }
// animation()
// function animation() {
// requestAnimationFrame(animation);
// for (var i = 0; i < arr.length; i++) {
// arr[i].update();
// }
// }
// function Ball(size, speedX, speedY, parent) {
// this.size = size || 10;
// this.speedX = speedX || 5;
// this.speedY = speedY || 5;
// this.parent = parent || document.body;
// this.init = function () {
// // 使用Ball.prototype.init 报错
// this.div = document.createElement('div');
// this.parent.appendChild(this.div);
// this.div.style.position = 'absolute';
// this.div.style.width = 2 * size + 'px';
// this.div.style.height = 2 * size + 'px';
// this.div.style.backgroundColor = 'red';
// this.div.style.borderRadius = size + 'px';
// };
// this.update = function () {
// console.log(this.div.offsetLeft, this.div.offsetTop);
// this.div.style.left = this.div.offsetLeft + this.speedX + 'px';
// this.div.style.top = this.div.offsetTop + this.speedY + 'px';
// if (this.div.offsetLeft < 0 || this.div.offsetLeft > this.div.parentElement.offsetWidth) {
// this.speedX = -this.speedX;
// }
// if (this.div.offsetTop < 0 || this.div.offsetTop > this.div.parentElement.offsetHeight) {
// this.speedY = -this.speedY;
// }
// }
// }
init();
};