当前位置：首页 > news >正文

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

news 2025/12/22 16:10:36

🌟 前言

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

🤖 洛可可白：个人主页

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

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

🐱 代码获取：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…...

编程日记 2024/3/13 16:53:46

C++默认构造函数/拷贝构造函数/赋值构造函数

概述本文主要讲解C默认构造函数，拷贝构造函数和赋值构造函数在哪些场景下会被调用到代码类定义 class A{public:A() { cout<<"construct function"<<endl; }A(const A& other) { cout<<"copy construct function"…...

编程日记 2024/3/13 16:50:43

前端框架的发展历史介绍

前端框架的发展历史是Web技术进步的一个重要方面。从最初的简单HTML页面到现在的复杂单页应用程序（SPA），前端框架和库的发展极大地推动了Web应用程序的构建方式。以下是一些关键的前端框架和库，以及它们的发布年份、创建者和主要特…...

编程日记 2024/3/13 16:49:42

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): “回声” 或 “输…...

编程日记 2024/3/13 16:48:41

怎么查看电脑是不是固态硬盘？简单几个步骤判断

随着科技的发展，固态硬盘（Solid State Drive，简称SSD）已成为现代电脑的标配。相较于传统的机械硬盘，固态硬盘在读写速度、稳定性和耐用性等方面都有显著优势。但是，对于不熟悉电脑硬件的用户来说&#xff0…...

编程日记 2024/3/13 16:45:38

在Java中如何优雅的停止一个线程？可别再用Thread.stop()了！

写在开头经过上几篇博文的学习，我们知道在Java中可以通过new Thread().start()创建一个线程，那今天我们就来思考另外一个问题：线程的终止自然终止有两种情况： 1. 线程的任务执行完成； 2. 线程在执行任务过程中发生异…...

编程日记 2024/3/13 16:43:34

指数函数与三角函数乘积的积分公式

先上公式，公式正确，用欧拉公式即可证明。数学公式不好打字，我就发截图。欧拉公式证明如下：...

编程日记 2024/3/13 16:41:32

代码随想录算法训练营第五九天 | 下一个更大元素II、接雨水

目录下一个更大元素II接雨水 LeetCode 503.下一个更大元素II LeetCode 42. 接雨水下一个更大元素II 给定一个循环数组 nums （ nums[nums.length - 1] 的下一个元素是 nums[0] ），返回 nums 中每个元素的下一个更大元素。数字 x 的下一…...

编程日记 2024/3/13 16:39:30

LeetCode(力扣)算法题_2864_最大二进制奇数

最大二进制奇数题目描述给你一个二进制字符串 s ，其中至少包含一个 1 。你必须按某种方式重新排列字符串中的位，使得到的二进制数字是可以由该组合生成的最大二进制奇数。以字符串形式，表示并返回可以由给定组合生成的最大二进…...

编程日记 2024/3/13 16:38:29

食药物质创新赋能中式滋补健康产业发展交流会圆满结束

3月5日，“食药物质创新赋能中式滋补健康产业发展交流会”在山东国际会展中心召开。本次会议由中国生物发酵产业协会主办，浙江科技大学、未名太研生物科技(绍兴)有限公司承办，汇乐达供应链服务(常州)有限责任公司支持。本次论坛旨在加强行业创…...

编程日记 2024/3/13 16:36:08

用好大模型、承载“头雁领航”使命，央企如何三路出击？

作者 | 曾响铃文 | 响铃说智能化成为两会热议话题，2024政府工作报告中也直接提到要深化大数据、人工智能等研发应用，开展“人工智能”行动。毫无疑问，大模型热潮下，以智能化推进传统产业升级已经成为普遍共识。具体如何做…...

编程日记 2024/3/13 16:31:03

LabVIEW飞机液压基础试验台测试系统

LabVIEW飞机液压基础试验台测试系统为解决飞机液压基础实验台人工控制操作复杂、测试时间长、测试流程易出错等问题，开发了一套基于LabVIEW的飞机液压基础试验台测试系统。该系统通过计算机控制，实现了高度自动化的测试流程，有效提高了测试…...

编程日记 2024/3/13 16:30:01

STM32第十课：串口发送

一、usart串口 1.1 USART串口协议串口通讯(Serial Communication) 是一种设备间非常常用的串行通讯方式，因为它简单便捷，因此大部分电子设备都支持该通讯方式，电子工程师在调试设备时也经常使用该通讯方式输出调试信息。在计算机科学里&…...

编程日记 2024/3/13 16:27:59

淘宝扭蛋机小程序：探索未知的惊喜之旅

你是否曾在商场里被那闪闪发光的扭蛋机吸引，却因为种种原因无法下手？现在，淘宝扭蛋机小程序带给你全新的扭蛋体验，让你随时随地都能感受到那份未知的惊喜。淘宝扭蛋机小程序是一款集娱乐与购物于一体的全新应用。它汇聚了众多热…...

编程日记 2024/3/13 16:26:58

[nlp入门论文精读] | Transformer

写在前面最近工作从CV转向了NLP，于是空余时间便跟着哔哩哔哩李沐老师的视频学习。其实研一NLP课程讲论文的时候，我们小组就选择了经典的Attention和Bert，但还有很多细节并不完全理解，实际使用时也很困惑。因此这个系列就来记…...

编程日记 2024/3/13 16:25:57

科技回顾，飞凌嵌入式受邀亮相第八届瑞芯微开发者大会「RKDC2024」

2024年3月7日~8日，第八届瑞芯微开发者大会（RKDC2024）在福州举行，本届大会以“AI芯片AI应用AloT”为主题，邀请各行业的开发者共启数智化未来。本届大会亮点颇多，不仅有13大芯片应用展示、9场产品和技术论坛…...

编程日记 2024/3/13 16:24:55

代码随想录算法训练营第五十九天丨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…...

编程日记 2024/3/13 16:23:54

全代码分享｜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)是一种利用基因变异作为工具变量来评估暴露与结果之间因果关系的统计方法。…...

编程日记 2024/3/13 16:22:52

【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…...

编程日记 2024/3/13 16:21:51

英伟达推出免训练，可生成连贯图片的文生图模型ConsiStory，生成角色一致性解决新方案

目前，多数文生图模型皆使用的是随机采样模式，使得每次生成的图像效果皆不同，在生成连贯的图像方面非常差。例如，想通过AI生成一套图像连环画，即便使用同类的提示词也很难实现。虽然DALLE 3和Midjourney可以对图像实现…...

编程日记 2024/3/13 16:20:50

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/12/22 11:05:42

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2025/12/19 1:35:48

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...

编程新知 2025/12/10 17:29:53

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/22 9:06:24