打造你的HTML5打地鼠游戏：零基础入门教程
🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🔥 个人专栏：✅前端技术 ✅后端技术
🏠 个人博客：洛可可白博客
🐱 代码获取：bestwishes0203
📷 封面壁纸：洛可可白wallpaper
文章目录
- 打造你的HTML5打地鼠游戏：零基础入门教程
- 简介
- 准备工作
- 创建游戏结构
- 1. HTML布局
- 设计游戏样式
- 2. CSS样式
- 实现游戏逻辑
- 3. JavaScript编程
- 全部代码
- 🎉 结语
- 🎉 往期精彩回顾
打造你的HTML5打地鼠游戏：零基础入门教程
简介
在这个教程中，我们将一起学习如何使用HTML、CSS和JavaScript来创建一个简单的打地鼠游戏。这不仅是一个有趣的项目，也是学习前端开发技能的绝佳方式。
体验地址
PC端体验地址： 洛可可白⚡️打地鼠
（暂时只支持键盘输入操作）
准备工作
确保你的开发环境已经安装了现代浏览器，如Chrome、Firefox或Safari。我们将使用这些浏览器的开发者工具来调试和优化我们的游戏。
代码编辑器我推荐 Visual Studio Code
创建游戏结构
1. 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来美化我们的游戏界面。
/* 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("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);
这段代码创建了一个简单的游戏循环，每秒钟随机显示一个地鼠，并在用户点击地鼠时给予反馈。你可以根据需要调整地鼠出现的速度和游戏的其他方面。
全部代码
<!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文件来查看游戏效果。祝你编程愉快！
如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
- VS Code上搭建Vue开发环境
- 文章浏览阅读10.1k次，点赞64次，收藏13次。
- Color-UI 简介及使用教程
- 文章浏览阅读5.9k次，点赞13次，收藏2次。
- Vue.2&Vue.3项目引入Element-UI教程&踩坑
- 文章浏览阅读9.2k次，点赞82次，收藏22次。
- VS code搭建C/C++运行环境简单易上手
- 文章浏览阅读2.7k次，点赞8次，收藏5次。
- 入门指南：使用uni-app构建跨平台应用
- 文章浏览阅读1.2k次，点赞29次，收藏9次。
相关文章：
打造你的HTML5打地鼠游戏：零基础入门教程
🌟 前言 欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...
C++默认构造函数/拷贝构造函数/赋值构造函数
概述 本文主要讲解C默认构造函数，拷贝构造函数和赋值构造函数在哪些场景下会被调用到 代码 类定义 class A{public:A() { cout<<"construct function"<<endl; }A(const A& other) { cout<<"copy construct function"…...
前端框架的发展历史介绍
前端框架的发展历史是Web技术进步的一个重要方面。从最初的简单HTML页面到现在的复杂单页应用程序（SPA），前端框架和库的发展极大地推动了Web应用程序的构建方式。以下是一些关键的前端框架和库，以及它们的发布年份、创建者和主要特…...
Linux 基本命令
文章目录 1.echo2.cd3.find4.mkdir5.cp6.rm7.wc8.tar9.tail10.vim11.grep12.sed13 touch14 ls15 快捷键16 ln17 mv18 useradd19 usermod20 su 每天一个Linux命令 提示：以下是本篇文章正文内容，下面案例可供参考 1.echo 中文 (Chinese): “回声” 或 “输…...
怎么查看电脑是不是固态硬盘？简单几个步骤判断
随着科技的发展，固态硬盘（Solid State Drive，简称SSD）已成为现代电脑的标配。相较于传统的机械硬盘，固态硬盘在读写速度、稳定性和耐用性等方面都有显著优势。但是，对于不熟悉电脑硬件的用户来说࿰…...
在Java中如何优雅的停止一个线程？可别再用Thread.stop()了！
写在开头 经过上几篇博文的学习，我们知道在Java中可以通过new Thread().start()创建一个线程，那今天我们就来思考另外一个问题：线程的终止 自然终止有两种情况： 1. 线程的任务执行完成； 2. 线程在执行任务过程中发生异…...
指数函数与三角函数乘积的积分公式
先上公式，公式正确，用欧拉公式即可证明。 数学公式不好打字，我就发截图。 欧拉公式证明如下：...
代码随想录算法训练营第五九天 | 下一个更大元素II、接雨水
目录 下一个更大元素II接雨水 LeetCode 503.下一个更大元素II LeetCode 42. 接雨水 下一个更大元素II 给定一个循环数组 nums （ nums[nums.length - 1] 的下一个元素是 nums[0] ），返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一…...
算法题_2864_最大二进制奇数)
LeetCode(力扣)算法题_2864_最大二进制奇数
最大二进制奇数 题目描述 给你一个 二进制 字符串 s ，其中至少包含一个 1 。 你必须按某种方式 重新排列 字符串中的位，使得到的二进制数字是可以由该组合生成的 最大二进制奇数 。 以字符串形式，表示并返回可以由给定组合生成的最大二进…...
食药物质创新 赋能中式滋补健康产业发展交流会圆满结束
3月5日，“食药物质创新 赋能中式滋补健康产业发展交流会”在山东国际会展中心召开。本次会议由中国生物发酵产业协会主办，浙江科技大学、未名太研生物科技(绍兴)有限公司承办，汇乐达供应链服务(常州)有限责任公司支持。本次论坛旨在加强行业创…...
用好大模型、承载“头雁领航”使命，央企如何三路出击？
作者 | 曾响铃 文 | 响铃说 智能化成为两会热议话题，2024政府工作报告中也直接提到要深化大数据、人工智能等研发应用，开展“人工智能”行动。 毫无疑问，大模型热潮下，以智能化推进传统产业升级已经成为普遍共识。 具体如何做…...
LabVIEW飞机液压基础试验台测试系统
LabVIEW飞机液压基础试验台测试系统 为解决飞机液压基础实验台人工控制操作复杂、测试时间长、测试流程易出错等问题，开发了一套基于LabVIEW的飞机液压基础试验台测试系统。该系统通过计算机控制，实现了高度自动化的测试流程，有效提高了测试…...
STM32第十课：串口发送
一、usart串口 1.1 USART串口协议 串口通讯(Serial Communication) 是一种设备间非常常用的串行通讯方式，因为它简单便捷，因此大部分电子设备都支持该通讯方式，电子工程师在调试设备时也经常使用该通讯方式输出调试信息。在计算机科学里&…...
淘宝扭蛋机小程序：探索未知的惊喜之旅
你是否曾在商场里被那闪闪发光的扭蛋机吸引，却因为种种原因无法下手？现在，淘宝扭蛋机小程序带给你全新的扭蛋体验，让你随时随地都能感受到那份未知的惊喜。 淘宝扭蛋机小程序是一款集娱乐与购物于一体的全新应用。它汇聚了众多热…...
[nlp入门论文精读] | Transformer
写在前面 最近工作从CV转向了NLP，于是空余时间便跟着哔哩哔哩李沐老师的视频学习。其实研一NLP课程讲论文的时候，我们小组就选择了经典的Attention和Bert，但还有很多细节并不完全理解，实际使用时也很困惑。 因此这个系列就来记…...
科技回顾，飞凌嵌入式受邀亮相第八届瑞芯微开发者大会「RKDC2024」
2024年3月7日~8日，第八届瑞芯微开发者大会（RKDC2024）在福州举行，本届大会以“AI芯片AI应用AloT”为主题，邀请各行业的开发者共启数智化未来。 本届大会亮点颇多，不仅有13大芯片应用展示、9场产品和技术论坛…...
代码随想录算法训练营第五十九天丨503. 下一个更大元素 II、42. 接雨水
503. 下一个更大元素 II 还是比较容易想的，扩展数组一倍即可。 class Solution:def nextGreaterElements(self, nums: List[int]) -> List[int]:extended_nums nums * 2n len(nums)mono []res [- 1] * nfor i, num in enumerate(extended_nums):while mono…...
全代码分享｜R语言孟德尔随机化怎么做？TwoSampleMR包MR一套标准流程
文章目录 1.前言1.1 成立条件1.2 三大要素1.3 统计原理 2.demo2.1 加载R包2.2 主要MR分析2.3 MR补充分析、多态性、验证 2.4 结果可视化 1.前言 孟德尔随机化(Mendelian randomization，MR)是一种利用基因变异作为工具变量来评估暴露与结果之间因果关系的统计方法。…...
【AI视野·今日NLP 自然语言处理论文速览 第八十四期】Thu, 7 Mar 2024
AI视野今日CS.NLP 自然语言处理论文速览 Thu, 7 Mar 2024 Totally 52 papers 👉上期速览✈更多精彩请移步主页 Daily Computation and Language Papers The Heuristic Core: Understanding Subnetwork Generalization in Pretrained Language Models Authors Adith…...
英伟达推出免训练，可生成连贯图片的文生图模型ConsiStory，生成角色一致性解决新方案
目前，多数文生图模型皆使用的是随机采样模式，使得每次生成的图像效果皆不同，在生成连贯的图像方面非常差。 例如，想通过AI生成一套图像连环画，即便使用同类的提示词也很难实现。虽然DALLE 3和Midjourney可以对图像实现…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
9-Oracle 23 ai Vector Search 特性 知识准备
很多小伙伴是不是参加了 免费认证课程（限时至2025/5/15） Oracle AI Vector Search 1Z0-184-25考试，都顺利拿到certified了没。 各行各业的AI 大模型的到来，传统的数据库中的SQL还能不能打，结构化和非结构的话数据如何和…...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...