code 練習系列，用于回顧及復習

code 練習系列，用于回顧及復習
1.小球運動：
其中，setInterval 可以使用requestAnimationFrame代替；
function anime() { // 每16毫秒執行一次 頁面重繪頻率
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;
                      }
                }
          }
    }

小球運動：觀察者模式方式：
使用觀察者觀察串列，在點擊小球時將物件添加到觀察者串列，或者從觀察者里串列中洗掉；進行運動；

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();
    };