打造你的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文件来查看游戏效果。祝你编程愉快！

如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

  1. VS Code上搭建Vue开发环境
  • 文章浏览阅读10.1k次，点赞64次，收藏13次。
  1. Color-UI 简介及使用教程
  • 文章浏览阅读5.9k次，点赞13次，收藏2次。
  1. Vue.2&Vue.3项目引入Element-UI教程&踩坑
  • 文章浏览阅读9.2k次，点赞82次，收藏22次。
  1. VS code搭建C/C++运行环境简单易上手
  • 文章浏览阅读2.7k次，点赞8次，收藏5次。
  1. 入门指南：使用uni-app构建跨平台应用
  • 文章浏览阅读1.2k次，点赞29次，收藏9次。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/742321.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Rust生命周期和生命周期声明‘作用Missing lifetime specifier

Rust生命周期和生命周期声明‘作用Missing lifetime specifier

Missing lifetime specifier&#xff1a;报错说明缺失声明周期声明 Rust 生命周期机制是与所有权机制同等重要的资源管理机制。 之所以引入这个概念主要是应对复杂类型系统中资源管理的问题。 引用是对待复杂类型时必不可少的机制&#xff0c;毕竟复杂类型的数据不能被处理器…
阅读更多...
UDP连接树莓派时提高连接速度，降低卡顿感

UDP连接树莓派时提高连接速度，降低卡顿感

背景 树莓派4B刷的是ubuntu20.4系统&#xff0c;使用win10自带的远程桌面连接和其连接&#xff0c;卡的一批&#xff0c;于是探索并记录下如何降低连接卡顿感 步骤一 点击显示选项&#xff0c; 降低显示配置和颜色深度&#xff1a; 步骤二 我的树莓派是通过电脑移动热点的方式…
阅读更多...
Qt+FFmpeg+opengl从零制作视频播放器-13.打包为exe包发布软件

Qt+FFmpeg+opengl从零制作视频播放器-13.打包为exe包发布软件

1.首先visual studio给生成程序添加桌面图标。 右键工程，添加新文件资源文件Resource.rc 选择导入文件，我这里导入了Player.ico文件。 添加后，在资源文件那里就可以看见ico文件。 然后编译release程序， 生成的可执行程序就带上了图标。 2.使用Qt 程序打包发布-windeployq…
阅读更多...
AWS入门实践－AWS CLI工具的使用介绍

AWS入门实践－AWS CLI工具的使用介绍

AWS CLI&#xff08;Amazon Web Services Command Line Interface&#xff09;是一个强大的工具&#xff0c;它允许您直接从命令行与AWS服务进行交互。这不仅可以加快许多任务的处理速度&#xff0c;而且还可以通过脚本自动化。 一、AWS CLI工具的安装 1、Windows 安装下载…
阅读更多...
uniapp图片涂鸦插件(支持多种涂鸦方式，图片放大缩小)

uniapp图片涂鸦插件(支持多种涂鸦方式，图片放大缩小)

工程地址https://gitee.com/geshijia/ct-graffiti ct-graffiti涂鸦组件使用说明 参考说明 参考链接&#xff1a;https://github.com/ylyuanlu/yl-graffiti 感谢作者的付出&#xff0c;给我提供了一些思路&#xff0c;并做了如下优化&#xff1a; 增加图片放大缩小移动功能添…
阅读更多...
第十四届蓝桥杯蜗牛

第十四届蓝桥杯蜗牛

蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间​编辑 题目链接&#xff1a;蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来&#xff0c;并分析出状态转移方程 in…
阅读更多...
[实战]API防护破解之签名验签

[实战]API防护破解之签名验签

前言&#xff1a; 传统的接口在传输的过程中&#xff0c;是非常容易被抓包进行篡改&#xff0c;从而进行中间人攻击。这时候我们可以通过对参数进行签名验证&#xff0c;如果参数与签名值不匹配&#xff0c;则请求不通过&#xff0c;直接返回错误信息&#xff0c;从而防止黑客…
阅读更多...
混合A*源码解读（c++）

混合A*源码解读（c++）

基于ros中通过slam建立的栅格地图&#xff0c;使用混合A*进行路径规划。 首先是run_hybrid_astar.cpp: #include "hybrid_a_star/hybrid_a_star_flow.h" #include "3rd/backward.hpp" #include <ros/ros.h>namespace backward { backward::SignalHa…
阅读更多...
带钢切割控制液压比例阀放大器

带钢切割控制液压比例阀放大器

比例阀控制器放大器放大板技术是电液比例控制系统中的重要组成部分&#xff0c;它负责对比例阀进行精确控制&#xff0c;以实现对液压系统中流量、压力等参数的精细调节。可以实现对液压流量或压力的精确控制&#xff0c;从而使系统以更高的精度和更快的响应速度执行各种操作。…
阅读更多...
以102flowers数据集为例训练ResNet50模型

以102flowers数据集为例训练ResNet50模型

以102flowers数据集为例训练ResNet50模型 使用飞桨高阶API&#xff0c;使用最少的代码量&#xff0c;实现在102flowers数据集训练ResNet50模型。同时可以一条命令修改成Mnist、Cifar10、Cifar100等数据集&#xff0c;换成其它模型也是只需要一句话代码。 数据集介绍 102flowe…
阅读更多...
Zoho Mail有微信小程序啦！从微信就能直接收发邮件

Zoho Mail有微信小程序啦！从微信就能直接收发邮件

Zoho Mail有微信小程序啦&#xff01;从微信就能直接收发邮件。可实现&#xff1a;从微信直接查看邮件、撰写新邮件、回复邮件。对于那些想从手机访问Zoho Mail企业邮箱来收发邮件&#xff0c;但又不想下载Zoho Mail 的手机app来占用手机存储的用户来说&#xff0c;微信小程序实…
阅读更多...
Celery知识

Celery知识

celery介绍 # celery 的概念&#xff1a; * 翻译过来是芹菜 * 官网&#xff1a;https://docs.celeryq.dev/en/stable/ # 是分布式的异步任务框架&#xff1a; 分布式&#xff1a;一个任务&#xff0c;拆成多个任务在不同机器上做 异步任务&#xff1a;后台执行…
阅读更多...
【开源】SpringBoot框架开发软件学院思政案例库系统

【开源】SpringBoot框架开发软件学院思政案例库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理员2.2 普通教师 三、系统展示四、核心代码4.1 查询思政案例4.2 审核思政案例4.3 查询思政课程4.4 思政案例点赞4.5 新增思政案例评语 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的软件学…
阅读更多...
Mysql8.0.30数据data目录文件解释

Mysql8.0.30数据data目录文件解释

数据库内存和磁盘架构 data目录展示 [rootDESKTOP-9ADRUGP data]# pwd /usr/local/software/mysql/3312/data [rootDESKTOP-9ADRUGP data]# ls -l total 96616 -rw-r----- 1 systemd-coredump input 56 Jul 24 2023 auto.cnf -rw-r----- 1 systemd-coredump input 30…
阅读更多...
数据库基础理论知识

数据库基础理论知识

1.基本概念 数据(Data)&#xff1a;数据库存储的基本对象。数字、字符串、图形、图像、音频、视频等数据库(DB)&#xff1a;在计算机内&#xff0c;永久存储、有组织、可共享的数据集合数据库管理系统(DBMS)&#xff1a;管理数据库的系统软件数据库系统(DBS)&#xff1a;DBDBM…
阅读更多...
浏览器的工作原理

浏览器的工作原理

从输入一个url到页面加载完成&#xff0c;中间都发生了什么&#xff1f; 参考原文地址 首先在浏览器地址栏输入一个地址并回车之后&#xff0c; 1. DNS查找 浏览器会进行DNS查找&#xff0c;把域名https://example.com转化为真实的IP地址10.29.33.xx&#xff0c;根据IP地址找…
阅读更多...
linux驱动——中断

linux驱动——中断

1.Cortex-A系列的中断的简介 中断的基本概念&#xff1a;(interrupt) 中断本质上是系统内部的异常机制,当中断产生之后&#xff0c;他会停下当前正在执行的任务&#xff0c;转而去做其他的事情,在停下当前正在执行的任务之前,要先入栈&#xff08;保护现场,其他的事情做完之后…
阅读更多...
Mysql/Redis缓存一致性

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL&#xff0c;再写Redis 图解说明: 这是一幅时序图&#xff0c;描述请求的先后调用顺序&#xff1b; 黄色的线是请求A&#xff0c;黑色的线是请求B&#xff1b; 黄色的…
阅读更多...
TYPE C模拟耳机POP音产生缘由

TYPE C模拟耳机POP音产生缘由

关于耳机插拔的POP音问题&#xff0c;小白在之前的文章中讲述过关于3.5mm耳机的POP音产生原因。其实这类插拔问题的POP音不仅仅存在于3.5mm耳机&#xff0c;就连现在主流的Type C模拟耳机的插拔也存在此问题&#xff0c;今天小白就来讲一讲这类耳机产生POP音的缘由。 耳机左右…
阅读更多...
两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

需求是有两个笔记本&#xff0c;一个笔记本闲置&#xff0c;另一个笔记本是主力本。想将另一个闲置的笔记本连接到主力本上作为拓展屏使用。网上搜了好久&#xff0c;有一些人提到了&#xff0c;也有一些视频但是文章比较少。简单总结一下吧 上述需求有两种方式 第一种&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023