first commit

历届学生/font-end-nine/项目练习/学生项目/刘正阳/每日练习/水管鸟游戏/css/index.css

@@ -0,0 +1,172 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+
+body {
+    width: 100%;
+    height: 100vh;
+    background-image: url("../img/back.png");
+    background-size: contain;
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+}
+
+.result {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 30px;
+    z-index: 999;
+}
+
+.s_normal {
+    font-size: 30px;
+    color: aliceblue;
+}
+
+.s_hard {
+    font-size: 30px;
+    color: aliceblue;
+}
+
+.fanhui {
+    font-size: 30px;
+    color: aliceblue;
+}
+
+.pifu img {
+    width: 34px;
+    height: 24px;
+    margin-left: 10px;
+}
+
+.ground {
+    position: absolute;
+    width: 100%;
+    height: 112px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+}
+
+.ground img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.bird {
+    width: 34px;
+    height: 24px;
+    position: absolute;
+    left: 100px;
+    transition: all linear 0.15s;
+    z-index: 999;
+}
+
+.up {
+    transform: rotate(-38deg);
+}
+
+.down {
+    transform: rotate(90deg);
+}
+
+.sg {
+    width: 55px;
+    position: absolute;
+}
+
+@keyframes birdShake {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+@keyframes birdOneMotion {
+    0% {
+        background: url("../img/hn1.png");
+    }
+    50% {
+        background: url("../img/hn2.png");
+    }
+    100% {
+        background: url("../img/hn3.png");
+    }
+}
+
+@keyframes birdOneMotion2 {
+    0% {
+        background: url("../img/hn4.png");
+    }
+    50% {
+        background: url("../img/hn5.png");
+    }
+    100% {
+        background: url("../img/hn6.png");
+    }
+}
+
+@keyframes birdOneMotion3 {
+    0% {
+        background: url("../img/hn7.png");
+    }
+    50% {
+        background: url("../img/hn8.png");
+    }
+    100% {
+        background: url("../img/hn9.png");
+    }
+}
+
+
+.start {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -40%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 999;
+}
+
+.start .play {
+    width: 60px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.pause {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    cursor: pointer;
+    z-index: 999;
+}
+
+
+
+
+.show {
+    display: block;
+}
+
+.hidden {
+    display: none;
+}
+
+audio {
+    display: none;
+}

历届学生/font-end-nine/项目练习/学生项目/刘正阳/每日练习/水管鸟游戏/index.html

@@ -0,0 +1,45 @@
+<!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>水管鸟游戏</title>
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body id="body">
+
+    <audio class="bgm" src="./sounds/sfx_bgm.ogg" loop></audio>
+
+    <audio class="hit" src="./sounds/sfx_hit.ogg"></audio>
+    <audio class="point" src="./sounds/sfx_point.ogg"></audio>
+
+    <div class="result hidden">
+        
+    </div>
+
+    <img class="pause hidden" src="./img/pause.png" alt="">
+
+    <div class="start">
+        <img class="logo" src="./img/title.png" alt="">
+        <div class="s_normal">普通难度</div>
+        <div class="s_hard">地狱难度</div>
+        <div class="fanhui">重新开始</div>
+        <div class="pifu">
+            <img class="pifu1" src="./img/hn2.png" alt="">
+            <img class="pifu2" src="./img/hn5.png" alt="">
+            <img class="pifu3" src="./img/hn8.png" alt="">
+        </div>
+    </div>
+    
+    <div class="bird bird_one" id="bird" style="top: 0px; animation: birdOneMotion 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/index.js"></script>
+</html>

历届学生/font-end-nine/项目练习/学生项目/刘正阳/每日练习/水管鸟游戏/js/index.js

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

历届学生/font-end-nine/项目练习/学生项目/刘正阳/每日练习/水管鸟游戏/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() 

历届学生/font-end-nine/项目练习/学生项目/刘正阳/每日练习/水管鸟游戏/笔记.txt

@@ -0,0 +1 @@
+作业之一 换鸟的主题