first commit

历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/index.js

@@ -0,0 +1,265 @@
+class WaterPipeBird {
+
+    innerWidth = window.innerWidth;
+    innerHeight = window.innerHeight;
+
+    totalScore = 0;
+
+    // 地板的运动速度
+    dibanMotionSpeed = 10;
+
+    // 鸟的默认皮肤
+    birdTheme = "birdDefault"
+
+    // 游戏状态  true 开始， false 未开始
+    gameStatus = false;
+
+    // 每次点击鸟，鸟的上移动距离
+    birdClickTop = 40
+
+    // 下移距离
+    birdClickDown = 10
+
+    // 创建到第几个水管
+    PipeIndex = 0;
+
+    // 上下水管的通过间隙（距离）
+    PipeGap = 150;
+
+    // 水管左右的间距
+    XPipeWidth = 300
+
+    // 水管移动速度
+    PipeSpeed = 10
+
+    IntervalList = []
+
+    constructor() {
+        console.log("构造函数: ");
+        this.dibanMotion()
+        this.initBird()
+        this.startGame()
+        this.stopGame()
+    }
+
+
+    dibanMotion() {
+        $(".di_one").style.left = `0px`;
+        $(".di_two").style.left = `${this.innerWidth}px`;
+
+        // 定义变量提前保存this
+        // => 
+        // call bind apply
+        // 箭头函数因为没有关键词 function，所以this会被解绑
+        setInterval(() => {
+            $(".di_one").style.left = `${parseInt(($(".di_one").style.left)) - this.dibanMotionSpeed}px`;
+
+            $(".di_two").style.left = `${parseInt(($(".di_two").style.left)) - this.dibanMotionSpeed}px`;
+
+            if (parseInt(($(".di_one").style.left)) <= -this.innerWidth) {
+                $(".di_one").style.left = `${this.innerWidth}px`;
+            }
+
+            if (parseInt(($(".di_two").style.left)) <= -this.innerWidth) {
+                $(".di_two").style.left = `${this.innerWidth}px`;
+            }
+        }, 100)
+    }
+
+
+    // birdShake 0.4s linear infinite reverse
+    initBird() {
+        $(".bird").style.top = `${(this.innerHeight - 112) / 2 - 14}px`;
+
+        // 点击切换小鸟的主题
+        _(".bird_list img").forEach((v, i) => {
+            v.onclick = () => {
+                switch (i) {
+                    case 0:
+                        this.birdTheme = "birdDefault"
+                        $(".bird").style.animationName = "birdDefault,birdShake"
+                        break;
+                    case 1:
+                        this.birdTheme = "birdBlue"
+                        $(".bird").style.animationName = "birdBlue,birdShake"
+                        break;
+                    case 2:
+                        this.birdTheme = "birdRed"
+                        $(".bird").style.animationName = "birdRed,birdShake"
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        })
+    }
+
+    startGame() {
+        e(".start", () => {
+            let clickTime = null;
+            this.gameStatus = true;
+
+            $(".pause").show();
+            $(".score").show();
+
+            $(".bird_title").none();
+            $(".bird").style.animationName = this.birdTheme
+
+            // 下落
+            this.IntervalList[0] = setInterval(() => {
+                if (this.gameStatus) {
+                    $(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdClickDown}px`
+                    this.collision($(".bird"), $(".diban"))
+                }
+            }, 1000 / 16)
+
+            // 点击开始游戏和控制鸟的上移
+            e("body", (e) => {
+                if (this.gameStatus) {
+                    clickTime = new Date().getTime();
+                    $(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdClickTop}px`
+                    $(".bird").remove("down")
+                    $(".bird").add("up")
+                }
+            })
+
+
+            // 下落的样式
+            this.IntervalList[1] = setInterval(() => {
+                let currentTime = new Date().getTime();
+                if (currentTime - clickTime > 300) {
+                    $(".bird").remove("up")
+                    $(".bird").add("down")
+                }
+            }, 300)
+
+
+            this.IntervalList[2] = setInterval(() => {
+                this.CreatedPipe()
+            }, 500)
+
+
+        })
+    }
+
+    stopGame() {
+        e(".pause", (e) => {
+            this.gameStatus = false;
+
+            e?.stopPropagation();
+            this.IntervalList.forEach(v => {
+                clearInterval(v)
+            })
+            _(".pipe").forEach(v => {
+                clearInterval(v.IntervalId)
+            })
+
+            $(".bird_list").none()
+            $(".start").none()
+            $(".bird_title").show()
+            $(".restart").show()
+        })
+
+
+        e(".restart", (e) => {
+            $(".start").onclick()
+            this.PipeMove(_(".pipe"))
+        })
+
+
+    }
+
+
+    CreatedPipe() {
+        let PipeTotalHeight = this.innerHeight - 112 - this.PipeGap;
+        let TopImgHeight = getRandom(60, PipeTotalHeight - 60)
+        let BottomImgHeight = PipeTotalHeight - TopImgHeight
+
+        let createdImg = (t) => {
+            let img = document.createElement("img")
+            img.type = t
+            img.src = `./img/sg_${t}.png`
+            img.className = "pipe"
+            img.style = `
+              ${t == "b" ? 'bottom: 110px;' : 'top: 0px;'}
+              left: ${this.innerWidth + 55 + (this.PipeIndex * this.XPipeWidth)}px;
+              height: ${t == "t" ? TopImgHeight : BottomImgHeight}px;
+            `;
+            return img
+        }
+
+        let topImg = createdImg("t");
+        let bottomImg = createdImg("b");
+
+        $("body").appendChild(topImg)
+        $("body").appendChild(bottomImg)
+
+
+        this.PipeMove([topImg, bottomImg])
+        // this.PipeMove(bottomImg)
+        this.PipeIndex += 1
+    }
+
+
+    PipeMove(arr) {
+        arr.forEach(img => {
+            img.IntervalId = setInterval(() => {
+                if (this.gameStatus) {
+                    img.style.left = `${parseInt(img.style.left) - this.PipeSpeed}px`
+                    if (parseInt(img.style.left) <= -55) {
+                        clearInterval(img.IntervalId)
+                        $("body").removeChild(img)
+                    } else {
+                        this.collision($(".bird"), img)
+                    }
+                }
+            }, 100)
+        })
+
+    }
+
+
+
+    collision(el1, el2) {
+        if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
+            el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
+            el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
+            el1.offsetHeight + el1.offsetTop > el2.offsetTop
+        ) {
+            $(".gameover").show()
+            $(".bird_logo").none();
+            $(".pause").onclick()
+            $(".restart").none();
+
+            $(".reload").show()
+            e(".reload", () => {
+                location.reload()
+            })
+        } else {
+            if (el2.type == "t") {
+                if (parseInt(el2.style.left) + el2.offsetWidth == 100) {
+                    this.totalScore += 1
+                    let sco = this.totalScore.toString().split("")
+                    $(".score").innerHTML = ""
+                    sco.forEach(v => {
+                        $(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
+                    })
+                }
+            }
+        }
+    }
+
+
+}
+
+
+// var a = function (test) {
+//     console.log("1: ", test);
+// }
+
+// var a = test => console.log("1: ", test);
+
+
+
+new WaterPipeBird()

历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/utils.js

@@ -0,0 +1,57 @@
+class Utils {
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+
+    e(className, callback, type = "click",) {
+        $(`${className}`)[`on${type}`] = (event) => {
+            callback(event)
+        }
+    }
+
+    customMethods() {
+        Element.prototype.add = function(className) {
+            this.classList.add(className)
+        }
+
+        Element.prototype.remove = function(className) {
+            this.classList.remove(className)
+        }
+
+        Element.prototype.none = function() {
+            this.style.display = "none"
+        }
+
+        Element.prototype.show = function() {
+            this.style.display = "block"
+        }
+
+        Element.prototype.toggle = function() {
+           if (this.style.display == "none") {
+            this.style.display = "block"
+           } else {
+             this.style.display = "none"
+           }
+        }
+    }
+
+
+    getRandom(min, max) {
+        const floatRandom = Math.random()
+        const difference = max - min
+        const random = Math.round(difference * floatRandom)
+        const randomWithinRange = random + min
+        return randomWithinRange
+      }
+
+}
+
+let { $, _, e, customMethods, getRandom } = new Utils()
+customMethods()
+// let utils = new Utils()