打造你的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可以对图像实现…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时，没有加载所有类库。插件运行过程中用到某个类库，会从CAD的安装目录找，找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库，就用插件程序加载进…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
表单设计器拖拽对象时添加属性
背景：因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...
第2篇：BLE 广播与扫描机制详解
本文是《BLE 协议从入门到专家》专栏第二篇，专注于解析 BLE 广播（Advertising）与扫描（Scanning）机制。我们将从协议层结构、广播包格式、设备发现流程、控制器行为、开发者 API、广播冲突与多设备调度等方面，全面拆解这一 BLE 最基础也是最关键的通信机制。 一、什么是 B…...