打地鼠无敌版

最新推荐文章于 2022-06-16 18:02:40 发布

雪夜里的枫叶

最新推荐文章于 2022-06-16 18:02:40 发布

阅读量71

点赞数

分类专栏：小游戏

本文链接：https://blog.csdn.net/weixin_47675736/article/details/116694628

版权

小游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面是关于打地鼠小游戏的HTML代码,下方有代码所需要的图片.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: darkturquoise;
        }
        h3{
            text-indent: 200px; /* 将段落的第一行缩进 200 像素 */
            font-size: 50px;
            color:palegoldenrod;
            letter-spacing: 10px;
            margin-top: 100px;
        }
        .main{
            widows: 600px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows:200px 200px 200px;
        }
        .main:hover{
            /* cursor修改鼠标样式 */
            /* cursor: url("img/未标题-2.ico"),auto;  */
            cursor: url("img/锤子1.ico"),auto;

        }
        .item{
            width: 100%;
            height: 100%;
            position: relative;
           
        }
        .item img{
            width: 90%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
        .item .mouse{
            width: 60%;
        }
        .item .hole{
            display: block;
        }
        .item .boom{
            width: 60%;
        }
    </style>
</head>
<body>
    <h3>积分: <span class="score">0</span></h3>
    <div class="main">
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
            <div class="item">
                <img src="img/边框.png" alt="" class="hole">
                <img src="img/地鼠.png" alt="" class="mouse">
                <img src="img/地鼠2.png" alt="" class="boom">
            </div>
    </div>
    <script>
         var mouseLists=document.querySelectorAll(".mouse");
         var score=document.querySelectorAll(".score")[0]
         var s=0;
         for(var i=0;i<mouseLists.length;i++){
             //给每个老鼠绑定点击事件,当点击老鼠的时候,让老鼠消失
             mouseLists[i].onclick=function(){
                 this.style.display="none";
                 this.parentElement.lastElementChild.style.display="block";
                 var _that=this;//声明一个变量储存this
                 s+=100;
                 setTimeout(function(){
                    _that.parentElement.lastElementChild.style.display="none";
                 },260)
                 score.innerHTML=s;
             }
         }
         setInterval(function(){
             var i=Math.floor(Math.random()*9)
             mouseLists[i].style.display="block";
         },1000)
    </script>
</body>
</html>

下面是代码实现的一张效果图,因为截图需要用到鼠标,所有鼠标修改后的样式看不见效果,因为鼠标样式图片无法上传,大家可以把修改鼠标样式的代码注销掉,或者自己去找想要的样式进行稍加修改就行。

请添加图片描述

关于代码中需要的小锤子标志,这里因为图片格式问题无法上传,需要的话可以自己扣一下图。

雪夜里的枫叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打地鼠无敌版

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
复制链接

扫一扫