打造你的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，一经查实，立即删除！

相关文章

3. Linux标准I/O库

3. Linux标准I/O库

Linux 标准 I/O&#xff08;Standard I/O&#xff09;库提供了一组函数&#xff0c;用于进行高级别的文件输入和输出操作。它建立在底层文件 I/O 系统调用之上&#xff0c;为开发者提供了更方便、更高级别的文件处理方式。以下是一些常用的 Linux 标准 I/O 库函数&#xff1a; …
阅读更多...
Rust生命周期和生命周期声明‘作用Missing lifetime specifier

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

Missing lifetime specifier&#xff1a;报错说明缺失声明周期声明 Rust 生命周期机制是与所有权机制同等重要的资源管理机制。 之所以引入这个概念主要是应对复杂类型系统中资源管理的问题。 引用是对待复杂类型时必不可少的机制&#xff0c;毕竟复杂类型的数据不能被处理器…
阅读更多...
如何开展自动化测试框架的构建

如何开展自动化测试框架的构建

自动化测试框架的构建是一个系统性的过程&#xff0c;它涉及到多个层面的考虑和实施。以下是一些关键步骤和策略&#xff0c;帮助你开展自动化测试框架的构建&#xff1a; 需求分析&#xff1a; 深入了解业务需求&#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…
阅读更多...
用spark进行数据查询常用语法总结

用spark进行数据查询常用语法总结

文章目录 show&#xff1a;数据显示distinct&#xff1a;数据行数去重count&#xff1a;看行数select&#xff1a;查看具体列数据toDF&#xff1a;对字段命名(搭配常用与groupby--agg--toDF)withColumn&#xff1a;新增列名printSchema: 打印列名信息dropDuplicates&#xff1a…
阅读更多...
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; 增加图片放大缩小移动功能添…
阅读更多...
Qt+FFmpeg+opengl从零制作视频播放器-15.音视频一些知识

Qt+FFmpeg+opengl从零制作视频播放器-15.音视频一些知识

1.视频方面 本专栏只针对视频压缩数据为H.264的数据进行演示。 H264解码后的原始数据主要包括片（slice）、宏块（MB）以及YUV像素数据。 片是H264编码中的基本单元，它包含一帧图像的部分或全部数据。一个视频帧可以由一个或多个片组成，每个片最少包含一个宏块，最多可以包…
阅读更多...
怎么读取springboot中的properties.yml配置文件里的配置值(亲测有效)

怎么读取springboot中的properties.yml配置文件里的配置值(亲测有效)

怎么读取springboot中的properties.yml配置文件里的配置值 test:username: name主配置类中加上 EnableConfigurationProperties(MailConfigProperties.class)类上加ConfigurationPropetise("test“),属性就会自动注入配置值&#xff1b; ConfigurationPropetise("…
阅读更多...
第十四届蓝桥杯蜗牛

第十四届蓝桥杯蜗牛

蜗牛 线性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…
阅读更多...
使用hashmap优化时间复杂度，leetcode1577

使用hashmap优化时间复杂度，leetcode1577

1577. 数的平方等于两数乘积的方法数 已解答 中等 相关标签 相关企业 提示 给你两个整数数组 nums1 和 nums2 &#xff0c;请你返回根据以下规则形成的三元组的数目&#xff08;类型 1 和类型 2 &#xff09;&#xff1a; 类型 1&#xff1a;三元组 (i, j, k) &#xff…
阅读更多...
题目 3150: 冶炼金属

题目 3150: 冶炼金属

题目描述: 小蓝有一个神奇的炉子用于将普通金属 O 冶炼成为一种特殊金属 X。这个炉子有一个称作转换率的属性 V&#xff0c;V 是一个正整数&#xff0c;这意味着消耗 V 个普通金 属 O 恰好可以冶炼出一个特殊金属 X&#xff0c;当普通金属 O 的数目不足 V 时&#xff0c;无法…
阅读更多...
OpenCV加载视频

OpenCV加载视频

一、加载视频 //视频路径QString appPath QCoreApplication::applicationDirPath();QString videoPath appPath "/vtest.avi";cv::VideoCapture capture;capture.open(videoPath.toStdString(),CAP_FFMPEG);//从摄像头读取//capture.open(0, CAP_DSHOW);cv::Mat f…
阅读更多...
【趣味学算法】04_与谁结婚（逻辑推断|条件组合）

【趣味学算法】04_与谁结婚（逻辑推断|条件组合）

注&#xff1a; 本系列仅为个人学习笔记&#xff0c;学习内容为《算法小讲堂》&#xff08;视频传送门&#xff09;&#xff0c;通俗易懂适合编程入门小白&#xff0c;需要具备python语言基础&#xff0c;本人小白&#xff0c;如内容有误感谢您的批评指正 有三对情侣要结婚&…
阅读更多...
带钢切割控制液压比例阀放大器

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

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

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

以102flowers数据集为例训练ResNet50模型 使用飞桨高阶API&#xff0c;使用最少的代码量&#xff0c;实现在102flowers数据集训练ResNet50模型。同时可以一条命令修改成Mnist、Cifar10、Cifar100等数据集&#xff0c;换成其它模型也是只需要一句话代码。 数据集介绍 102flowe…
阅读更多...
二叉排序树删（15.6）

二叉排序树删（15.6）

#include <stdio.h> #include <stdlib.h> ///二叉排序树&#xff0c;中序遍历&#xff0c;查找typedef int KeyType; typedef struct BSTNode{KeyType key;struct BSTNode *lchild,*rchild; }BSTNode,*BiTree;//二叉查找树核心 //非递归创建二叉查找树 int BST_Ins…
阅读更多...
最新文章

Copyright @ 2022~2023