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

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

news 2026/2/10 3:25:47

🌟 前言

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

🤖 洛可可白：个人主页

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

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

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

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/31 6:04:01

MMaDA: Multimodal Large Diffusion Language Models

CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/9 15:39:14