锅打灰太狼

最新推荐文章于 2024-11-11 00:01:33 发布
AKA悍匪-洋洋
最新推荐文章于 2024-11-11 00:01:33 发布
阅读量86
点赞数
文章标签： css html html5
本文链接：https://blog.csdn.net/BHGVGHJK/article/details/120643801
版权
开始：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 10px;
        }

        body,
        html {
            height: 100%;
        }

        .all {
            height: 100%;
            background: url(../9.24/img/game_bg.jpg) 0 0 no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .scoreFa {
            position: absolute;
            /*80px*/
            left: 19.32367%;
            /*23px*/
            top: 3.125%;
            color: white;
            font-size: 2.5rem;
        }

        .start {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: red;
            color: white;
            font-size: 30px;
            padding: 10px;
            z-index: 99;
            /*opacity: 0;*/
        }

        .timeFa {
            /*234px*/
            width: 56.52173%;
            /*25px*/
            height: 3.39673%;
            border-radius: 10px;
            position: absolute;
            /*101px*/
            top: 13.72282%;
            /*80px*/
            left: 19.32367%;
            overflow: hidden;
        }

        .timeFa .time {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: red;
        }

        .all img {
            position: absolute;
            /*width: 108px;
            height: 101px;*/
        }

        .all img:nth-child(1) {
            top: 39.48913%;
            left: 7.66183%;
        }

        .all img:nth-child(2) {
            top: 29.57065%;
            left: 32.7826%;
        }

        .all img:nth-child(3) {
            top: 35.68478%;
            left: 60.80193%;
        }

        .all img:nth-child(4) {
            top: 51.98913%;
            left: 7.17874%;
        }

        .all img:nth-child(5) {
            top: 45.875%;
            left: 34.23188%;
        }

        .all img:nth-child(6) {
            top: 50.08695%;
            left: 64.42512%;
        }

        .all img:nth-child(7) {
            top: 66.93478%;
            left: 11.28502%;
        }

        .all img:nth-child(8) {
            top: 62.85869%;
            left: 39.54589%;
        }

        .all img:nth-child(9) {
            top: 67.47826%;
            left: 67.08212%;
        }
    </style>
</head>

<body>
<div class="timeFa"><span class="time" id="time"></span></div>
<div class="scoreFa" id="score">0</div>
<div class="start" id="start">开始游戏</div>
<div class="all">
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
</div>
<script type="text/javascript">
    var oStart = document.querySelector('#start');
    var kengs = document.querySelectorAll('.all img');
    var gamescore = document.querySelector('#score');
    var gametime=document.querySelector('#time');
    var myscore = 0;
    var cTime=null;
    //定义狼
    var langs = ['h', 'x', 'h', 'h', 'h'];
    //封装狼出来的方法
    function langup() {
        //随机获取坑的位置
        var randkeng = kengs[rand(0, kengs.length - 1)];
        //坑里是否诱狼
        if (randkeng.getAttribute('src')) {
            return;
        }
        //s随机出来一狼
        var randlang = langs[rand(0, langs.length - 1)];
        randkeng.lang = randlang;
        // 坑默认对应的图片
        randkeng.index = 0;
        //定时器切换
        randkeng.timer = setInterval(function () {
            if (randkeng.index == 6) {
                clearInterval(randkeng.timer);
                langdown(randlang, randkeng);
            }
            else {
                randkeng.src = './img/' + randlang + randkeng.index + '.png';
                randkeng.index++;
            }
        }, 100)
    }
    //狼下去的方法
    function langdown(who, where) {
        //从5开始
        where.index = 5;
        where.timer = setInterval(function () {
            if (where.index == -1) {
                where.src = '';
                clearInterval(where.timer)
            } else {
                where.src = './img/' + who + where.index + '.png';
                where.index--;
            }
        }, 100)
    }
    //自动的出来浪
    function autorand() {
        gtime = setInterval(function () {
            langup();
        }, 300)
    }
    //循环给所有的坑添加点击事件
    for (var i = 0; i < kengs.length; i++) {
        kengs[i].onclick = function () {
            if (this.getAttribute('src')) {
                //大刀螂
                //眩晕
                hitlang(this.lang, this);
                //加分
                countscore(this.lang);
            }
        }
    }
    //点击到狼
    function hitlang(who, where) {
        //浪的动作
        clearInterval(where.timer);
        where.index = 6;
        where.timer = setInterval(function () {
            if (where.index == 10) {
                clearInterval(where.timer)
                where.src = '';
            } else {
                where.src = './img/' + who + where.index + '.png';
                where.index++;
            }
        }, 100);
    }
    //统计分数
    function countscore(who) {
        switch (who) {
            case 'h':
                myscore += 10;
                break;
            case 'x':
                myscore -= 10;
                break;
        }
        //计算得分并显示
        gamescore.innerHTML = myscore;
    }
    //倒计时
    function countdown(){
        cTime=setInterval(function(){
            if(gametime.offsetWidth==0){
                clearInterval(cTime)
                gametime.style.width='0px';
                gameover();
            }else{
                gametime.style.width=gametime.offsetWidth-1+'px';
            }

        },100)
    }
    //清除狼自动出来，弹出分数
    function gameover(){
        clearInterval(gtime);
        alert('您的分数是：'+myscore);
    }
    //点击游戏开始
    oStart.onclick = function () {
        this.style.display = 'none';
        autorand();
        countdown();
    }
    //封装随机数
    function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
</script>
</body>

</html>