first commit

历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/js/index.js

@@ -0,0 +1,292 @@
+class bird {
+    gameStatus = false
+    innerHeight = window.innerHeight
+    innerWidth = window.innerWidth;
+    //鸟的下落速度
+    birdDownSpeed = 5;
+    //鸟点一次上的速度
+    birdUpSpeed = 40
+    //地板移动速度
+    groundSpeed = 5
+
+    //水管上下间隙
+    WaterPipeClearance = 100
+
+    //水管水平间隔
+    WaterPipeLeftRightClearance = 500
+
+    // 生成水管的X轴位置
+    WaterPipeX = 0
+
+    // 一秒创建多少个水管
+    createdWaterPipeXTime = 500
+
+     // 总分
+     TotalScore = 0
+
+    constructor() {
+        this.birdEvent();
+        this.birdAction();
+        this.groundAction();
+        this.resultAction();
+        this.ChangeColor()
+        setInterval(() => {
+            if (this.gameStatus) {
+                this.createdWaterPipe();
+            }
+        }, this.createdWaterPipeXTime);
+    }
+
+
+    birdEvent() {
+        click(".play", () => {
+            this.changeGameStatus()
+            _(".sg").forEach(v => {
+                this.WaterPipeMove(v)
+            })
+        })
+        click(".pause", () => {
+            this.changeGameStatus()
+            _(".sg").forEach(v => clearInterval(v.time))
+        })
+    }
+
+
+    //运动状态
+    changeGameStatus() {
+        if (this.gameStatus) {
+            $(".start").remove("hidden")
+            $(".pause").add("hidden") 
+              $(".music").pause()
+            this.gameStatus = false
+        } else {
+            this.ChangeColor()
+            $(".result").remove("hidden")
+            $(".bird").style.animation = 'birdMotion 0.48s linear infinite'
+            $(".start").add("hidden")
+            $(".pause").remove("hidden")
+            $(".music").play()
+            this.gameStatus = true
+        }
+    }
+
+    //分数
+    resultAction() {
+        var TotalScoreArr = String(this.TotalScore).split("")
+        $(".result").innerHTML = ""
+        TotalScoreArr.forEach(v => {
+         $(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
+        })
+     }
+
+    
+
+    //鸟的移动
+
+    birdAction() {
+        var clickTime = 0, currentTime = 0;
+        //鸟的初始位置
+        $(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
+        $(".bird").style.animation += ',birdShake 0.48s linear infinite'
+        setInterval(() => {
+            if (this.gameStatus) {
+                $(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
+            }
+
+        }, 1000 / 16)
+
+
+        click("body", () => {
+            if (this.gameStatus) {
+
+                clickTime = (new Date()).getTime()
+                $(".bird").add("up")
+                $(".bird").remove("down")
+                $(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`;
+            }
+        })
+
+
+        setInterval(() => {
+
+            if (this.gameStatus) {
+                var currentTime = (new Date()).getTime()
+                if (currentTime - clickTime > 400) {
+                    $(".bird").remove("up")
+                    $(".bird").add("down")
+                }
+            }
+
+        }, 300);
+
+    }
+
+    //地板的移动
+    groundAction() {
+        $(".groundOne").style.left = '0px';
+        $(".groundTwo").style.left = `${this.innerWidth}px`;
+
+        setInterval(() => {
+            $(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
+            $(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
+
+
+
+            if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
+                $(".groundOne").style.left = `${this.innerWidth}px`
+            }
+            if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
+                $(".groundTwo").style.left = `${this.innerWidth}px`
+            }
+            this.collisionground($(".bird"), $(".ground"))
+        }, 1000 / 20);
+
+    }
+
+    collisionground(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
+        ) {
+            this.gameOver()
+            console.log('碰撞成功')
+        }
+    }
+    //水管的图片生成
+    createdWaterPipe() {
+        var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
+        
+        var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
+
+        if (TopWaterPipeHeight) {
+            TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
+        }
+
+        var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
+
+        if (this.WaterPipeX == 0) {
+            this.WaterPipeX = this.innerWidth
+        } else {
+            this.WaterPipeX += this.WaterPipeLeftRightClearance
+        }
+
+
+        var cretedImg = (type) => {
+            var img = document.createElement("img");
+            img.src = `../水管鸟/img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
+            img.className = "sg"
+
+
+            img.style = `
+              ${type}: ${type == "top" ? 0 : 112}px;
+              height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
+              left: ${this.WaterPipeX}px
+            `;
+            return img
+        }
+
+
+        var TopWaterPipe = cretedImg("top")
+        var BottomWaterPipe = cretedImg("bottom")
+
+
+        $("body").appendChild(TopWaterPipe)
+        $("body").appendChild(BottomWaterPipe)
+
+        this.WaterPipeMove(TopWaterPipe)
+        this.WaterPipeMove(BottomWaterPipe)
+
+    }
+
+    //水管移动
+    WaterPipeMove(img) {
+        img.time = setInterval(() => {
+
+            img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
+
+            if (parseInt(img.style.left) <= -55) {
+                try {
+                    clearInterval(img.time)
+                    $("body").removeChild(img)
+                } catch (error) { }
+            } else {
+                this.collision($(".bird"), img)
+            }
+        }, 1000 / 30)
+    }
+
+
+    /**
+    * 碰撞检测
+    * @param {*} el1 鸟
+    * @param {*} el2 水管
+    */
+    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
+        ) {
+            console.log('碰撞成功')
+            this.gameOver()
+
+        } else {
+            console.log('111');
+            if ( (el2.offsetLeft + el2.offsetWidth) == 107 ) {
+                this.TotalScore += 0.5
+                if (!String(this.TotalScore).includes(".")) {
+                    console.log("==========分数=======: ", this.TotalScore);
+                    $(".point").play()
+                    this.resultAction()
+                }
+                //换背景图
+                if (this.TotalScore > 3) {
+                    var night = document.createElement("img")
+                    night.src = "../水管鸟/img/night.png"
+                    $(".back").replaceChild(night, $(".morring"))
+                    function ResumeError() {
+                        return true;
+                    }
+                    window.onerror = ResumeError;
+                    console.log("xixi");
+                }
+            }
+        }
+
+
+    }
+    //游戏结束
+    gameOver() {
+        $(".die").play()
+        this.changeGameStatus()
+        _(".sg").forEach(v => {
+            clearInterval(v.time)
+        })
+
+        var gameOvers = document.createElement("img")
+        gameOvers.src = "./img/gameover.png"
+        $(".start").replaceChild(gameOvers, $(".logo"))
+        click(".play", () => location.reload())
+        $(".start").removeChild($(".nandu"))
+        $(".start").removeChild($(".color"))
+        // $(".nandu").remove("hidden")
+    }
+
+    ChangeColor() {
+        click(".yellow", () => {
+            $(".bird").style.animation = "birdMotionYellow 0.4s linear infinite,birdShake 0.48s linear infinite"
+        })
+        click(".blue", () => {
+            $(".bird").style.animation = "birdMotionBlue 0.4s linear infinite,birdShake 0.48s linear infinite"
+            console.log(2);
+        })
+        click(".red", () => {
+            $(".bird").style.animation = "birdMotionRed 0.4s linear infinite,birdShake 0.48s linear infinite"
+            console.log(3);
+        })
+    }
+
+}
+
+new bird()

历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/js/utils.js

@@ -0,0 +1,31 @@
+class Util{
+
+    inject() {
+        Element.prototype.remove = function (removeClassName) {
+            this.classList.remove(removeClassName);
+        }
+        Element.prototype.add = function (addClassName) {
+            this.classList.add(addClassName);
+        }
+    }
+
+    click(className,callback) {
+        $(className).onclick = () => {
+            callback()
+        }
+    }
+
+
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+}
+
+var { $, _, click, inject } = new Util()
+
+inject()