锅打灰太狼游戏

亦凉 2022-05-17 11:14 178阅读 0赞

![70][]

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        \#wrap\{  
            width: 320px;  
            height: 400px;  
            position: relative;  
            background: url('img/game\_bg.jpg') no-repeat;  
        \}  
        \#score\{  
            font-size: 24px;  
            color: \#fff;  
            position: absolute;  
            left: 60px;  
            top: -18px;  
        \}  
        \#timeImg\{  
            width: 100px;  
            height: 16px;  
            position: absolute;  
            left: 63px;  
            top: 66px;  
            border-radius: 16px;  
        \}  
        \#start\{  
            width: 100%;  
            font-size: 50px;  
            text-align: center;  
            color: orange;  
            position: absolute;  
            top: 180px;  
            cursor: pointer;  
        \}  
    </style>  
</head>  
<body>  
    <div id="wrap">  
        <p id="score">0</p>  
        <img src="img/progress.png" id="timeImg">  
        <div id="start">开始</div>  
    </div>  
</body>  
<script src="tween.js"></script>  
<script>  
    //坐标数组  
    var ltArr = \[\["98px","115px"\],\["20px","160px"\],\["188px","142px"\],\["16px","220px"\],\["102px","192px"\],\["200px","212px"\],\["30px","294px"\],\["120px","274px"\],\["208px","296px"\]\];

// 用来生成不断创建狼的计时器  
    var createTimer = null;

// 记录页面中狼出现的位置下标数组  
    var indexArr = \[\];  
    var scoreNum = 0;

// 开始游戏  
    start.onclick = function()\{  
        // 隐藏开始按钮  
        this.style.display = "none";  
        timerFu();  
        // 创建狼  
        createTimer = setInterval(function()\{  
            createWolf();  
        \},1000)  
    \}  
    // 创建狼的函数  
    function createWolf()\{  
        var n = randomNum(0,ltArr.length);  
        if (indexArr.indexOf(n) == -1) \{  
            // 说明本次随机的下标还没有狼  
            indexArr.push(n);  
        \}else\{  
            // 如果位置已经有狼了，那么就等待下次创建重新来过  
            return;  
        \}  
        // 创建狼图片  
        var wolf = new Image();  
        // 生成狼的类型  
        var type = wolfType();  //“x"/"h"  
        // 狼图片下标  
        var index = 0 ;  
        // 狼出现的位置  
        // var wolfLT = ltArr\[n\];  //"xxpx","yypx"  
        wolf.style.position="absolute";  
        wolf.style.left =ltArr\[n\]\[0\];  
        wolf.style.top = ltArr\[n\]\[1\];  
        // 狼点击  
        wolf.onclick = function()\{  
            // 解决重复点击创建多个计时器，首次计时器无法关闭的问题  
            wolf.onclick = null;  
            // 计算得分  
            if (type == "x") \{  
                scoreNum -= 10 ;   
            \}else\{  
                scoreNum += 10;  
            \}  
            score.innerHTML = scoreNum ;  
            // 关闭狼身上正在运行的计时器  
            clearInterval(wolf.upTimer);  
            clearInterval(wolf.downTimer);  
            // 更换被打击的图片路径  
            index = 6;  
            wolf.hurtTimer = setInterval(  
                function()\{  
                    wolf.src = "img/"+type+index+".png";  
                    index++;  
                    if (index>9) \{  
                        clearInterval(wolf.hurtTimer);  
                        wolf.remove();  
                        indexArr.shift();  
                    \}  
                \},100)  
        \}  
        // 狼出现  
        wolf.upTimer = setInterval(function()\{  
            wolf.src = "img/"+type+index+".png";  
            index++;  
            if (index >= 5) \{  
                // 关闭狼出现的计时器，打开狼下降的计时器  
                clearInterval(wolf.upTimer);  
                wolf.downTimer = setInterval(function()\{  
                    wolf.src = "img/"+type+index+".png";  
                    index--;  
                    if (index==0) \{  
                        clearInterval(wolf.downTimer);  
                        // 将狼从wrap中删除  
                        wolf.remove();  
                        // 将此狼的位置解放，先创建的先消失  
                        indexArr.shift();  
                    \}  
                \},150)  
            \}  
        \},150)  
        // 将生成的狼写入wrap中  
        wrap.appendChild(wolf);  
    \}

// 倒计时的函数  
    function timerFu()\{  
        // 游戏时间是1分钟=60s=60000ms  
        var t=0,d=2000,b=180,c=-180;  
        var timer = setInterval(function()\{  
            t++;  
            timeImg.style.width = Tween.Linear(t,b,c,d)+"px";  
            if (t>=d) \{  
                // 游戏结束  
                clearInterval(timer);  
                // 关闭创建狼的计时器  
                clearInterval(createTimer);  
                start.innerHTML = "GAME OVER";  
                start.style.display="block";  
            \}  
        \},30)  
    \}

//生成狼类型的函数  
    function wolfType()\{  
        n = randomNum(0,100);  
        if (n < 30) \{  
            // 小灰灰  
            return "x";  
        \}else\{  
            // 灰太狼  
            return "h";  
        \}  
    \}  
    // 随机数函数  
    function randomNum(max,min)\{  
        return Math.floor(Math.random()\*(max-min)+min);  
    \}  
</script>  
</html>

[70]: /images/20220517/63a8b4a460c14988914e3c8aaff76ea8.png