前言

���迎来到我的技术小宇宙！ 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。

• 洛可可白：个人主页

• 个人专栏：✅前端技术 ✅后端技术

• 个人博客：洛可可白博客

• 代码获取：bestwishes0203

• 封面壁纸：洛可可白wallpaper

  文章目录

  • 打造你的HTML5打地鼠游戏：零基础入门教程
  • • 简介
    • 准备工作
    • 创建游戏结构
    • • 1. HTML布局
      • 设计游戏样式
      • • 2. CSS样式
        • 实现游戏逻辑
        • • 3. JavaScript编程
          • 全部代码
          • 结语

            打造你的HTML5打地鼠游戏：零基础入门教程

            简介

            在这个教程中，我们将一起学习如何使用HTML、CSS和JavaScript来创建一个简单的打地鼠游戏。这不仅是一个有趣的项目，也是学习前端开发技能的绝佳方式。

            体验地址

            PC端体验地址： 洛可可白⚡️打地鼠

            （暂时只支持键盘输入操作）

            准备工作

            确保你的开发环境已经安装了现代浏览器，如Chrome、Firefox或Safari。我们将使用这些浏览器的开发者工具来调试和优化我们的游戏。

            代码编辑器我推荐 Visual Studio Code

            创建游戏结构

            1. HTML布局

            首先，我们需要创建一个基本的HTML页面，它将包含游戏的布局和地鼠洞。

                        洛可可白⚡️打地鼠                                                                            

            设计游戏样式

            2. CSS样式

            接下来，我们将使用CSS来美化我们的游戏界面。

                  /* styles.css */      * {        box-sizing: border-box;      }      h1 {        text-align: center;        line-height: 30px;      }      .bigBox {        width: 60%;        height: 400px;        margin: 20px auto;        background-color: #cbbb3e;      }      .wam-container {        display: flex;        flex-wrap: wrap;        justify-content: center;        align-items: center;        height: 260px;      }      .wam-hole {        position: relative;        width: 100px;        height: 100px;        margin: 0 20px;        background-color: #f5732d;      }      .wam-mole {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        /* 地鼠 */        background-image: url("https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg");        background-size: 100% 100%;        display: none;      }      .wam-mole--up {        display: block;      }      .wam-score {        font-size: 2rem;        text-align: center;      }      .wam-message {        font-size: 1rem;        text-align: center;        margin-top: 20px;        cursor: pointer;      }/* 你可以添加更多的CSS来美化地鼠洞和地鼠 */

            实现游戏逻辑

            3. JavaScript编程

            现在，我们将使用JavaScript来添加游戏逻辑。

            const container = document.querySelector(".wam-container");      const scoreBoard = document.querySelector(".wam-score");      const message = document.querySelector(".wam-message");      const moles = Array.from(container.querySelectorAll(".wam-hole"));      let lastHole;      let score = 0;      let isPlaying = false;      let timeUp = false;      // 随机时间生成地鼠      function popUpMole() {        if (timeUp) return;        const time = Math.random() * (1500 - 500) + 500;        const hole = randomHole(moles);        hole.querySelector("p").classList.add("wam-mole--up");        setTimeout(() => {          hole.querySelector("p").classList.remove("wam-mole--up");          if (!timeUp) popUpMole();        }, time);      }      // 随机选择一个地鼠洞      function randomHole(holes) {        const idx = Math.floor(Math.random() * holes.length);        const hole = holes[idx];        if (hole === lastHole) return randomHole(holes);        lastHole = hole;        return hole;      }      // 点击地鼠      function whackMole(e) {        if (!e.isTrusted) return; // 防止作弊        if (!isPlaying) return;        if (!e.target.matches(".wam-mole")) return;        score++;        scoreBoard.textContent = `分数: ${score}`;        e.target.parentNode          .querySelector("p")          .classList.remove("wam-mole--up");      }      // 开始游戏      function startGame() {        score = 0;        scoreBoard.textContent = "分数: 0";        isPlaying = true;        timeUp = false;        message.textContent = "";        popUpMole();        setTimeout(() => {          isPlaying = false;          timeUp = true;          message.textContent = `一分钟您的得分是: ${score}；点我再来一次！`;        }, 60000);      }      // 初始化地鼠洞      moles.forEach((mole) => mole.addEventListener("click", whackMole));      document        .querySelector(".wam-message")        .addEventListener("click", startGame);

            这段代码创建了一个简单的游戏循环，每秒钟随机显示一个地鼠，并在用户点击地鼠时给予反馈。你可以根据需要调整地鼠出现的速度和游戏的其他方面。

            全部代码

                              洛可可白⚡️打地鼠          * {        box-sizing: border-box;      }      h1 {        text-align: center;        line-height: 30px;      }      .bigBox {        width: 60%;        height: 400px;        margin: 20px auto;        background-color: #cbbb3e;      }      .wam-container {        display: flex;        flex-wrap: wrap;        justify-content: center;        align-items: center;        height: 260px;      }      .wam-hole {        position: relative;        width: 100px;        height: 100px;        margin: 0 20px;        background-color: #f5732d;      }      .wam-mole {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        /* 地鼠 */        background-image: url("https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg");        background-size: 100% 100%;        display: none;      }      .wam-mole--up {        display: block;      }      .wam-score {        font-size: 2rem;        text-align: center;      }      .wam-message {        font-size: 1rem;        text-align: center;        margin-top: 20px;        cursor: pointer;      }            
            打地鼠
                                                                                                                                                                    分数: 0      准备好了吗？点击我开始              const container = document.querySelector(".wam-container");      const scoreBoard = document.querySelector(".wam-score");      const message = document.querySelector(".wam-message");      const moles = Array.from(container.querySelectorAll(".wam-hole"));      let lastHole;      let score = 0;      let isPlaying = false;      let timeUp = false;      // 随机时间生成地鼠      function popUpMole() {        if (timeUp) return;        const time = Math.random() * (1500 - 500) + 500;        const hole = randomHole(moles);        hole.querySelector("p").classList.add("wam-mole--up");        setTimeout(() => {          hole.querySelector("p").classList.remove("wam-mole--up");          if (!timeUp) popUpMole();        }, time);      }      // 随机选择一个地鼠洞      function randomHole(holes) {        const idx = Math.floor(Math.random() * holes.length);        const hole = holes[idx];        if (hole === lastHole) return randomHole(holes);        lastHole = hole;        return hole;      }      // 点击地鼠      function whackMole(e) {        if (!e.isTrusted) return; // 防止作弊        if (!isPlaying) return;        if (!e.target.matches(".wam-mole")) return;        score++;        scoreBoard.textContent = `分数: ${score}`;        e.target.parentNode          .querySelector("p")          .classList.remove("wam-mole--up");      }      // 开始游戏      function startGame() {        score = 0;        scoreBoard.textContent = "分数: 0";        isPlaying = true;        timeUp = false;        message.textContent = "";        popUpMole();        setTimeout(() => {          isPlaying = false;          timeUp = true;          message.textContent = `一分钟您的得分是: ${score}；点我再来一次！`;        }, 60000);      }      // 初始化地鼠洞      moles.forEach((mole) => mole.addEventListener("click", whackMole));      document        .querySelector(".wam-message")        .addEventListener("click", startGame);      

            结语

            恭喜你，现在你已经创建了一个基本的打地鼠游戏！这个游戏可以作为一个起点，你可以添加计分系统、动画效果、音效等来提升游戏体验。记得保存你的代码，并在浏览器中打开HTML文件来查看游戏效果。祝你编程愉快！

            感谢你的访问，期待与你在技术的道路上相遇！