首页
前端开发
Javascript
如何用HTML实现打地鼠小游戏

如何用HTML实现打地鼠小游戏

18 次浏览 0 条评论
zip
zip

本篇将详细介绍如何用HTML实现一个简单的打地鼠小游戏，让您可以轻松上手并扩展功能。

步骤1：准备基础HTML结构

创建一个简单的HTML文件结构，添加游戏的基本布局。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>打地鼠小游戏</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
    
打地鼠游戏

    

        <!-- 地鼠格子将放置于此 -->
    

    [removed][removed]
</body>
</html>

步骤2：CSS样式设置

为地鼠格子添加样式，使其排列整齐，布局清晰美观。

#game-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
}
.grid-item {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.active {
    background-color: #f00;
}

步骤3：JavaScript功能实现

编写JavaScript逻辑来控制地鼠的随机出现和击中反应。

const gridItems = document.querySelectorAll('.grid-item');
let activeIndex = null;

function randomMole() {
    gridItems.forEach(item => item.classList.remove('active'));
    activeIndex = Math.floor(Math.random() * gridItems.length);
    gridItems[activeIndex].classList.add('active');
}

function hitMole(event) {
    if (event.target.classList.contains('active')) {
        alert('击中地鼠！');
        randomMole();
    }
}

setInterval(randomMole, 1000);
gridItems.forEach(item => item.addEventListener('click', hitMole));

游戏扩展建议

  1. 增加分数统计。
  2. 设置游戏时间限制。
  3. 添加不同难度的地鼠刷新速度。

通过以上步骤，您可以实现一个基本的打地鼠小游戏，并进一步进行优化！

zip 文件大小：2.85MB