复习

11.复习/8.下落的树叶.html

@@ -22,21 +22,42 @@
             this.width = Math.round(Math.random() * 100 + 100);
             this.top = 0;
             this.left = Math.random() * (screenWidth - this.width);
-            this.urls = './img/'+ Math.floor(Math.random() * 4 + 1) +'.png'
+            this.urls = './img/' + Math.floor(Math.random() * 4 + 1) + '.png'
         }
         // 绘制图片
-        Leaf.prototype.init = function() {
+        Leaf.prototype.init = function () {
             var imgs = document.createElement('img');
             imgs.src = this.urls;
             imgs.style.width = this.width + 'px';
             imgs.style.left = this.left + 'px';
             imgs.style.top = this.top + 'px';
             document.body.appendChild(imgs);
+            this.newImgs = imgs;
         }
         // 展示图片
-        for(let i=0;i<20;i++) {
-           let leaf = new Leaf();
-           leaf.init();
+        let newArr = [];
+        for (let i = 0; i < 20; i++) {
+            let leaf = new Leaf();
+            leaf.init();
+            newArr.push(leaf);
+        }
+        // 树叶落下
+        Leaf.prototype.fall = function () {
+            setTimeout(() => {
+               var timer = setInterval(() => {
+                    if (this.newImgs.offsetTop < screenHeight - this.newImgs.offsetHeight) {
+                        this.newImgs.style.top = this.newImgs.offsetTop + 10 + 'px';
+                    } else {
+                        clearInterval(timer);
+                    }
+                }, 20);
+            }, Math.random() * 2000);
+        }
+        // 点击落下
+        document.onclick = function () {
+            for (let i = 0; i < newArr.length; i++) {
+                newArr[i].fall();
+            }
         }
     </script>
 </body>