打造你的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可以对图像实现…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件，这个上传文件是整体功能的一部分，文件在上传的过程中…...