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

    // 总定义所有变量赋值为0
    // 鸟的下落速度
    birdDownSpeed = 0;

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

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

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

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

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

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


    // 自己创建的

    //选择小鸟颜色
    birdColor = 'yellowMotion'


    //分数统计
    TotalScore = 9

    play = true
    wait = false
    birdDown = null
    backgroundmusic = false


    constructor() {
        this.easySpeed();
        this.birdTheme()
        this.bindEvent();
        this.birdAction();
        this.groundAction();
        this.resultAction();

        $('.speed').onchange = (e) => {
            //    console.log('asd', $('.speed').value);
            if ($('.speed').value == 1) {
                this.easySpeed()
            } else {
                this.difficultSpeed()
            }
        }

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


    // easy模式变量赋值如下
    easySpeed() {
        // 鸟的下落速度
        this.birdDownSpeed = 8;

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

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

        // 上下水管的间隙
        this.WaterPipeClearance = 200

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

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

        // 一秒创建多少个水管
        this.createdWaterPipeXTime = 500
    }


   // easy模式变量赋值如下
    difficultSpeed() {
        // 鸟的下落速度
        this.birdDownSpeed = 12;

        // 鸟的上升速度
        this.birdUpSpeed = 50;

        // 地板的移动速度
        this.groundSpeed = 10;

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

        // 水管的左右间隙
        this.WaterPipeLeftRightClearance = 200

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

        // 一秒创建多少个水管
        this.createdWaterPipeXTime = 250
    }

    // 给鸟换主题色
    birdTheme() {
        // 先循环每一项得到每一项
        $('.birdTheme .bird').forEach((value, index) => {
            // console.log('11111', $('.birdTheme .bird'));
            var that = this
            // 为每一项绑定点击事件
            value.onclick = function (e) {
                // $('.birdTheme .bird').forEach(function (v, i) {

                //     if (v.className.indexOf('show')) {
                //         v.remove('show')
                //     }
                // })
                //先去除block
                value.remove('show')
                //再给点击到的每一项加block


                // switch 语句用于基于不同的条件来执行不同的动作。
                // 表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。

                switch (index) {
                    case 0:
                        that.birdColor = 'redMotion'
                        break;
                    case 1:
                        that.birdColor = 'blueMotion'
                        break;
                    default:
                        that.birdColor = 'yellowMotion'
                        break;
                }
                $('.birdTheme .bird')[index + 1 == $('.birdTheme .bird').length ? 0 : index + 1].add('show')
                // 定义一个变量保存修改后的鸟
                var bg = $('.birdTheme .bird')[index + 1 == $('.birdTheme .bird').length ? 0 : index + 1]
                // 获取它的图片地址,并加入startBird
                $('.startBird').style.background = getComputedStyle(bg).background
                // 修改startBird的动画属性
                $('.startBird').style.animation = `${that.birdColor} 0.4s linear infinite,birdShake 0.4s linear infinite`

            }

        });
    }

// 绑定事件开始和暂停的切换
    bindEvent() {
        click(".play", () => {
            this.readyGO()
            console.log('this.birdColor', this.birdColor);

        })

        click(".pause", () => {
            this.changeGameStatus()
            // 暂停的时候清理掉定时器
            if ($('.sg')) {
                $(".sg").forEach(v => clearInterval(v.time))
            }
            // 当暂停的时候清楚鸟下降的定时器
            clearInterval(this.birdDown)
        })
    }


    changeGameStatus() {
        if (this.wait) return;
        if (this.gameStatus) {
            $(".backgroundmusic").pause()
            $(".start").remove("hidden")
            $(".pause").add("hidden")
            $('.ready').add('hidden')
            this.gameStatus = false
        } else {
            $(".backgroundmusic").play()
            this.gameStatus = true
        }
    }

    // 三秒倒计时以后游戏开始
    readyGO() {
        $(".start").add("hidden")
        $(".pause").remove("hidden")
        $('.birdTheme').add("hidden")
        $('.choice').add('hidden')
        $('.ready').remove('hidden')
        $('.startBird').remove('hidden')
        $('.result').remove('hidden')

        this.wait = true
        var num = 3
        // 将this保存在that里面
        var that = this
        // 倒计时三秒，游戏开始,鸟往下落
        function createNum() {
            // 判断游戏是开始还是继续
            var words = `${num}秒后游戏${that.play ? '开始' : '继续'}`
            // 将倒计时文字放在html上
            $('.readynum').innerText = words
            // 当倒计时为0的时候，
            if (num == 0) {
                //去掉文字和倒计时定时器，
                $('.readynum').innerText = ''
                clearInterval(time)
                $('.ready').add('hidden')
                // 定时器：控制鸟下落
                that.birdDown = setInterval(() => {
                    if (that.gameStatus) {
                        that.BumpGround("1")
                        $(".startBird").style.top = `${parseInt($(".startBird").style.top) + that.birdDownSpeed}px`;
                    }
                }, 1000 / 16)


                if (that.play) {
                    that.play = !that.play
                }
                // 游戏继续
                that.wait = false
                $('.startBird').style.animation = `${that.birdColor} 0.4s linear infinite`

                //改变游戏状态为true
                that.changeGameStatus()
                // 游戏开始以后水管也开始生成
                var PipeXTime = setInterval(() => {
                    if (that.gameStatus) {
                        that.createdWaterPipe();
                    } else {
                        clearInterval(PipeXTime)
                    }
                }, that.createdWaterPipeXTime)

                // 游戏开始以后水管继续移动
                console.log(' $(".sg")', $(".sg"));
                if ($('.sg')) {
                    $(".sg").forEach(v => {
                        that.WaterPipeMove(v)
                    })
                }
            }
        }
        // 三秒定时器
        createNum()
        var time = setInterval(() => {
            num--
            createNum()
        }, 1000)

    }


    // 小鸟运动
    birdAction() {
        // 上一次点击       //下一次点击
        var clcikTime = 0, currentTime = 0;
        // 定义鸟的初始位置
        $('.startBird').style.top = `${this.innerHeight / 2 - 12}px`

        //给body绑定点击事件，点击屏幕鸟上升
        click("body", () => {
            if (this.gameStatus) {

                this.BumpGround("2")
                // (new Date()).getTime()时间戳获取鼠标的点击时间
                clcikTime = (new Date()).getTime()
                // 抬头
                $(".startBird").add("up")
                $(".startBird").remove("down")
                // top距离
                $(".startBird").style.top = `${parseInt($(".startBird").style.top) - this.birdUpSpeed}px`
            }
        })

        // 下降的时候延迟300毫秒在执行
        setInterval(() => {

            if (this.gameStatus) {
                // 下一次点击
                currentTime = (new Date()).getTime();
                // 当间距超过600的时候是下落状态，低头
                if (currentTime - clcikTime > 200) {
                    $(".startBird").add("down")
                    $(".startBird").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;
        //1/3<=上水管高度<2/3
        var TopWaterPipeHeight = (Math.random() * ((totalWaterPipeHeight * 2 / 3) - (totalWaterPipeHeight * 1 / 3))) + (totalWaterPipeHeight * 1 / 3)
        // 下水管高度
        var BottomWaterPipe = totalWaterPipeHeight - TopWaterPipeHeight;

        // 判断生成位置
        // 初始值为0时，在屏幕的外面
        if (this.WaterPipeX == 0) {
            this.WaterPipeX = this.innerWidth
        } else {
            // 加等于间隔
            this.WaterPipeX += this.WaterPipeLeftRightClearance
        }

        var creatImg = (call) => {
            var img = document.createElement('img')
            //因为是放在html上的所以引入地址按的是html上的./
            img.src = `./img/${call == 'top' ? 'sg_t' : 'sg_b'}.png`;
            img.className = "sg"


            img.style = `
            ${call}: ${call == 'top' ? 0 : 112}px;
            height: ${call == 'top' ? TopWaterPipeHeight : BottomWaterPipe}px;
            left: ${this.WaterPipeX}px
            `;

            return img

        }


        // ‘先赚钱在用钱’先写方法再var
        var TopWaterPipe = creatImg('top')
        var BottomWaterPipe = creatImg('bottom')

        // 在body上添加子元素
        $('body').appendChild(TopWaterPipe)
        $('body').appendChild(BottomWaterPipe)

        this.WaterPipeMove(TopWaterPipe)
        this.WaterPipeMove(BottomWaterPipe)
    }

// 水管运动
    WaterPipeMove(img) {

        var that = this
        // img.time保存定时返回number值以便清理定时器
        img.time = setInterval(() => {

            // 管子运动速度
            img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`

            // 当水管自身宽度超出屏幕时清理定时器和元素
            if (parseInt(img.style.left) <= -55) {
                clearInterval(img.time)
                console.log(img);
                $("body").removeChild(img)
            } else {
                that.collision($(".startBird"), img)
            }

        }, 1000 / 30)


    }




    /**
 * 碰撞检测
 * @param {*} el1 鸟
 * @param {*} el2 水管
 */
    // 矩形和矩形的碰撞检测公式，修改参数就行
    collision(el1, el2) {
        // var that = this
        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 {
            // 如果水管的右边刚好等于鸟的左边距，就说明过关成功，分数加1
            // console.log('el2.offsetLeft + el2.offsetWidth',el2.offsetLeft + el2.offsetWidth);

            // easy判断只是106，difficult判断是101
            if ((el2.offsetLeft + el2.offsetWidth) == ($('.speed').value == 1 ? 106: 101)) {
                this.TotalScore += 0.5
                // 用String将(this.TotalScore)转化为字符串，判断它是否有小数
                //取反即不包含小数四舍五入
                if (!String(this.TotalScore).includes(".")) {
                    console.log("==========分数=======: ", this.TotalScore);
                    $(".point").play()
                    this.resultAction()

                    // 将分数除10取整，取到前面的数值判断奇偶
                    var nums = parseInt(this.TotalScore / 10)
                    // 等于0的时候拦截
                    if(nums == 0) return; 
                    // 余数等于0的时候时，为偶数 白天
                    if(nums % 2 == 0){
                        $('body').style.backgroundImage = `url('./img/back.png')`
                        // console.log('123',$('body').background);
                    }else{
                    // 奇数的时候，黑夜
                        $('body').style.backgroundImage = `url('./img/dark.png')`
                        // console.log('123',$('body').background);
                    }
                    console.log('nums',nums);
                }

            }
        }
    }

// 得分运动，将得分数组转为字符串，字符串分割得到里面的具体数值，通过foreach循环给html添加分数图片
    resultAction(){
        var scoreArray = String(this.TotalScore).split('')
        $('.result').innerHTML = ''
        scoreArray.forEach(v => {
            $('.result').innerHTML += `<img src="./img/${v}.png" alt="">`
        })
    }

// 鸟撞地板的运动,分为两种情况,垂直下落1和不小心碰到2
    BumpGround(type) {
        // 判断鸟的top距离是否和地板y值的top重合或大于它
        var GroundYStart = this.innerHeight - 112;
        if (type = 1) {
            GroundYStart -= 34
        }
        
        var birdBTop = $(".startBird").offsetTop +  $(".startBird").offsetHeight;

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



// 游戏结束
    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"))
        //给play绑定另一个点击事件：刷新页面
        click(".play", () => location.reload())
    }

}
new bird()