雕大战雌鹅游戏_抓大鹅脚本-CSDN博客

本文链接：https://blog.csdn.net/lazyboy233/article/details/111216533
这是一个使用HTML、CSS和JavaScript实现的老鹰抓大雁游戏，游戏中大雁被老鹰触碰后血量会减少并触发警告声音。当血量降至0时游戏结束。玩家可以通过键盘控制大雁移动，游戏包含重置血量和游戏结束的逻辑处理。
摘要由CSDN通过智能技术生成
题目：老鹰抓大雁游戏
需求：当大雁被老鹰触碰之后，血量条会相应减少，并触发警告声。当血量为0时提示 GAME OVER！
代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老鹰抓大雁游戏</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
</head>
<style>
    .container {
        border-radius: 0.5em;
        background-color: #ccc;
        width: 800px;
        height: 600px;
        margin: 0 auto;
        position: relative;              /*父相*/

        background-image: url(./imgs/timg2.jpg);
        background-size: 100% 100%;
    }
    .w {
        margin: 0 auto;
        width: 800px;
    }


    #eagle,
    #goose {
        width: 120px;
        height: 120px;
        position: absolute;      /*子绝*/
    }   

    #goose {
        left: 50%;
        transform: translate(-50%);
    }

    /*---------- 按钮 start ----------*/
    .btn {
        width: 100px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: skyblue;
        color: #fff;
    }

    .btn:active {
        background-color: #369;
    }

    /*---------- 按钮 end ----------*/

    /*---------- 血量条 start ----------*/
    #blood {
        width: 250px;
        height: 100%;
        background: red;
        float: right;
        border-radius: 15px;
        text-align: center;
        color: #fff;
        line-height: 20px;
    }

    #bb {
        width: 250px;
        height: 20px;
        background: yellow;
        float: right;
        margin: 10px;
        border-radius: 15px;
    }

    /*---------- 血量条 end ----------*/
</style>

<body>
    <div class="container">
        <!-- 血量条 -->
        <div id="bb">
            <div id="blood">100</div>
        </div>
        <!-- 按钮区域 -->
        <div class="btn">开始游戏</div>
        <img src="./imgs/eagle.gif" alt="" id="eagle">
        <img src="./imgs/goose.gif" alt="" id="goose">
    </div>
    <!-- 音频 -->
    <audio src="./mp3/t.mp3"></audio>
    <div class="w">
        <p>老鹰抓大雁游戏 V3 BY ZhangJinHeng 2020.12.15</p>
        <ul>
            <li>键盘左方向键 or A 键 控制雌鹅向左</li>
            <li>键盘右方向键 or D 键 控制雌鹅向右</li>
            <li>键盘上方向键 or W 键 控制雌鹅向上</li>
            <li>键盘下方向键 or S 键 控制雌鹅向下</li>
        </ul>
        <p>版本更新内容：雕向左飞到一定程度会反方向飞行</p>
        <p>如果雕飞到尽头，雌鹅头方向改变, 说白了就是两者面对面</p>
    </div>
</body>

</html>
<script>
    /*
        created By ZhangJinHeng 
        version: v3
    */
    $(function () {
        var blood = 100;   // 用于记录血量值

        var start_left = 0;    // 初始化雕的左坐标，为0
        var start_top = 0;     // 初始化雕的top标，为0

        var goose_top = 0;     // 初始化雌鹅的top标，为0

        var mark = 0;      // 用于记录雕飞的方向

        /*------------------------- 雕飞 start -------------------------*/
        function move() {
 
            /*--------------- 雕向右飞的逻辑 -----------*/
            start_top = parseInt(Math.random() * 300);
            // console.log(start_left);
            if(start_left < 660 && mark == 0 ) {   // 向右飞
                start_left += 20;

                $("#eagle").css('transform', "rotateY(0deg)");        // 雕飞向右飞的形状

                $("#eagle").css("left", start_left + "px");
                $("#eagle").css("top", start_top + "px");      // 设置雕飞的随机高度
            } 
            else {
                mark = 1;

                $("#goose").css('transform', "rotateY(180deg)");     // 如果雕飞到尽头，雌鹅方向改变
            }
            /*--------------- 雕向左飞的逻辑 -----------*/
            if(start_left > 0 && mark == 1) {    // 向左飞
                start_left -= 20;

                $("#eagle").css('transform', "rotateY(180deg)");        // 雕飞向左飞的形状

                $("#eagle").css("left", start_left + "px");
                $("#eagle").css("top", start_top + "px");      // 设置雕飞的随机高度
            } 
            else {
                mark = 0;

                $("#goose").css('transform', "rotateY(0deg)");     // 如果雕飞到尽头，雌鹅方向改变
            }

            /*--------------- 判断雕和雌鹅是否被碰撞的逻辑 -----------*/
            var isTrue = isTouch($("#goose")[0], $("#eagle")[0]);  // 是否被碰撞了
            if (isTrue) {
                // $("audio")[0].play();

                start_left = 0;

                blood -= 20;      // 每次被碰到就会减去20的血量
                $("#blood").css("width", blood + "%");
                $("#blood").html(blood);

                if (blood <= 0) {
                    alert("GAME OVER");

                    // 恢复血量条状态为100%
                    $("#blood").css("width", "100%");
                    $("#blood").html(100);
                    // 恢复血量到原始100
                    blood = 100;

                    $("#goose").css('left', "50%");
                    $("#goose").css('transform', "translate(-50%)");
                }
            }
        }

        $(".btn").on("click", function () {
            setInterval(move, 200);
        })
        /*------------------------- 雕飞 end -------------------------*/

        var goose_left = parseInt($("#goose").css("left"));   // 获取高度


        /*------------------------- 雌鹅 上下左右移动 start -------------------------*/
        document.onkeydown = function (e) {
            var currKey = 0, e = e || event;
            currKey = e.keyCode || e.which || e.charCode;//支持IE、FF  
            if (currKey == 37 || currKey == 65) {    // 向左
                goose_left -= 20;
                if (goose_left < 0) {      // 飞左的范围
                    goose_left = 0;
                }
                $("#goose").css('left', goose_left + "px");
                $("#goose").css('transform', "rotateY(0deg)");
            }
            if (currKey == 39  || currKey == 68 ) {     // 向右
                goose_left += 20;
                if (goose_left > 700) {      // 飞右的范围
                    goose_left = 700;
                }
                $("#goose").css('left', goose_left + "px");
                $("#goose").css('transform', "rotateY(180deg)");
            }

            if (currKey == 38  || currKey == 87 ) {    // 向上
                console.log("向上");
                goose_top -= 20;
                if (goose_top < 0) {      // 飞的最高范围
                    goose_top = 0;
                }
                $("#goose").css('top', goose_top + "px");

            }
            if (currKey == 40  || currKey == 83) {     // 向下
                console.log("向下");
                goose_top += 20;
                if (goose_top > 400) {     // 飞的最低范围
                    goose_top = 400;
                }
                $("#goose").css('top', goose_top + "px");
            }
            /*------------------------- 雌鹅 上下左右移动 end -------------------------*/
        }

        //获取内联样式表的样式
        function getCss(ele, css) {
            return parseInt(window.getComputedStyle(ele, null)[css]);
        }
        //碰撞
        function isTouch(ele_a, ele_b) {

            var manLeft = getCss(ele_a, "left");
            var manWidth = getCss(ele_a, "width");
            var manTop = getCss(ele_a, "top");
            var manHeight = getCss(ele_a, "height");

            var rockLeft = getCss(ele_b, "left");
            var rockWidth = getCss(ele_b, "width");
            var rockTop = getCss(ele_b, "top");
            var rockHeight = getCss(ele_b, "height");


            return Math.abs(manLeft - rockLeft) < (manWidth / 2 + rockWidth / 2)     //  取绝对值
                && Math.abs(manTop - rockTop) < (manHeight / 2 + rockHeight / 2);

            //撞到了

        }

    })
</script>