用html，js和layui写一个简单的点击打怪小游戏
介绍：
一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。
继续下一个怪兽的血量会增加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写一个简单的点击打怪小游戏
介绍： 一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。 继续下一个怪兽的血量会增加5点，攻击按钮会随机变色。 效果图： html代码： <!DOCTYPE…...
[线代]不挂科猴博士
行列式的性质 行列式的计算及应用 矩阵的运算上(加减,相乘,取行列式) 矩阵的运算下(转置,逆,秩) 向量组与线性空间 解方程组...
扩散式过滤器 水泵角通除污器 0阻力过滤器直角过滤器工作原理
1：扩散式除污器过滤器介绍 扩散除污器是一种在多个领域都有应用的设备，例如在泵站中用于拦截介质中的杂质，净化介质，保护管路，提高水泵效率，延长水泵寿命等。它还可以方便地进行变径处理，可以…...
MetalLB：本地Kubernetes集群的LoadBalancer负载均衡利器
背景 在本地集群进行测试时，我们常常面临一个棘手的问题：Service Type不支持LoadBalancer，而我们只能选择使用NodePort作为替代。这种情况下，我们通常会配置Service为NodePort，并使用externalIPs将流量导入Kubernetes…...
C++判定终端ip和目标ip是否在同一局域网内
程序如下：用于判断给定的终端 IP、子网掩码和目标 IP 是否在同一局域网内。请注意，这个程序假设 IP 地址是用整数表示的。 #include <iostream> #include <sstream> #include <vector> #include <bitset>// Function to check …...
深入解析 可空值类型
前言： 问：为什么会有可空值类型的诞生？ 答：应对在某些特定场景中获取的信息可能是不完整的。 C# 1中的可空值类型 在C#1中没有对应的表示Null值的方法。当时普遍都是采用其他方式。第一种在数据缺失的情况下给其一个默认值。第…...
esp32idf使用thingscloud例程
对于不同的消息类型，API 如下： 消息类型 HTTP Method HTTP URL 设备上报属性 POST /device/v1//attributes 设备获取属性 GET /device/v1//attributes 设备上报事件 POST /device/v1//event/report 您只需要将以上的 HTTP URL 和接入点拼接即可获得最终…...
记一次应急响应练习(Linux)
记一次应急响应练习(Linux) Linux： 请提交攻击者的IP地址 答： 192.168.31.132 思路： 通过查看历史命令和开放的8080端口看到这台主机上运行的是Tomcat服务。并且在历史命令中看到了Tomcat的安装路径。那么就算是找到了日志的查看点了&#x…...
Pandas教程（四）—— 分层索引及数据联合
1.分层索引 分层索引就是在一个轴上拥有多个（两个及以上）索引级别，能以低维度形式处理高维度数据。 行索引有两层 1.1 分层索引的创建 1.1.1 方式一：直接设置 1）在创建series、dataframe或读取文件时时，行…...
小梅哥Xilinx FPGA学习笔记16——FSM(状态机)的学习
目录 一、 状态机导读 1.1 理论学习 1.2 状态机的表示 1.3 状态机编码 1.4 状态机描述方式 二 、实战演练一（来自野火） 2.1 实验目标 2.2 模块框图 2.3 状态转移图绘制 2.4 设计文件 2.5 仿真测试文件 2.6 仿真结果 三、 实战演练二&…...
vol----学习随记!!!
目录 一、代码生成1.先新建一个功能的对应的代码配置各项解释： 2.后设置配置菜单3.再点保存，生成vue页面，生成model，生成业务类4.再通过菜单设置编写系统菜单 一、代码生成 1.先新建一个功能的对应的代码配置 各项解释ÿ…...
HarmonyOS4.0系统性深入开发10卡片事件能力说明
卡片事件能力说明 ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互，当前支持router、message和call三种类型的事件，仅在卡片中可以调用。 接口定义：postCardAction(component: Object, action: Object): void 接口…...
openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程
文章目录 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 本章介绍升级到该版本的主要升级过程。 图 1 升级流程图 说明： 本文档中描述的时间仅供参考，实际操作时间以现场情况…...
提前应对威胁
通过新的《2023-2028 年荷兰国际网络安全战略》，荷兰政府在面对国家和犯罪分子持续构成的网络威胁时展现了责任和机构。它渴望将民主、人权和规范放在首位，并寻求维护全球开放、自由和安全的互联网。该战略明确了政府在国内实施打击的意愿和能力…...
C语言与人生：数组交换和二分查找
少年们，大家好。我是博主那一脸阳光，今天和分享数组交换和二分查找。 前言：探索C语言中的数组交换操作与二分查找算法 在计算机编程领域，特别是以C语言为代表的低级编程语言中，对数据结构的理解和熟练运用是至关重要的…...
Python实现【亚马逊商品】数据采集
前言 亚马逊公司，是美国最大的一家网络电子商务公司，位于华盛顿州的西雅图 是网络上最早开始经营电子商务的公司之一，亚马逊成立于1994年 今天教大家用Python批量采集亚马逊平台商品数据（完整代码放在文末） 地址&#…...
Git使用教程 gittutorial
该教程对该文章的翻译：https://git-scm.com/docs/gittutorial 本文介绍怎用使用 Git 导入新的工程、修改文件及如何其他人同步开发。 首先， 可以使用以下指令获取文档帮助 git help log笔者注：不建议看这个文档，标准的语法介绍…...
有了向量数据库，我们还需 SQL 数据库吗？
“除了向量数据库外，我是否还需要一个普通的 SQL 数据库？” 这是我们经常被问到的一个问题。如果除了向量数据以外，用户还有其他标量数据信息，那么其业务可能需要在进行语义相似性搜索前先根据某种条件过滤数据，例如&a…...
信息网络协议基础-IPv6协议
文章目录 概述为什么引入IP服务模型IPv4的可扩展性问题解决方法***CIDR(Classless Inter-Domain Routing, 无类别域间寻路)前缀汇聚***前缀最长匹配***NAT(网络地址转换)存在的问题解决方案路由表配置***局限性IPv6协议头标IPv6地址表示前缀类型单播地址链路局部地址(Link-Loca…...
VC++ ado 实现单表CURD
继续修改前文的资产管理源码； 新建一个数据库sds；把代码中的数据库连接改为连接此库； 新建下图一个表； 把之前的资产类别管理对话框改为下图所示；对话框ID也改为下图； 资产类别管理菜单和ID改为下图； 直接修改资产类别管理对话框类不太方便，新建一个对话框类，没有关联…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
ffmpeg（四）：滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
如何在网页里填写 PDF 表格？
有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据ÿ…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...