first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/水管鸟/js/index.js

@@ -0,0 +1,499 @@
+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()

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/水管鸟/js/util.js

@@ -0,0 +1,57 @@
+class Util{
+    $(className) {
+        if (document.querySelectorAll(className).length > 1) {
+            return document.querySelectorAll(className)
+        } else {
+            return document.querySelector(className)
+        }
+    }
+
+
+    click(className,callback) {
+        $(className).onclick = () => {
+            callback()
+        }
+    }
+
+    inject() {
+        Element.prototype.remove = function (removeClassName) {
+            this.classList.remove(removeClassName);
+        }
+        Element.prototype.add = function (addClassName) {
+            this.classList.add(addClassName);
+        }
+    }
+}
+
+var { $, click, inject } = new Util()
+
+inject()
+
+//定义两个变量存放创建的上水管和下水管
+// 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`
+//         // 让水管每次移动距离为当前的x轴距离减去地板移动的速度（保证水管和地板是同时运动的）
+//         if (parseInt(img.style.left) <= -55) {
+//             clearInterval(img.time)
+//             $("body").removeChild(img)
+//             // 如果水管的x轴距离小于他本身时 也就是全部移除屏幕时 删除定时器以及元素
+//         }
+    
+//     }, 1000 / 16)
+//     }
+