first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-22作业（水管鸟）/js/bird.js

@@ -0,0 +1,367 @@
+class bird {
+    GameState = false
+    innerHeight = window.innerHeight;
+    innerWidth = window.innerWidth;
+
+    // 鸟的下落速度
+    birdDownSpeed = 8
+
+    // 鸟的上升速度
+    birdUpSpeed = 40
+
+    // 地板和水管的移动速度
+    groundSpeed = 5
+
+    // 上下水管的间隙
+    WaterPipeClearance = 150
+
+    // 水管的左右间隙
+    WaterPipeLeftRightClearance = 300
+
+    // 一秒创建多少个水管
+    createdWaterPipeXTime = 500
+
+    // 生成水管的X轴位置
+    WaterPipeX = 0
+
+    // 分数
+    TotalScore = 0
+
+
+    // // 鸟的下落速度
+    // birdDownSpeed = 10
+    // // 鸟的上升速度
+    // birdUpSpeed = 60
+    // // 地板和水管的移动速度
+    // groundSpeed = 10
+    // // 上下水管的间隙
+    // WaterPipeClearance = 100
+    // // 水管的左右间隙
+    // WaterPipeLeftRightClearance = 200
+    // // 一秒创建多少个水管
+    // createdWaterPipeXTime = 300
+
+
+    constructor() {
+        this.bindEvent();
+        this.birdAction();
+        this.groundMove();
+        this.scoreAction()
+        this.ChangeColor()
+        //this.createdWaterPipe()
+        setInterval(() => {
+            if (this.GameState) {
+                this.createdWaterPipe();
+            }
+        }, this.createdWaterPipeXTime);
+    }
+
+
+    //绑定事件
+    bindEvent() {
+        click(".easy", () => {
+            _(".waterpipe").forEach(v => {
+                this.WaterPipeMove(v)
+            })
+            this.changeGameState()
+            this.Easy()
+        })
+        click(".difficulty", () => {
+            _(".waterpipe").forEach(v => {
+                this.WaterPipeMove(v)
+            })
+            this.changeGameState()
+            this.Difficulty()
+        })
+        click(".stop", () => {
+            this.changeGameState()
+            _(".waterpipe").forEach(v => {
+                clearInterval(v.time)
+            })
+            $(".continue").remove("hidden")
+            $(".start").add("hidden")
+        })
+        click(".continue", () => {
+            _(".waterpipe").forEach(v => {
+                this.WaterPipeMove(v)
+            })
+            this.changeGameState()
+            $(".continue").add("hidden")
+        })
+        click(".voice", () => {
+            $(".music").pause()
+            $(".point").pause()
+            $(".die").pause()
+            $(".Mute").remove("hidden")
+            $(".voice").add("hidden")
+        })
+        click(".Mute", () => {
+            $(".music").play()
+            $(".Mute").add("hidden")
+            $(".voice").remove("hidden")
+        })
+    }
+
+    // 改变游戏状态
+    changeGameState() {
+        if (this.GameState) {
+            $(".stop").add("hidden")
+            $(".start").remove("hidden")
+            $(".music").pause()
+            $(".voice").add("hidden")
+            this.GameState = false
+        } else {
+            this.ChangeColor()
+            $(".stop").remove("hidden")
+            $(".start").add("hidden")
+            $(".score").remove("hidden")
+            $(".voice").remove("hidden")
+            $(".music").play()
+            this.GameState = true
+            setTimeout(() => {
+
+            }, 2000);
+        }
+    }
+
+    //鸟的移动
+    birdAction() {
+        var clcikTime = 0, currentTime = 0;
+        //鸟的初始位置
+        $(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
+        // $(".bird").style.animation += ', birdfly 0.7s linear infinite;'
+
+        //往下掉
+        setInterval(() => {
+            if (this.GameState) {
+                $(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
+            }
+
+        }, 1000 / 16);
+
+
+        //上升
+        click("body", () => {
+            if (this.GameState) {
+                clcikTime = (new Date()).getTime()
+                $(".bird").add("up")
+                $(".bird").remove("down")
+                $(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
+            }
+
+        })
+
+        setInterval(() => {
+            if (this.GameState) {
+                currentTime = (new Date()).getTime();
+                //改变鸟的朝向
+                if (currentTime - clcikTime > 300) {
+                    $(".bird").add("down")
+                    $(".bird").remove("up")
+                }
+            }
+        }, 300)
+
+
+    }
+
+
+    // 地板移动
+    groundMove() {
+        $(".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 / 16);
+    }
+
+    //地板的碰撞检测
+    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;
+
+
+        //console.log(TopWaterPipeHeight);
+
+        if (this.WaterPipeX == 0) {
+            this.WaterPipeX = this.innerWidth
+        } else {
+            this.WaterPipeX += this.WaterPipeLeftRightClearance
+        }
+        // 插入水管图片
+
+
+        var cretedImg = (e) => {
+            var img = document.createElement("img");
+
+            img.src = `./img/${e == "top" ? 'sg_t' : 'sg_b'}.png`;
+
+            img.className = "waterpipe"
+
+            img.style = `${e}: ${e == "top" ? 0 : 112}px;
+                height: ${e == "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)
+        // console.log("水管");
+    }
+
+    //水管移动
+    WaterPipeMove(img) {
+        img.time = setInterval(() => {
+
+            img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
+
+            if (parseInt(img.style.left) <= -55) {
+                clearInterval(img.time)
+                $("body").removeChild(img)
+            } else {
+                this.collisionWaterPipe($(".bird"), img)//bird = react1,img = react2
+            }
+
+        }, 1000 / 16)
+    }
+
+    // 水管的碰撞检测
+    collisionWaterPipe(react1, react2) {
+        if (react1.offsetLeft < react2.offsetLeft + react2.offsetWidth &&
+            react1.offsetLeft + react1.offsetWidth > react2.offsetLeft &&
+            react1.offsetTop < react2.offsetTop + react2.offsetHeight &&
+            react1.offsetHeight + react1.offsetTop > react2.offsetTop
+        ) {
+            this.gameOver()
+            console.log('碰撞成功')
+
+        } else {
+            // console.log("react2.offsetLeft + react2.offsetWidth:", react2.offsetLeft + react2.offsetWidth);
+
+            if ((react2.offsetLeft + react2.offsetWidth) == 105) {
+                this.TotalScore += 0.5;
+                if (!String(this.TotalScore).includes(".")) {
+                    console.log("==========分数=======: ", this.TotalScore)
+                    this.scoreAction()
+                    $(".point").play()
+                    //换背景图
+
+                    if (this.TotalScore >= 10) {
+                        $("body").style.backgroundImage = `url(./img/night.png)`
+                        // function ResumeError() {
+                        //     return true;
+                        // }
+                        // window.onerror = ResumeError;
+                        // console.log("xixi");
+                        this.createdWaterPipe()
+
+                    }
+                }
+            }
+            // console.log('没撞上')
+
+        }
+    }
+
+    //分数数字的变化
+    scoreAction() {
+        var TotalScoreArr = String(this.TotalScore).split("")
+        $(".score").innerHTML = ""
+        TotalScoreArr.forEach(v => {
+            $(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
+        })
+    }
+
+    //游戏结束
+    gameOver() {
+        $(".die").play()
+        this.changeGameState()
+        _(".waterpipe").forEach(v => {
+            clearInterval(v.time)
+        })
+
+        var gameOver = document.createElement("img")
+        gameOver.src = "./img/gameover.png"
+        $(".start").replaceChild(gameOver, $(".name"))
+        click(".play", () => location.reload())
+        $(".start").removeChild($(".grade"))
+        $(".start").removeChild($(".color"))
+        $(".play").remove("hidden")
+    }
+
+    // 换皮肤
+    ChangeColor() {
+        click(".yellow", () => {
+            $(".bird").style.animation = "yelloBirdmove 0.4s linear infinite"
+        })
+        click(".blue", () => {
+            $(".bird").style.animation = "blueBirdmove 0.4s linear infinite"
+            console.log(2);
+        })
+        click(".red", () => {
+            $(".bird").style.animation = "redBirdmove 0.4s linear infinite"
+            console.log(3);
+        })
+    }
+
+    // 难度
+    Easy() {
+        this.birdDownSpeed = 7
+        this.birdUpSpeed = 40
+        this.groundSpeed = 5
+        this.WaterPipeClearance = 150
+        this.WaterPipeLeftRightClearance = 300
+        this.createdWaterPipeXTime = 2000
+    }
+
+    Difficulty() {
+        this.birdDownSpeed = 10
+        this.birdUpSpeed = 60
+        this.groundSpeed = 10
+        this.WaterPipeClearance = 70
+        this.WaterPipeLeftRightClearance = 220
+        this.createdWaterPipeXTime = 1000
+    }
+
+
+}
+
+
+new bird()