锅打灰太狼

最新推荐文章于 2024-09-17 13:42:29 发布

不爱喝水的杯子呐

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量67

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45982114/article/details/120639971

版权

话不多说，上代码

<body>
    <div class="box">0</div>
    <div class="box1"></div>
    <img src="" alt="" id="Img">
    <img src="" alt="" id="Img1">
</body>

<style>
    body {
        background-image: url(img/game_bg.jpg);
        background-repeat: no-repeat;
        background-position: top center;
    }
    
    #Img {
        position: absolute;
    }
    
    .box {
        color: rgb(245, 135, 50);
        margin-left: 675px;
    }
    
    .box1 {
        background-image: url(img/progress.png);
        height: 15px;
        background-repeat: no-repeat;
        /* width: 180px; */
        margin: 37px 0px 0px 663px;
    }
</style>

<script>
    //轮番图片
    var Img = document.getElementById("Img");
    var Img1 = document.getElementById("Img1");
    var box = document.querySelector(".box");
    var time = document.querySelector(".box1");

    //洞的坐标
    var coordinates = [
        ["110px 0px 0px 702px"],
        ["193px 0px 0px 720px"],
        ["80px 0px 0px 617px"],
        ["62px 0px 0px 789px"],
        ["130px 0px 0px 799px"],
        ["140px 0px 0px 615px"],
        ["213px 0px 0px 631px"],
        ["34px 0px 0px 696px"],
        ["215px 0px 0px 806px"]
    ];
    // // 灰太狼
    var images = 0;
    var images1 = 6;

    function da() {
        var x = parseInt(Math.random() * 9);
        Img.style.margin = coordinates[x];
        var Up = setInterval(function() {
            images++;
            Img.setAttribute("src", "img/h" + images + ".png");
            if (images == 5) {
                clearInterval(Up);
                images = 1;
                var down = setInterval(function() {
                    if (images1 == 1) {
                        images1 = 5;
                        Img.setAttribute("src", "");
                        // Img.removeAttribute("src", "img");
                        clearInterval(down);
                        count = 0;
                    } else {
                        images1--;
                        Img.setAttribute("src", "img/h" + images1 + ".png");
                    }
                }, 200)
            }
        }, 200)
    }
    setInterval(da, 2000);
    var coordinates1 = [
        ["110px 0px 0px 702px"],
        ["80px 0px 0px 617px"],
        ["34px 0px 0px 696px"],
        ["130px 0px 0px 799px"],
        ["140px 0px 0px 615px"],
        ["62px 0px 0px 789px"],
        ["213px 0px 0px 631px"],
        ["193px 0px 0px 720px"],
        ["215px 0px 0px 806px"]
    ];
    //小灰灰
    var i = 0;
    var j = 6;

    function hh() {
        var x = parseInt(Math.random() * 9);
        Img1.style.margin = coordinates1[x];
        var Up = setInterval(function() {
            i++;
            Img1.setAttribute("src", "img/x" + i + ".png");
            if (i == 5) {
                clearInterval(Up);
                i = 0;
                var down = setInterval(function() {
                    if (j == 1) {
                        j = 6;
                        Img1.setAttribute("src", "");
                        // Img.removeAttribute("src", "img");
                        clearInterval(down);
                        count2 = 0;
                    } else {
                        j--;
                        Img1.setAttribute("src", "img/x" + j + ".png");
                    }
                }, 200)
            }
        }, 200)
    }
    setInterval(hh, 3000);
    //记分
    var m = 0;
    var x = 10;
    var count = 0;
    Img.onclick = function() {
        count++;
        if (count == 1) {
            m += 10;
            box.innerHTML = m;
            Img.setAttribute("src", "img/h" + 9 + ".png");
        }
    }
    var h = 10;
    var count2 = 0;
    Img1.onclick = function() {
            count2++;
            if (count2 == 1) {
                m -= 10;
                box.innerHTML = m;
                Img1.setAttribute("src", "img/x" + 9 + ".png");
            }
        }
        // 时间条
    var lengths = 180;
    var L = setInterval(function() {
        lengths--;
        time.style.width = lengths + "px";
        if (lengths == 0) {
            alert("游戏结束！你的得分为" + box.innerHTML);
            location.reload(true);
        }
    }, 100);
</script>