$$demo <img id="hammer" class="hammer" src="/examples/assets/锤头.png" alt="" />

<div class="info"> <p id="label">倒计时：<span id="counter"></span> 秒</p> <p id="finished" hidden>游戏结束</p> <p>得分：<span id="score"></span> 分</p> </div> <div id="container" class="container"></div> <div id="startBtn" class="start" onclick="start()">开始游戏</div> <script> document.body.addEventListener("mousedown", function () { hammer.style.transform = "rotate(-90deg)" const hit = new Audio("/examples/assets/捶打.mp3") hit.play() })

document.body.addEventListener("mouseup", function () {
    hammer.style.transform = null
})

document.body.addEventListener("mousemove", function (event) {
    hammer.style.top = event.clientY - 150 + "px"
    hammer.style.left = event.clientX + 50 + "px"
})

let holeList = []
for (var i = 0; i < 9; i++) {
    const hole = document.createElement("img")
    hole.src = "/examples/assets/宝贝球.png"
    hole.classList.add("hole")

    holeList.push(hole)

    container.append(hole)
}

let counterValue = 10
counter.textContent = counterValue

let scoreValue = 0
score.textContent = scoreValue

const background = new Audio("/examples/assets/背景.mp3")

function start() {
    counterValue = 10
    counter.textContent = counterValue
    scoreValue = 0
    score.textContent = scoreValue

    label.hidden = false
    finished.hidden = true
    startBtn.hidden = true

    background.loop = true
    background.volume = 0.5
    background.play()

    const running = setInterval(function () {
        if (counterValue == 0) {
            clearInterval(running)
            label.hidden = true
            finished.hidden = false
            startBtn.hidden = false

            background.currentTime = 0
            background.pause()

            return
        }

        counterValue--
        counter.textContent = counterValue

        // 随机地鼠
        let idx = Math.floor(Math.random() * holeList.length)

        if (Math.floor(Math.random() * 4) == 0) {
            // 1/4的概率出皮卡丘
            // 击中皮卡丘扣分
            holeList[idx].src = "/examples/assets/皮卡丘.png"
            holeList[idx].onmousedown = function () {
                scoreValue--
                holeList[idx].src = "/examples/assets/错.png"
                score.textContent = scoreValue

                holeList[idx].onmousedown = null
            }
        } else {
            // 3/4的概率出地鼠
            // 击中地鼠得分
            holeList[idx].src = "/examples/assets/地鼠.png"
            holeList[idx].onmousedown = function () {
                scoreValue++
                holeList[idx].src = "/examples/assets/对.png"
                score.textContent = scoreValue

                holeList[idx].onmousedown = null
            }
        }

        setTimeout(function () {
            // 1 秒后消失
            holeList[idx].onmousedown = null
            holeList[idx].src = "/examples/assets/宝贝球.png"
        }, 1000)
    }, 1000)
}

</script> <style> body { /* 隐藏鼠标 */ cursor: none;

    /* 禁止选择元素 */
    user-select: none;
    /* 禁止拖拽元素 */
    -webkit-user-drag: none;
}
* {
    /* 所有元素继承禁止拖拽 */
    -webkit-user-drag: inherit;
}
.info {
    width: 600px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;

    font-size: 36px;
}

.hammer {
    transform-origin: bottom;
    transform: rotate(-30deg);

    transition: transform 0.1s;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 99;

    pointer-events: none;
}

.container {
    display: flex;

    justify-content: space-between;
    flex-wrap: wrap;

    width: 600px;
    height: 600px;

    margin: 0 auto;
}
.hole {
    width: 30%;
    height: 30%;
}

.start {
    margin: 0 auto;

    width: max-content;

    color: white;
    font-size: 20px;
    font-weight: bold;

    background-color: #fe0032;
    padding: 10px 20px;

    border: 6px solid #080405;
    border-radius: 6px;
}
.start:hover {
    background-color: #c40027;
}

</style>

$$