first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-22作业（水管鸟）/css/bird.css

@@ -0,0 +1,215 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+    background-image: url(../img/back.png);
+    background-size: contain;
+}
+
+
+
+
+
+.stop {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 999;
+    cursor: pointer;
+}
+
+.continue {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 999;
+    cursor: pointer;
+}
+
+.voice,
+.Mute {
+    width: 28px;
+    height: 30px;
+    position: absolute;
+    left: 50px;
+    top: 10px;
+    z-index: 999;
+    cursor: pointer;
+}
+
+
+.score {
+    position: absolute;
+    z-index: 1000;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.start {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    position: absolute;
+    top: 40%;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    z-index: 999;
+}
+
+.start .play {
+    width: 70px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.grade {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+}
+
+.grade div {
+    text-align: center;
+    display: flex;
+    width: 70%;
+    margin: 5px;
+    padding: 5px;
+    background: white;
+    border: 1px solid black;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    text-shadow: 2px 1px 3px rgb(98 87 87 / 74%);
+    letter-spacing: 5px;
+    font-size: 17px;
+    box-shadow: 3px 2px 5px rgb(26 25 25 / 74%);
+    cursor: pointer
+}
+
+
+.color {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.color div {
+    cursor: pointer
+}
+
+
+.ground {
+    position: absolute;
+    height: 112px;
+    width: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+
+.ground img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.bird {
+    width: 34px;
+    height: 24px;
+    position: absolute;
+    z-index: 999;
+    left: 100px;
+    transition: all linear 0.15s;
+}
+
+
+.up {
+    transform: rotate(-38deg);
+}
+
+.down {
+    transform: rotate(90deg);
+}
+
+/* 黄色的鸟 */
+@keyframes yelloBirdmove {
+    0% {
+        background-image: url(../img/hn1.png);
+    }
+
+    50% {
+        background-image: url(../img/hn2.png);
+    }
+
+    100% {
+        background-image: url(../img/hn3.png);
+    }
+}
+
+/* 蓝色的鸟 */
+@keyframes blueBirdmove {
+    0% {
+        background-image: url(../img/bn1.png);
+    }
+
+    50% {
+        background-image: url(../img/bn2.png);
+    }
+
+    100% {
+        background-image: url(../img/bn3.png);
+    }
+}
+
+/* 红色的鸟 */
+@keyframes redBirdmove {
+    0% {
+        background-image: url(../img/rn1.png);
+    }
+
+    50% {
+        background-image: url(../img/rn2.png);
+    }
+
+    100% {
+        background-image: url(../img/rn3.png);
+    }
+}
+
+@keyframes birdfly {
+    0% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(10px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+.waterpipe {
+    width: 55px;
+    position: absolute;
+}
+
+.hidden {
+    display: none;
+}

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-22作业（水管鸟）/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/bird.css">
+</head>
+
+<body>
+    <audio class="music" src="./sounds/Orkaxjan_Emar.ogg" loop></audio>
+    <audio class="point" src="./sounds/sfx_point.ogg"></audio>
+    <audio class="die" src="./sounds/sfx_die.ogg"></audio>
+
+
+
+
+    <img class="stop hidden" src="./img/pause.png" alt="">
+    <img class="continue hidden" src="./img/continue.png" alt="">
+    <img class="voice hidden" src="./img/yinliang.png" alt="">
+    <img class="Mute hidden" src="./img/jingyin.png" alt="">
+
+    <div class="score hidden"></div>
+
+    <div class="start">
+        <img class="name" src="./img/title.png" alt="">
+        <img class="play hidden" src="./img/start.png" alt="">
+        <div class="grade">
+            <div class="easy">普通难度</div>
+            <div class="difficulty">地狱难度</div>
+        </div>
+        <div class="color">
+            <div class="yellow">
+                <img src="./img/hn2.png" alt="">
+            </div>
+            <div class="blue">
+                <img src="./img/bn2.png" alt="">
+            </div>
+            <div class="red">
+                <img src="./img/rn2.png" alt="">
+            </div>
+        </div>
+
+    </div>
+    <div class="bird" style="top:0px;animation: yelloBirdmove 0.4s linear infinite"></div>
+
+
+    <div class="ground">
+        <img class="groundone" src="./img/diban.png" alt="">
+        <img class="groundtwo" src="./img/diban.png" alt="">
+    </div>
+</body>
+<script src="./js/utils.js"></script>
+<script src="./js/bird.js"></script>
+
+<script>
+
+</script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-22作业（水管鸟）/js/bird.js

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

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-22作业（水管鸟）/js/utils.js

@@ -0,0 +1,29 @@
+class Util {
+
+    inject() {
+        Element.prototype.remove = function (removeClassName) {
+            this.classList.remove(removeClassName);
+        }
+        Element.prototype.add = function (addClassName) {
+            this.classList.add(addClassName);
+        }
+    }
+
+    click(className, callback) {
+        $(className).onclick = () => {
+            callback()
+        }
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+}
+
+var { $, _, click, inject } = new Util()
+
+inject()