class bird {
    // 游戏的默认状态  false 未开始  true 开始游戏
    gameStatus = false;
    innerHeight = window.innerHeight;
    innerWidth = window.innerWidth;

    // 鸟的下落速度
    birdDownSpeed = 8;

    // 鸟的上升速度
    birdUpSpeed = 40;

    // 地板的移动速度
    groundSpeed = 5;

    // 上下水管的间隙
    WaterPipeClearance = 150

    // 水管的左右间隙
    WaterPipeLeftRightClearance = 300

    // 生成水管的X轴位置
    WaterPipeX = 0

    // 一秒创建多少个水管
    createdWaterPipeXTime = 1000

    // 总分
    TotalScore = 0


    birdTheme = "birdOneMotion"

    constructor() {
        console.log(this.innerWidth);
        this.bindEvent();
        this.birdAction();
        this.groundAction();

        this.resultAction()

        setInterval(() => {
            if (this.gameStatus) {
                this.createdWaterPipe();
            }
        }, this.createdWaterPipeXTime)
        // this.createdWaterPipe();
    }


    bindEvent() {
        click(".s_normal", () => {
            $(".bgm").play()
            _(".sg").forEach(v => {
                this.WaterPipeMove(v)
            })
            this.changeGameStatus()
        })

        click(".s_hard", () => {
            $(".bgm").play()
            this.WaterPipeClearance = 100
            this.birdDownSpeed = 10
            this.birdUpSpeed = 30
            this.WaterPipeLeftRightClearance = 200
            this.createdWaterPipeXTime = 3000
            _(".sg").forEach(v => {
                this.WaterPipeMove(v)
            })
            this.changeGameStatus()
        })

        click(".pause", () => {
            this.changeGameStatus()
            _(".sg").forEach(v => clearInterval(v.time))
            $(".bgm").pause();
        })

        click(".pifu1", () => {
            console.log("点击换皮肤")
            this.birdTheme = `birdOneOneMotion`
            $(".bird").style.animation = ` birdOneMotion 0.4s linear infinite`

        })

        click(".pifu2", () => {
            console.log("点击换皮肤2")
            this.birdTheme = `birdOneMotion2`
            $(".bird").style.animation = ` birdOneMotion2 0.4s linear infinite`

        })

        click(".pifu3", () => {
            console.log("点击换皮肤3")
            this.birdTheme = `birdOneMotion3`
            $(".bird").style.animation = ` birdOneMotion3 0.4s linear infinite`
        })
    }

    changeGameStatus() {
        if (this.gameStatus) {
            $(".start").remove("hidden")
            $(".pause").add("hidden")
            this.gameStatus = false
        } else {
            $(".result").remove("hidden")

            $(".bird").style.animation = `${this.birdTheme} 0.4s linear infinite`

            $(".start").add("hidden")
            $(".pause").remove("hidden")
            this.gameStatus = true
        }
    }

    resultAction() {
        var TotalScoreArr = String(this.TotalScore).split("")
        $(".result").innerHTML = ""
        TotalScoreArr.forEach(v => {
            $(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
        })
    }

    BumpGround(type) {
        var GroundYStart = this.innerHeight - 112;
        if (type = 1) {
            GroundYStart -= 34
        }

        var birdBTop = $(".bird").offsetTop + $(".bird").offsetHeight;

        if (birdBTop >= GroundYStart) {
            console.log("碰到地板了");
            this.gameOver();
        }
    }

    birdAction() {
        var clcikTime = 0, currentTime = 0;
        // 设置鸟的初始位置
        $(".bird").style.top = `${this.innerHeight / 2 - 12}px`;

        setInterval(() => {
            if (this.gameStatus) {
                this.BumpGround("1")
                $(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
            }
        }, 1000 / 16)


        click("body", () => {
            if (this.gameStatus) {

                this.BumpGround("2")
                clcikTime = (new Date()).getTime()
                $(".bird").add("up")
                $(".bird").remove("down")
                $(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
            }
        })

        setInterval(() => {

            if (this.gameStatus) {
                currentTime = (new Date()).getTime();
                if (currentTime - clcikTime > 300) {
                    $(".bird").add("down")
                    $(".bird").remove("up")
                }
            }
        }, 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`
            }
        }, 1000 / 16)
    }


    createdWaterPipe() {
        var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
        var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
        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 {
            if ((el2.offsetLeft + el2.offsetWidth) == 101) {
                this.TotalScore += 0.5
                if (!String(this.TotalScore).includes(".")) {
                    console.log("==========分数=======: ", this.TotalScore);
                    $(".point").play()
                    this.resultAction()

                }
                if (this.TotalScore == 10) {
                    console.log("分数大于10分 可以修改背景")
                    $("body").style.backgroundImage = `url("./img/back2.png") `
                }
            }
        }
    }




    gameOver() {
        $(".hit").play()
        this.changeGameStatus()
        _(".sg").forEach(v => clearInterval(v.time))
        var gameOver = document.createElement("img")
        gameOver.src = "./img/gameover.png"
        $(".start").replaceChild(gameOver, $(".logo"))
        click(".fanhui", () => location.reload())
        click(".s_normal", () => location.reload())
        click(".s_hard", () => location.reload())
    }


}

new bird()