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

用html，js和layui写一个简单的点击打怪小游戏

news 2026/2/10 16:08:00

介绍：

    一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。

    继续下一个怪兽的血量会增加5点，攻击按钮会随机变色。

效果图：

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="../layui/css/layui.css" media="all">
<style>
/* 添加样式以中心布局两个游戏并增加一些间距 */
.game-container {text-align: center;margin: 5% auto;
}.game-container > button {margin: 0 5px; /* 添加按钮间距 */
}#result, #message {margin: 20px 0;
}</style>
</head>
<body>
<!-- 在HTML中添加开始游戏按钮 -->
<div class="game-container"><h1>打怪小游戏</h1><h2 id="monster">怪物 HP: <span id="monsterHp">10</span></h2><button id="startGameButton" class="layui-btn layui-btn-primary">开始游戏</button><button id="attackButton" class="layui-btn layui-btn-warm" style="display: none;">攻击怪物</button><button id="nextLevelButton" class="layui-btn layui-btn-normal" style="display: none;">进入下一关</button><button id="endGameButton" class="layui-btn layui-btn-danger" style="display: none;">结束游戏</button><p id="message"></p>
</div><script src="./gamejs/game.js"></script>
</body>
</html>

js代码：

document.addEventListener('DOMContentLoaded', () => {const monsterHpElement = document.getElementById('monsterHp');const messageElement = document.getElementById('message');const startGameButton = document.getElementById('startGameButton');const nextLevelButton = document.getElementById('nextLevelButton');const endGameButton = document.getElementById('endGameButton');let initialHp = 10;let monsterHp;let level = 1;const hpIncrease = 5;const attackButton = document.getElementById('attackButton');function startGame() {monsterHp = initialHp;level = 1;monsterHpElement.innerText = monsterHp;messageElement.innerText = '怪物出现了！';resetAttackButtonColor();attackButton.style.display = 'inline-block';startGameButton.style.display = 'none';}function updateMonsterStatus() {if (monsterHp > 0) {monsterHp--;monsterHpElement.innerText = monsterHp;messageElement.innerText = `怪物受到伤害！还剩 ${monsterHp} 生命值。`;} else {nextLevelButton.style.display = 'inline-block';endGameButton.style.display = 'inline-block';attackButton.style.display = 'none';messageElement.innerText = '恭喜你，打败了怪物！选择下一步操作。';}}function levelUp() {level++;monsterHp = initialHp + hpIncrease * (level - 1);monsterHpElement.innerText = monsterHp;messageElement.innerText = `第 ${level} 关开始！怪物生命值为 ${monsterHp}。`;attackButton.style.display = 'inline-block';nextLevelButton.style.display = 'none';endGameButton.style.display = 'none';changeAttackButtonColor();}function endGame() {messageElement.innerText = '游戏结束，感谢您的玩耍！点击下方按钮可以重新开始。';attackButton.style.display = 'none';nextLevelButton.style.display = 'none';endGameButton.style.display = 'none';startGameButton.style.display = 'inline-block'; // 显示开始游戏按钮}function resetAttackButtonColor() {attackButton.className = 'layui-btn layui-btn-warm'; // 这里设置默认的按钮颜色样式}function changeAttackButtonColor() {// 定义一组可能的颜色const colors = ['layui-btn-primary', 'layui-btn-normal', 'layui-btn-warm', 'layui-btn-danger'];// 随机选择一个颜色const randomColor = colors[Math.floor(Math.random() * colors.length)];attackButton.className = `layui-btn ${randomColor}`; // 更新按钮的 class 以改变颜色}startGameButton.addEventListener('click', startGame);nextLevelButton.addEventListener('click', levelUp);endGameButton.addEventListener('click', endGame);attackButton.addEventListener('click', updateMonsterStatus);
});document.addEventListener02('DOMContentLoaded', () => {const monsterHpElement = document.getElementById('monsterHp');const messageElement = document.getElementById('message');const startGameButton = document.getElementById('startGameButton');const nextLevelButton = document.getElementById('nextLevelButton');const endGameButton = document.getElementById('endGameButton');let initialHp = 10;let monsterHp;let level = 1;const hpIncrease = 5;const attackButton = document.getElementById('attackButton');function startGame() {monsterHp = initialHp;level = 1;monsterHpElement.innerText = monsterHp;messageElement.innerText = '怪物出现了！';attackButton.style.display = 'inline-block';startGameButton.style.display = 'none';}function updateMonsterStatus() {if (monsterHp > 0) {monsterHp--;monsterHpElement.innerText = monsterHp;messageElement.innerText = `怪物受到伤害！还剩 ${monsterHp} 生命值。`;} else {nextLevelButton.style.display = 'inline-block';endGameButton.style.display = 'inline-block';attackButton.style.display = 'none';messageElement.innerText = '恭喜你，打败了怪物！选择下一步操作。';}}function levelUp() {level++;monsterHp = initialHp + hpIncrease * (level - 1);monsterHpElement.innerText = monsterHp;messageElement.innerText = `第 ${level} 关开始！怪物生命值为 ${monsterHp}。`;attackButton.style.display = 'inline-block';nextLevelButton.style.display = 'none';endGameButton.style.display = 'none';}function endGame() {messageElement.innerText = '游戏结束，感谢您的玩耍！点击下方按钮可以重新开始。';attackButton.style.display = 'none';nextLevelButton.style.display = 'none';endGameButton.style.display = 'none';startGameButton.style.display = 'inline-block'; // 显示开始游戏按钮}startGameButton.addEventListener('click', startGame);nextLevelButton.addEventListener('click', levelUp);endGameButton.addEventListener('click', endGame);attackButton.addEventListener('click', updateMonsterStatus);
});

相关文章：

用html，js和layui写一个简单的点击打怪小游戏

介绍&#xff1a; 一个简单的打怪小游戏&#xff0c;点击开始游戏后&#xff0c;出现攻击按钮&#xff0c;击败怪物后可以选择继续下一关和结束游戏。 继续下一个怪兽的血量会增加5点&#xff0c;攻击按钮会随机变色。 效果图&#xff1a; html代码&#xff1a; <!DOCTYPE…...

编程日记 2024/1/1 22:49:39

[线代]不挂科猴博士

行列式的性质 行列式的计算及应用 矩阵的运算上(加减,相乘,取行列式) 矩阵的运算下(转置,逆,秩) 向量组与线性空间 解方程组...

编程日记 2024/1/1 22:48:39

扩散式过滤器 水泵角通除污器 0阻力过滤器直角过滤器工作原理

​ 1&#xff1a;扩散式除污器过滤器介绍 扩散除污器是一种在多个领域都有应用的设备&#xff0c;例如在泵站中用于拦截介质中的杂质&#xff0c;净化介质&#xff0c;保护管路&#xff0c;提高水泵效率&#xff0c;延长水泵寿命等。它还可以方便地进行变径处理&#xff0c;可以…...

编程日记 2024/1/1 22:47:37

MetalLB：本地Kubernetes集群的LoadBalancer负载均衡利器

背景 在本地集群进行测试时&#xff0c;我们常常面临一个棘手的问题&#xff1a;Service Type不支持LoadBalancer&#xff0c;而我们只能选择使用NodePort作为替代。这种情况下&#xff0c;我们通常会配置Service为NodePort&#xff0c;并使用externalIPs将流量导入Kubernetes…...

编程日记 2024/1/1 22:46:37

C++判定终端ip和目标ip是否在同一局域网内

程序如下&#xff1a;用于判断给定的终端 IP、子网掩码和目标 IP 是否在同一局域网内。请注意&#xff0c;这个程序假设 IP 地址是用整数表示的。 #include <iostream> #include <sstream> #include <vector> #include <bitset>// Function to check …...

编程日记 2024/1/1 22:40:30

深入解析 可空值类型

前言&#xff1a; 问&#xff1a;为什么会有可空值类型的诞生&#xff1f; 答&#xff1a;应对在某些特定场景中获取的信息可能是不完整的。 C# 1中的可空值类型 在C#1中没有对应的表示Null值的方法。当时普遍都是采用其他方式。第一种在数据缺失的情况下给其一个默认值。第…...

编程日记 2024/1/1 22:37:26

esp32idf使用thingscloud例程

对于不同的消息类型&#xff0c;API 如下&#xff1a; 消息类型 HTTP Method HTTP URL 设备上报属性 POST /device/v1//attributes 设备获取属性 GET /device/v1//attributes 设备上报事件 POST /device/v1//event/report 您只需要将以上的 HTTP URL 和接入点拼接即可获得最终…...

编程日记 2024/1/1 22:36:26

记一次应急响应练习(Linux)

记一次应急响应练习(Linux) Linux&#xff1a; 请提交攻击者的IP地址 答&#xff1a; 192.168.31.132 思路&#xff1a; 通过查看历史命令和开放的8080端口看到这台主机上运行的是Tomcat服务。并且在历史命令中看到了Tomcat的安装路径。那么就算是找到了日志的查看点了&#x…...

编程日记 2024/1/1 22:32:22

Pandas教程（四）—— 分层索引及数据联合

1.分层索引 分层索引就是在一个轴上拥有多个&#xff08;两个及以上&#xff09;索引级别&#xff0c;能以低维度形式处理高维度数据。 行索引有两层 1.1 分层索引的创建 1.1.1 方式一&#xff1a;直接设置 1&#xff09;在创建series、dataframe或读取文件时时&#xff0c;行…...

编程日记 2024/1/1 22:31:21

小梅哥Xilinx FPGA学习笔记16——FSM(状态机)的学习

目录 一、 状态机导读 1.1 理论学习 1.2 状态机的表示 1.3 状态机编码 1.4 状态机描述方式 二 、实战演练一&#xff08;来自野火&#xff09; 2.1 实验目标 2.2 模块框图 2.3 状态转移图绘制 2.4 设计文件 2.5 仿真测试文件 2.6 仿真结果 三、 实战演练二&…...

编程日记 2024/1/1 22:29:19

vol----学习随记!!!

目录 一、代码生成1.先新建一个功能的对应的代码配置各项解释&#xff1a; 2.后设置配置菜单3.再点保存&#xff0c;生成vue页面&#xff0c;生成model&#xff0c;生成业务类4.再通过菜单设置编写系统菜单 一、代码生成 1.先新建一个功能的对应的代码配置 各项解释&#xff…...

编程日记 2024/1/1 22:28:17

HarmonyOS4.0系统性深入开发10卡片事件能力说明

卡片事件能力说明 ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互&#xff0c;当前支持router、message和call三种类型的事件&#xff0c;仅在卡片中可以调用。 接口定义&#xff1a;postCardAction(component: Object, action: Object): void 接口…...

编程日记 2024/1/1 22:26:16

openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程

文章目录 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 本章介绍升级到该版本的主要升级过程。 图 1 升级流程图 说明&#xff1a; 本文档中描述的时间仅供参考&#xff0c;实际操作时间以现场情况…...

编程日记 2024/1/1 22:24:14

提前应对威胁

通过新的《2023-2028 年荷兰国际网络安全战略》&#xff0c;荷兰政府在面对国家和犯罪分子持续构成的网络威胁时展现了责任和机构。它渴望将民主、人权和规范放在首位&#xff0c;并寻求维护全球开放、自由和安全的互联网。该战略明确了政府在国内实施打击的意愿和能力&#xf…...

编程日记 2024/1/1 22:18:09

C语言与人生：数组交换和二分查找

少年们&#xff0c;大家好。我是博主那一脸阳光&#xff0c;今天和分享数组交换和二分查找。 前言&#xff1a;探索C语言中的数组交换操作与二分查找算法 在计算机编程领域&#xff0c;特别是以C语言为代表的低级编程语言中&#xff0c;对数据结构的理解和熟练运用是至关重要的…...

编程日记 2024/1/1 22:17:08

Python实现【亚马逊商品】数据采集

前言 亚马逊公司&#xff0c;是美国最大的一家网络电子商务公司&#xff0c;位于华盛顿州的西雅图 是网络上最早开始经营电子商务的公司之一&#xff0c;亚马逊成立于1994年 今天教大家用Python批量采集亚马逊平台商品数据&#xff08;完整代码放在文末&#xff09; 地址&#…...

编程日记 2024/1/1 22:16:07

Git使用教程 gittutorial

该教程对该文章的翻译&#xff1a;https://git-scm.com/docs/gittutorial 本文介绍怎用使用 Git 导入新的工程、修改文件及如何其他人同步开发。 首先&#xff0c; 可以使用以下指令获取文档帮助 git help log笔者注&#xff1a;不建议看这个文档&#xff0c;标准的语法介绍…...

编程日记 2024/1/1 22:15:06

有了向量数据库，我们还需 SQL 数据库吗？

“除了向量数据库外&#xff0c;我是否还需要一个普通的 SQL 数据库&#xff1f;” 这是我们经常被问到的一个问题。如果除了向量数据以外&#xff0c;用户还有其他标量数据信息&#xff0c;那么其业务可能需要在进行语义相似性搜索前先根据某种条件过滤数据&#xff0c;例如&a…...

编程日记 2024/1/1 22:12:04

信息网络协议基础-IPv6协议

文章目录 概述为什么引入IP服务模型IPv4的可扩展性问题解决方法***CIDR(Classless Inter-Domain Routing, 无类别域间寻路)前缀汇聚***前缀最长匹配***NAT(网络地址转换)存在的问题解决方案路由表配置***局限性IPv6协议头标IPv6地址表示前缀类型单播地址链路局部地址(Link-Loca…...

编程日记 2024/1/1 22:05:57

VC++ ado 实现单表CURD

继续修改前文的资产管理源码； 新建一个数据库sds；把代码中的数据库连接改为连接此库； 新建下图一个表； 把之前的资产类别管理对话框改为下图所示；对话框ID也改为下图； 资产类别管理菜单和ID改为下图； 直接修改资产类别管理对话框类不太方便，新建一个对话框类，没有关联…...

编程日记 2024/1/1 22:03:56

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01