打造你的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.hqwc.cn/news/535035.html

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

相关文章

使用Visual Studio创建跨平台CMake项目

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 创建跨平台项目的意义是什么&#xff1f; 跨平台CMake项目的意义在于提供一种统一的构建系统&#xff0c;使得开发者可以编写一份…

详细理解Transformer

上一篇文章中&#xff0c;我们解读了Transformer中的Self-Attention的实现细节&#xff0c;这篇文章中&#xff0c;就Transformer的整体做一个算法解读。 首先&#xff0c;我们还是把Transformer的架构图贴出来&#xff0c;作为本篇内容的抓手。 从图中我们可以看到&#xff0…

RansomwareSim:一款功能强大的勒索软件模拟研究学习工具

关于RansomwareSim RansomwareSim是一款功能强大的勒索软件模拟研究学习工具&#xff0c;该工具是为网络安全教育和培训目的开发的模拟勒索软件应用程序&#xff0c;它旨在为广大研究人员演示勒索软件如何加密系统上的文件并与命令和控制服务器通信&#xff0c;以更好地了解勒…

海豚调度系列之:单机部署

海豚调度系列之&#xff1a;单机部署 一、前置准备工作二、启动 DolphinScheduler Standalone Server三、登录 DolphinScheduler四、启停服务五、配置数据库 Standalone 仅适用于 DolphinScheduler 的快速体验. 如果你是新手&#xff0c;想要体验 DolphinScheduler 的功能&…

A survey on influence maximization models

ABSTRACT 影响力最大化是社交网络分析中的一个重要研究领域&#xff0c;研究人员关注的是检测有影响力的节点。有影响力节点的检测在计算机科学、舆论传播、政治运动或经济学等多个学科中引起了极大的兴趣&#xff0c;在这些学科中&#xff0c;系统通常被建模为图形。影响力最大…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的交通标志识别系统详解(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;本篇博客详细介绍了利用深度学习构建交通标志识别系统的过程&#xff0c;并提供了完整的实现代码。该系统采用了先进的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期版本进行了性能评估对比&#xff0c;分析了性能指标如mAP、F1 Score等。文章深入探…

CSS 背景

CSS 背景 背景颜色 背景颜色若不设置&#xff0c;默认为透明(transparent) background-color: 颜色;背景颜色半透明 background: rgba(0, 0, 0, 0.3)前三个参数设定颜色&#xff0c;最后一个参数&#xff08;例如上述例子中的0.3&#xff09;设定透明度。0&#xff5e;1: 0…

基于Spring Boot的校园管理系统 ,计算机毕业设计(带源码+论文)

源码获取地址&#xff1a; 码呢-一个专注于技术分享的博客平台一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流http://www.xmbiao.cn/resource-details/1767745870094217218

snakeflow的springboot项目

Gitee搜索“liuxz/snakerflow”&#xff0c;它是spring boot集成了一款国产工作流引擎snakerflow。 下面是安装步骤&#xff1a; 创建数据库snaker-web&#xff0c;字符集设置成utf8mb4和utf8mb4_generic。不然的话&#xff0c;中文插入不进去。 运行sql命令 CREATE TABLE …

小白刷题CTF show web方向

web01 右键查看源代码&#xff0c;再使用在线解密&#xff0c;就可以得出答案了 web02 sql注入 admin or 11 或者 1 or 11可以登录查询几个字段&#xff1a;1 or 11 order by 3 # 使用此语句&#xff0c;判断列数。 order by 3不会出错&#xff0c;但是order by 4就没有显示…

羊大师分析,羊奶滋养养生新境界

羊大师分析&#xff0c;羊奶滋养养生新境界 羊奶&#xff0c;这一古老而神秘的乳制品&#xff0c;如今正以其独特的滋养价值和美味口感&#xff0c;引领着养生新风尚。它不仅是营养丰富的天然食品&#xff0c;更是健康与美味的完美结合&#xff0c;为我们的生活带来了全新的体…

Java复习01 集合概念

Java复习01 集合 在Java中&#xff0c;集合&#xff08;Collections&#xff09;是一种用来存储一组对象的结构。想象一下有一个装东西的箱子&#xff0c;这个箱子可以装很多不同类型的东西&#xff0c;例如书、DVD或者玩具。Java的集合也是这样&#xff0c;但是它专门用来装载…