打地鼠js效果图

以下是一个使用HTML、CSS和JavaScript实现的简单打地鼠效果示例：

一、基础概念

HTML（超文本标记语言）
- 用于构建网页的结构。在这个打地鼠游戏中，它定义了游戏区域、地鼠洞等元素的结构。

CSS（层叠样式表）
- 负责网页元素的样式设置。在这里，用于设置游戏区域的布局、地鼠洞的外观、地鼠的样式等。
JavaScript
- 是一种脚本语言，用于实现网页的交互逻辑。在打地鼠游戏中，它控制地鼠的出现时机、检测鼠标点击是否击中地鼠等功能。

二、相关优势

用户体验友好
- 简单直观的游戏玩法容易上手，适合各个年龄段的用户。

可扩展性强
- 可以很容易地添加更多功能，如计分系统、不同难度级别等。
无需复杂设备
- 只需要在浏览器上运行，对设备要求低。

三、类型（这里主要从功能角度）

基础点击型
- 如上述示例，玩家看到地鼠出现就点击。

限时击打型
- 给定一定时间限制，在时间内击打更多地鼠得分更高。
多关卡型
- 随着关卡增加，地鼠出现的频率加快或者游戏难度提高。

四、应用场景

休闲娱乐
- 作为网页上的一个小游戏供用户在闲暇时玩耍。

教学示例
- 在学习HTML、CSS和JavaScript时，可以作为简单的交互示例展示给初学者。

五、代码实现

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>打地鼠游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div id="game - area">
        <div class="hole"></div>
        <div class="hole"></div>
        <div class="hole"></div>
        <div class="hole"></div>
        <div class="hole"></div>
        <div class="hole"></div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS部分（styles.css）

#game - area {
    display: flex;
    justify - content: space - around;
    width: 600px;
    margin: 0 auto;
}

.hole {
    width: 100px;
    height: 100px;
    background: url('hole.png') no - repeat center center;
    background - size: cover;
    position: relative;
}

.mole {
    width: 80px;
    height: 80px;
    background: url('mole.png') no - repeat center center;
    background - size: cover;
    position: absolute;
    bottom: 0;
    left: 10px;
}

JavaScript部分（script.js）

const holes = document.querySelectorAll('.hole');
let score = 0;

function randomTime(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function peep() {
    const time = randomTime(500, 2000);
    const hole = holes[randomTime(0, holes.length)];
    hole.classList.add('mole');
    setTimeout(() => {
        hole.classList.remove('mole');
        if (!gameOver) {
            peep();
        }
    }, time);
}

holes.forEach(hole => {
    hole.addEventListener('click', () => {
        if (hole.classList.contains('mole')) {
            score++;
            hole.classList.remove('mole');
        }
    });
});

let gameOver = false;
peep();

在这个示例中：