first commit

历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/水管鸟/js/jjj.js

@@ -0,0 +1,200 @@
+class bird {
+
+    gameStatus = false;
+    // 游戏的默认状态  false 未开始  true 开始游戏
+    innerHeight = window.innerHeight;
+    innerWidth = window.innerWidth;
+    //   获取当前页面的宽和高
+
+    // 鸟的下落速度
+    birdDownSpeed = 8;
+
+    // 鸟的下落速度
+    birdUpSpeed = 40;
+
+    // 地板的移动速度
+    groundSpeed = 5;
+
+    // 上下水管的间隙
+    WaterPipeClearance = 150
+
+    // 水管的左右间隙
+    WaterPipeLeftRightClearance = 300
+
+    // 生成水管的X轴位置
+    WaterPipeX = 0
+
+    // 一秒创建多少个水管
+    createdWaterPipeXTime = 500
+
+    constructor() {
+        this.bindEvent();
+        this.birdAction();
+        this.groundAction();
+
+        setInterval(() => {
+            if (this.gameStatus) {
+                this.createdWaterPipe();
+            }
+        }, this.createdWaterPipeXTime)
+        // this.createdWaterPipe();
+    }
+
+
+    bindEvent() {
+        // 创建一个绑定事件
+        click(".play", () => {
+            _(".sg").forEach(v => {
+                this.WaterPipeMove(v)
+            })
+            this.changeGameStatus()
+        })
+
+        click(".pause", () => {
+            this.changeGameStatus()
+
+            _(".sg").forEach(v => {
+                clearInterval(v.time)
+            })
+        })
+    }
+
+
+
+
+    changeGameStatus() {
+        // 更改游戏状态
+        if (this.gameStatus)
+       
+        {
+            $(".start").remove("hidden")
+            $(".pause").add("hidden")
+            // 让.start里面类容显示 并给.pause添加隐藏
+            this.gameStatus = false
+
+        } else {
+            $(".bird").style.animation = "birdMotion 0.4s linear infinite"
+            $(".start").add("hidden")
+            $(".pause").remove("hidden")
+            this.gameStatus = true
+            // 否则反之，并且给小鸟添加animation动画属性覆盖之前游戏未开始的动画
+        }
+    }
+
+
+
+    birdAction() {
+       
+        var clcikTime = 0, currentTime = 0;
+        // 设置定义鸟的初始位置
+        $(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
+     
+        setInterval(() => {
+            if (this.gameStatus);
+            console.log(this.gameStatus)
+            {
+                $(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
+            }
+        }, 1000 / 16)
+
+        click("body", () => {
+            if (this.gameStatus) {
+                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) {
+                clearInterval(img.time)
+                $("body").removeChild(img)
+            }
+
+        }, 1000 / 16)
+    }
+
+
+
+}
+new bird()
+// 初始化类