打地鼠小游戏

html:

 

0分

   

css:

* {
            margin: 0;
            padding: 0;
        }

        .cleanfix {
            content: "";
            clear: both;
            display: block;
        }

        .box {
            width: 1180px;
            margin: 0 auto;
        }

        .box .txt {
            display: block;
            text-align: center;
            width: 1180px;
            height: 50px;
        }

        .box .txt p {
            width: 200px;
            height: 40px;
            display: inline-block;
            font-size: 30px;
            line-height: 20px;
            text-align: center;
            font-weight: bold;
            margin: 5px 5px;
            background-color: azure;
        }
        .fen{
            margin-top: 10px;
            font-size: 50px;
            line-height: 50px;
            text-align: center;
        }

        table {

            background: url(bg.jpg) no-repeat;
            background-size: 100% 100%;
            width: 800px;
            height: 600px;
            border: 1px solid red;
            margin: 20px auto;
            border-collapse: collapse;
        }

        a{
            text-decoration: none;
            color: black;
        }

        td {
            position: relative;
            width: 200px;
            height: 100px;
            background: url(hole.png) no-repeat center bottom;
            background-size: 200px;
            overflow: hidden;
        }

        td img {
            /* position: absolute; */
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0px;
            z-index: 2;
        }

        .dong {
            position: absolute;

            bottom: 20px;
            left: 50px;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }

        .txt p {
            cursor: pointer;
            
        }
        .dds{
            animation-name: chulai;
            animation-duration: .6s;
        }
        @keyframes chulai{
            0%{
                top: 80px;
            }
            100%{
                top: 0;
            }
        }

js:

var td = document.querySelectorAll('td')
    var star = document.querySelector(".start")
    var again = document.querySelector(".again")
    var fen=document.querySelector(".fen")
    var timer = null
    var f=0

    star.addEventListener('click', function () {
        var td = document.querySelectorAll('td')
        var table = document.querySelector('table')
        var cursor = document.querySelector(".cursor")

        function ss() {
            var suiji = Math.floor(Math.random() * 16)
            td[suiji].innerHTML = `
               

 
                `
                console.log(td[suiji].children);   
        }
        ss()
       
        table.addEventListener("mousemove", function () {
            table.style.cursor = 'url(cursor.png),auto'
        })
        td.forEach(function (v, i) {
            td[i].addEventListener('mousedown', function (e) {
                table.style.cursor = 'url(cursor-down.png),auto'
                if (e.target.tagName == 'IMG') {
                    td[i].textContent = ''
                    ss()
                    fen.textContent=`${f+=10}分`
                    // console.log(td[i]);
                }
               
            })
            td[i].addEventListener('mouseup', function () {
                table.style.cursor = 'url(cursor.png),auto'
            })
        })
        
        clearInterval(timer)
        timer = setInterval(function () {
            ss()
        }, 1366)
    })