1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

$$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>

$$