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

洛可可白2024-03-10 11:31

🌟 前言

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

文章目录

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

简介

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

体验地址

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

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

准备工作

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

代码编辑器我推荐 Visual Studio Code

创建游戏结构

1. HTML布局

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

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-container">
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <!-- 更多地鼠洞 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

设计游戏样式

2. CSS样式

接下来，我们将使用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来添加游戏逻辑。

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("div").classList.add("wam-mole--up");
        setTimeout(() => {
          hole.querySelector("div").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("div")
          .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 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️打地鼠</title>
    <style>
      * {
        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;
      }
    </style>
  </head>

  <body>
    <h1>打地鼠</h1>
    <div class="bigBox">
      <div class="wam-container">
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
      </div>
      <div class="wam-score">分数: 0</div>
      <div class="wam-message">准备好了吗？点击我开始</div>
    </div>

    <script>
      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("div").classList.add("wam-mole--up");
        setTimeout(() => {
          hole.querySelector("div").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("div")
          .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);
    </script>
  </body>
</html>

结语

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

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

相关推荐
理想不理想v9 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我10 分钟前
浏览器交互事件汇总
前端·交互
YBN娜23 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 =￣ω￣=23 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck28 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习！1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解