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