web前端打地鼠小游戏

最新推荐文章于 2024-07-30 10:31:44 发布

风情，更与何人说

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量1k

点赞数 3

文章标签： web前端小游戏打地鼠

本文链接：https://blog.csdn.net/shuai_yeye/article/details/103356409

版权

<style>
        #beijing {
            margin: 0 auto;
            padding-top: 100px;
            width: 1200px;
            height: 700px;
            background: url(image/bg.jpg) no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            cursor: url(image/cursor.png), auto;
        }
        
        .jinggai {
            margin: 0;
            padding: 0px;
            width: 26%;
            height: 150px;
            background: url(image/hole.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        
        .laishu {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: url(image/mouse.png) no-repeat;
            position: absolute;
            top: -20%;
            left: 23%;
            display: none;
        }
        
        button {
            display: block;
            margin: 0 auto;
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            color: seashell;
            font-size: 2em;
            cursor: pointer;
        }
    </style>

<body>
    <audio id="all" src="music.mp3" loop="loop"></audio>
    <audio id="qiao" src="dazhong.wav"></audio>
    <button>开始</button>
    <div id="beijing">
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
        <div class="jinggai">
            <div class="laishu"></div>
        </div>
    </div>
    </body>

<script>
        // 获取所有老鼠
        var mouse = document.querySelectorAll(".laishu");
        //console.log(mouse);
        // 获取鼠标所在区域
        var cur = document.querySelector("#beijing")
            //console.log(cur);
            // 获取背景音乐
        var music = document.getElementById("all");
        // 获取打击音乐
        var qiao = document.getElementById("qiao");
        // 获取开始
        var begin = document.querySelector("button")

        // 背景音乐播放
        begin.onclick = function() {
            // console.log(1);
            // 点击开始 变成暂停 开始游戏 背景音乐播放
            if (begin.textContent == "开始") {
                begin.textContent = "暂停";
                timer = setInterval(time, 500);
                music.play();
            } else {
                // 点击暂停 变成开始 暂停游戏 暂停背景音乐
                begin.textContent = "开始";
                clearInterval(timer);
                music.pause();
            }

        }


        // 设置定时器让老鼠随机显示
        var timer = null;
        var time = function() {
            var index = Math.floor(Math.random() * 9)
            mouse[index].style.display = "block"
        }

        // 点击哪个 哪个隐藏
        for (let i = 0; i < mouse.length; i++) {
            mouse[i].onclick = function(e) {
                this.style.display = "none"
            }
        }
        // 鼠标按下 小锤变歪 并有打击声音
        cur.onmousedown = function() {
                cur.style.cursor = "url(image/cursor-down.png),auto";
                qiao.load();
                qiao.play();
            }
            // 鼠标抬起 小锤变正
        cur.onmouseup = function() {
            cur.style.cursor = "url(image/cursor.png),auto";
        }
    </script>