锅打灰太狼/打地鼠项目

最新推荐文章于 2023-11-12 22:10:45 发布

不列颠哈士奇

最新推荐文章于 2023-11-12 22:10:45 发布

阅读量2.3k

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/HusKiy/article/details/120938219

版权

先看看效果

游戏的时间和难度可以自己调整

接下来就是代码部分，图片我不知道怎么给，其实图片无所谓了，换成其他图片也是可以的，我提供的不过是一种思路，给你一个思路过程罢了

<!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/打地鼠.css">
</head>  
<body>
    <!-- 开始游戏界面 -->
    <div class="box1 box">
        <p>锅打灰太狼</p>
        <button class="kaishi">开始游戏</button>
        <img class="img1" src="img/x5.png" alt="">
        <img class="img2" src="img/h6.png" alt="">
    </div>
    <!-- 游戏内容界面 -->
    <div class="box2 box">
        <div class="jdt"></div>
        <p class="des">0</p>
    </div>
    <!-- 游戏结束界面 -->
    <div class="box3 box">
        <h1 class="jieshu">游戏结束</h1>
        <h1 class="defen">得分是</h1>
        <button class="fanhui">点击返回重新游戏</button>
    </div>
</body>
<script src="js/打地鼠.js"></script>
</html>

这是js部分

window.onload = function(){
    //将这个把所有代码包起来后就可以让代码在html加载完后加载
    box1=document.querySelector(".box1");
    box2=document.querySelector(".box2");
    box3=document.querySelector(".box3");
    kaishi=document.querySelector(".kaishi");
    defens=document.querySelector(".des");
    defen=document.querySelector(".defen");
    fanhui=document.querySelector(".fanhui")
    
    var num1=0;
    var num2=0;
    //设置一个值用来存储得分
    NUMdefen=0;

    //存储坑洞的位置
    var wei=[
        {top:"115px",
        left:"99px"},
        {top:"141px",
        left:"188px"},
        {top:"212px",
        left:"200px"},
        {top:"295px",
        left:"208px"},
        {top:"275px",
        left:"120px"},
        {top:"293px",
        left:"31px"},
        {top:"221px",
        left:"17px"},
        {top:"160px",
        left:"19px"},
        {top:"192px",
        left:"103px"},
    ]

    //开始游戏，默认第二部分和第三部分隐藏，点击开始按钮，第一部分隐藏，第二部分显示,进入游戏模式
    kaishi.onclick=function(){
        box1.style.display="none";
        box2.style.display="block";
        box3.style.display="none";
        Time();
    }
    
    //结束游戏返回重新开始
    fanhui.onclick=function(){
        box1.style.display="block";
        box2.style.display="none";
        box3.style.display="none";
    }

    //找到进度条控制时间
    var jdt=document.querySelector(".jdt")
    function Time(){
        wuxian();
        //获取进度条的长度,181
        var jdwidth=jdt.offsetWidth;
        var times=setInterval(function(){
            if(jdwidth<=0){
                var dels=setInterval(function(){},1);
                for(var i=1;i<=dels;i++){
                    clearInterval(i);
                }
                box1.style.display="none";
                box2.style.display="none";
                box3.style.display="block";
                defen.innerHTML="您的得分是"+NUMdefen+"分";
            }
            jdt.style.width=jdwidth+"px";
            jdwidth-=1;
        },50)
    }

    //无限执行动画
    var wuxian;
    function wuxian(){
        wxdh=setInterval(function(){
            htl();
            xhh();
        },2000)
    }

    //狼出来动画
    function htl(){
        num1=0;
        //设置随机数,九个坑洞需要九个随机数
        var suiji=Math.floor(Math.random()*9)
        //创建图片标签
        var appimg=document.createElement("img");
        box2.appendChild(appimg);

        //如果点击到了图片就会触发击打动画
        appimg.onclick=function(){
            //将点击事件取消，这这样就不能对一个图片点击多次触发打击动画
            this.onclick=null;
            num1=6;
            //计算得分
            NUMdefen=NUMdefen+10;
            defens.innerHTML=NUMdefen;

            //将灰太狼的上升和下降定时器取消
            clearInterval(htlup);
            clearInterval(htldown);
            //设置被击打定时器
            var jida=setInterval(function(){
                num1++;
                console.log(num1);
                if(num1>=9){
                    clearInterval(jida);
                    appimg.remove();
                }
                appimg.src="./img/h"+num1+".png";
            },120)
        }

        //设置灰太狼上升定时器
        var htlup=setInterval(function(){
            appimg.style.position="absolute";
            appimg.style.top=wei[suiji].top;
            appimg.style.left=wei[suiji].left;
            num1++;
            if(num1==5){
                //当上升图片全出来后停止这个定时器然后调用下降方法
                clearInterval(htlup)
                htldowns(appimg)
            }
            appimg.src="./img/h"+num1+".png";
        },120)

        //灰太狼下降定时器
        var htldown;
        function htldowns(appimg){
            htldown=setInterval(function(){
                num1--;
                if(num1<=0){
                    //当下降图片全出来后停止这个定时器然后清除图片
                    clearInterval(htldown);
                    appimg.remove();
                    num1=0;
                };
                appimg.src="./img/h"+num1+".png";
            },120);
        }
    };
 

    //小灰灰出来动画
    function xhh(){
        num2=0;
        //设置随机数,九个坑洞需要九个随机数
        var suiji=Math.floor(Math.random()*9)
        //创建图片标签
        var appimg2=document.createElement("img");
        box2.appendChild(appimg2);

        //如果点击到了图片就会触发击打动画
        appimg2.onclick=function(){
            this.onclick=null;
            num2=6; 
            //计算得分
            NUMdefen=NUMdefen-10;
            defens.innerHTML=NUMdefen;
            clearInterval(xhhup);
            clearInterval(xhhdown);
            var jida2=setInterval(function(){
                num2++;
                if(num2>=9){
                    clearInterval(jida2);
                    appimg2.remove();
                }
                appimg2.src = "./img/x"+num2+".png";
            },120)
        }

        //小灰灰出来定时器
        var xhhup=setInterval(function(){
            appimg2.style.position="absolute";
            appimg2.style.top=wei[suiji].top;
            appimg2.style.left=wei[suiji].left;
            num2++;
            if(num2==6){
                //当上升图片全出来后停止这个定时器然后调用下降方法
                clearInterval(xhhup);
                xhhdowns(appimg2)
            }else{
                appimg2.src="./img/x"+num2+".png";
            };
        },120)

        //小灰灰下去定时器
        var xhhdown;
        function xhhdowns(appimg2){
            xhhdown=setInterval(function(){
                num2--;
                appimg2.src="./img/x"+num2+".png";
                if(num2==0){
                    //当下降图片全出来后停止这个定时器然后清除图片
                    clearInterval(xhhdown);
                    appimg2.remove();
                    num2=0;
                };
            },120);
        }
    };   



};

这是css部分

.box{
    width: 320px;
    height: 480px;
    border-radius: 5%;
    margin: 100px auto;
}
.box1{
    background-color: #00b0ff;
    overflow: hidden;
}
.box1 p{
    color: orange;
    font-size: 40px;
    font-weight: 700;
    margin: 10px auto;
    text-align: center;
    margin-top: 120px;
}
.box1 button{
    width: 200px;
    height: 50px;
    color: white;
    border: none;
    display: block;
    font-size: 30px;
    font-weight: 800;
    border-radius: 5%;
    margin: 60px auto;
    background-color: red;
}
.img1{
    float: left;
    margin: 40px 0 0 50px;
}
.img2{
    float: right;
    margin: 40px 50px 0 0;
}

.box2{
    display: none;
	position: relative;
    background-color: red;
    background: url(../img/game_bg.jpg);
}
.jdt{
    top: 65px;
    left: 63px;
    width: 181px;
    height: 17px;
    position: absolute;
    border-radius: 20px;
    background-color: red;
}
.des{
    top: -26px;
    left: 57px;
    color: red;
    font-size: 30px;
    font-weight: 700;
    position:absolute;

}
.box3{
    background-color: rgb(115, 248, 115);
    display: none;
    overflow: hidden;
}
.jieshu{
    color: red;
    margin:100px 0 0 0;
    text-align: center;
}
.box3 button{
    width: 200px;
    height: 50px;
    display: block;
    border-radius: 20px;
    margin: 50px auto;
    text-align: center;
    font-size: 20px;
}
.defen{
    color: red;
    text-align: center;
}

不列颠哈士奇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
锅打灰太狼/打地鼠项目

先看看效果游戏的时间和难度可以自己调整接下来就是代码部分，图片我不知道怎么给，其实图片无所谓了，换成其他图片也是可以的，我提供的不过是一种思路，给你一个思路过程罢了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met.
复制链接

扫一扫