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

【趣味升级版】斗破苍穹修炼文字游戏HTML,CSS,JS

news 文章来源：https://blog.csdn.net/VLOKL/article/details/144131410 2025/1/12 10:08:18

 

目录

图片展示

开始游戏

手动升级（满100%即可升级）

升级完成，即可解锁打怪模式

新增功能说明：

如何操作：

完整代码

实现一个简单的斗破苍穹修炼文字游戏，你可以使用HTML、CSS和JavaScript结合来构建游戏的界面和逻辑。以下是一个简化版的游戏框架示例，其中包含玩家修炼的过程、增加修炼进度和显示经验值的基本功能。

增加“打怪获得经验”、提升修炼速度、以及随机事件触发（比如“遇到困难”或“获得突破”等）

图片展示

开始游戏

手动升级（满100%即可升级）

升级完成，即可解锁打怪模式

新增功能说明：

  1. 打怪获得经验：新增了“打怪”按钮，玩家可以点击“打怪”按钮来获得经验。打怪时，经验有可能增加或减少（模拟失败）。

  2. 修炼速度提升：提升修炼速度的按钮仍然存在，但它现在有条件，玩家必须至少积累10点经验才能点击按钮来提升修炼速度。

  3. 随机事件：增加了一个随机的事件机制，玩家在打怪时可能会获得额外的经验，或者因失败损失一些经验。

  4. 游戏日志：所有事件的发生都会记录在游戏日志中，方便玩家查看游戏进程。

如何操作：

  • 修炼：点击“开始修炼”按钮，每次修炼进度和经验都会增加。完成修炼进度后，玩家可以提升修炼速度并解锁打怪功能。

  • 打怪：点击“打怪”按钮，进行打怪，每次会获得一定经验或损失经验。

  • 提升修炼速度：通过积累经验达到10点后，玩家可以提升修炼速度，使得修炼进度增长更快。

完整代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>斗破苍穹修炼文字游戏</title><style>body {font-family: Arial, sans-serif;background-color: #f0f8ff;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.game-container {text-align: center;padding: 20px;background-color: white;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 350px;}h1 {font-size: 24px;color: #333;}button {padding: 10px 20px;font-size: 16px;margin-top: 20px;cursor: pointer;border: none;background-color: #4CAF50;color: white;border-radius: 5px;transition: background-color 0.3s;}button:hover {background-color: #45a049;}button:disabled {background-color: #ddd;cursor: not-allowed;}.log {margin-top: 20px;font-size: 14px;color: #555;max-height: 120px;overflow-y: auto;}</style>
</head><body><div class="game-container"><h1>斗破苍穹 修炼游戏</h1><p id="story">你是一名修炼者，踏上了修炼的道路。</p><p>修炼进度: <span id="progress">0</span>%</p><p>经验值: <span id="exp">0</span></p><p>修炼速度: <span id="speed">1</span></p><button id="trainBtn">开始修炼</button><button id="fightBtn" disabled>去打怪</button><button id="upgradeBtn" disabled>提升修炼速度</button><div class="log" id="log"></div></div><script>// 获取页面元素const storyElement = document.getElementById('story');const progressElement = document.getElementById('progress');const expElement = document.getElementById('exp');const speedElement = document.getElementById('speed');const trainBtn = document.getElementById('trainBtn');const fightBtn = document.getElementById('fightBtn');const upgradeBtn = document.getElementById('upgradeBtn');const logElement = document.getElementById('log');// 游戏状态let progress = 0; // 修炼进度let exp = 0; // 经验值let trainingSpeed = 1; // 修炼速度let fightExp = 0; // 打怪经验let maxExp = 10; // 每次修炼所需的最大经验// 修炼按钮点击事件trainBtn.addEventListener('click', () => {if (progress < 100) {// 增加修炼进度和经验progress += trainingSpeed;exp += Math.floor(trainingSpeed / 2);// 更新页面显示progressElement.textContent = progress;expElement.textContent = exp;// 更新故事内容storyElement.textContent = `你正在修炼，进度已达到${progress}%`;// 检查是否完成修炼if (progress >= 100) {storyElement.textContent = `修炼完成！你成功突破了瓶颈，修为大增！`;trainBtn.disabled = true;upgradeBtn.disabled = false;fightBtn.disabled = false;log("你完成了修炼，修为大增！");}}});// 提升修炼速度按钮点击事件upgradeBtn.addEventListener('click', () => {if (exp >= 10) {// 提升修炼速度trainingSpeed += 1;exp -= 10; // 消耗经验// 更新页面显示expElement.textContent = exp;speedElement.textContent = trainingSpeed;storyElement.textContent = `你的修炼速度提升了！当前修炼速度：${trainingSpeed}`;log(`你提升了修炼速度！当前速度：${trainingSpeed}`);// 禁用提升按钮if (exp < 10) {upgradeBtn.disabled = true;}} else {storyElement.textContent = '经验不足，无法提升修炼速度！';}});// 打怪按钮点击事件fightBtn.addEventListener('click', () => {if (exp >= 5) {let fightResult = Math.random() > 0.5 ? "你打败了怪物，获得了经验！" : "你被怪物击败，损失了一些经验。";let fightExperience = Math.random() > 0.5 ? 5 : -3;// 更新经验exp += fightExperience;if (exp < 0) exp = 0;// 更新页面expElement.textContent = exp;log(fightResult);if (exp >= 10) {upgradeBtn.disabled = false;}} else {log("你的经验不足，无法去打怪！");}});// 打印游戏日志function log(message) {let newLog = document.createElement('p');newLog.textContent = message;logElement.appendChild(newLog);}</script>
</body></html>

嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。

相关文章：

【趣味升级版】斗破苍穹修炼文字游戏HTML,CSS,JS

目录 图片展示 开始游戏 手动升级&#xff08;满100%即可升级&#xff09; 升级完成&#xff0c;即可解锁打怪模式 新增功能说明&#xff1a; 如何操作&#xff1a; 完整代码 实现一个简单的斗破苍穹修炼文字游戏&#xff0c;你可以使用HTML、CSS和JavaScript结合来构建…...

编程日记 2024/12/1 22:08:20

【Oracle】个人收集整理的Oracle常用SQL及命令

【建表】 create table emp( id number(12), name nvarchar2(20), primary key(id) ); 【充值一】 insert into emp select rownum,dbms_random.string(*,dbms_random.value(6,20)) from dual connect by level<101; 【充值二】 begin for i in 1..100 loop inser…...

编程日记 2024/12/1 22:03:14

Linux内核4.14版本——ccf时钟子系统（5）——通用API

1. clk_get 1.1 __of_clk_get_by_name 1.2 clk_get_sys 2. clk_prepare_enable 2.1 clk_prepare 2.2 clk_enable 3. clk_set_rate 1. clk_get clock get是通过clock名称获取struct clk指针的过程&#xff0c;由clk_get、devm_clk_get、clk_get_sys、of_clk_get、of_clk_g…...

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

安装MySQL 5.7 亲测有效

前言&#xff1a;本文是笔者在安装MySQL5.7时根据另一位博主大大的安装教程基础上做了一些修改而成 首先在这里表示对博主大大的感谢 下面附博主大大地址 下面的步骤言简意赅 跟着做就不会出错 希望各位读者耐下心来 慢慢解决安装中出现的问题~MySQL 5.7 安装教程&#xff08;全…...

编程日记 2024/12/1 21:59:07

《Django 5 By Example》阅读笔记：p455-p492

《Django 5 By Example》学习第 16 天&#xff0c;p455-p492 总结&#xff0c;总计 38 页。 一、技术总结 1.myshop (1)打折功能 使用折扣码实现&#xff0c;但是折扣码是手动生成的&#xff0c;感觉实际业务中应该不是这样的。 (2)推荐功能 使用 Redis 做缓存&#xff0…...

编程日记 2024/12/1 21:58:06

Element-UI 官网的主题切换动画

文章目录 实现圆形扩散过渡动画 实现一下 Element-UI 官网的主题切换动画加粗样式 实现 首先我们起一个 html 文件&#xff0c;写一个按钮&#xff0c;以及简单的背景颜色切换&#xff0c;来模拟主题的切换 想要实现过渡效果&#xff0c;需要先用到一个 JavaScript 的原生方…...

编程日记 2024/12/1 21:57:05

Golang 构建学习

Golang 构建学习 如何搭建Golang开发环境 1. 下载GOlang包 https://golang.google.cn/dl/ 在地址上下载Golang 2. 配置包环境 修改全局环境变量&#xff0c;GOPROXY&#xff0c;GOPATH&#xff0c;GOROOT GOPROXYhttps://goproxy.cn,direct GOROOT"" // go二进…...

编程日记 2024/12/1 21:53:01

VM Virutal Box的Ubuntu虚拟机与windows宿主机之间设置共享文件夹(自动挂载，永久有效）

本文参考如下链接 How to access a shared folder in VirtualBox? - Ask Ubuntu &#xff08;1&#xff09;安装增强功能&#xff08;Guest Additions&#xff09; 首先&#xff0c;在网上下载VBoxGuestAdditions光盘映像文件 下载地址&#xff1a;Index of http://…...

编程日记 2024/12/1 21:52:00

分析 系统滴答时钟（tickClock），设置72MHz系统周期，如何实现1毫秒的系统时间？

一、CubeMX相关配置 1.1 相关引脚配置 1.2 相关时钟数配置 1.3 打开程序源码 二、相关函数分析...

编程日记 2024/12/1 21:50:59

C++优选算法十七 多源BFS

1.单源最短路问题 一个起点一个终点。 定义&#xff1a;在给定加权图中&#xff0c;选择一个顶点作为源点&#xff0c;计算该源点到图中所有其他顶点的最短路径长度。 2.多源最短路问题 定义&#xff1a;多源最短路问题指的是在图中存在多个起点&#xff0c;需要求出从这些…...

编程日记 2024/12/1 21:49:58

Mongodb入门到放弃

Mongodb分片概括 分片在多台服务器上分布数据的方法&#xff0c; Mongodb使用分片来支持具有非常大的数据集和高吞吐量的操作的部署 具有大数据集和高吞吐量应用程序的数据库系统&#xff0c;可以挑战单台服务器的容量。 例如&#xff0c;高查询率可以耗尽服务器的cpu容量&…...

编程日记 2024/12/1 21:48:57

青藤云安全携手财信证券，入选金融科技创新应用优秀案例

11月29日&#xff0c;由中国信息通信研究院主办的第四届“金信通”金融科技创新应用案例评选结果正式发布。财信证券与青藤云安全联合提交的“基于RASP技术的API及数据链路安全治理项目”以其卓越的创新性和先进性&#xff0c;成功入选金融科技创新应用优秀案例。 据悉&#x…...

编程日记 2024/12/1 21:47:56

在CentOS系统中安装工具包的时候报错的解决方法

我刚装了一个新的虚拟机&#xff0c;打算安装一些工具出现了错误信息 执行的命令如下&#xff1a; yum install -y yum-utils device-mapper-persistent-data lvm2错误信息如下 Cannot find a valid baseurl for repo: base/7/x86_64搜索了一下原因有好几种。 一是网络不通…...

编程日记 2024/12/1 21:46:55

cad软件打不开报错cad acbrandres dll加载失败

一切本来很顺利哒 但是&#xff0c;当我用快捷方式打开时&#xff0c;就出现了这个错误。进入文件路径&#xff0c;是有这个的&#xff1b; 在文件路径直接打开&#xff0c;也会提示错误 原因竟然是我改了个名字&#xff1a; 随便选的文件路径&#xff0c;空的,文件名为Acr…...

编程日记 2024/12/1 21:45:54

14、保存与加载PyTorch训练的模型和超参数

文章目录 1. state_dict2. 模型保存3. check_point4. 详细保存5. Docker6. 机器学习常用库 1. state_dict nn.Module 类是所有神经网络构建的基类&#xff0c;即自己构建一个深度神经网络也是需要继承自nn.Module类才行&#xff0c;并且nn.Module中的state_dict包含神经网络中…...

编程日记 2024/12/1 21:42:51

【前端开发】JS+Vuew3请求列表数据并分页

应用技术&#xff1a;原生JavaScript Vue3 $(function () {ini(); });function ini() {const { createApp, ref, onMounted } Vue;createApp({setup() {const data ref({studentList: [],page: 1,pageSize: 10,});const getStudentList async (page, key) > {window.ons…...

编程日记 2024/12/1 21:41:50

Trimble X12助力电力管廊数据采集，为机器人巡视系统提供精准导航支持

地下电缆是一个城市重要的基础设施&#xff0c;它不仅具有规模大、范围广、空间分布复杂等特点&#xff0c;更重要的是它还承担着信息传输、能源输送等与人们生活息息相关的重要功能&#xff0c;也是一个城市赖以生存和发展的物质基础。 01、项目概述 本次项目是对某区域2公里左…...

编程日记 2024/12/1 21:40:50

Docker 清理镜像策略详解

文章目录 前言一、删除 Docker 镜像1. 查看当前镜像2. 删除单个镜像3. 删除多个镜像4. 删除所有未使用的镜像5. 删除悬空的 Docker 镜像6. 根据模式删除镜像7. 删除所有镜像 二、删除 Docker 容器1. 查找容器2. 删除一个或多个特定容器3. 退出时删除容器4. 删除所有已退出的容器…...

编程日记 2024/12/1 21:37:46

【Linux】TCP网络编程

目录 V1_Echo_Server V2_Echo_Server多进程版本 V3_Echo_Server多线程版本 V3-1_多线程远程命令执行 V4_Echo_Server线程池版本 V1_Echo_Server TcpServer的上层调用如下&#xff0c;和UdpServer几乎一样&#xff1a; 而在InitServer中&#xff0c;大部分也和UDP那里一样&…...

编程日记 2024/12/1 21:33:41

排序学习整理（2）

上集回顾 排序学习整理&#xff08;1&#xff09;-CSDN博客 2.3 交换排序 交换排序的基本思想是&#xff1a;根据序列中两个记录键值的比较结果&#xff0c;交换这两个记录在序列中的位置。 特点&#xff1a; 通过比较和交换操作&#xff0c;将键值较大的记录逐步移动到序列…...

编程日记 2024/12/1 21:32:40

AI蛋白质设计与人工智能药物设计

AI蛋白质设计与人工智能药物设计 AI蛋白质设计 一、蛋白质相关的深度学习简介 1.基础概念 1.1.机器学习简介&#xff1a;从手写数字识别到大语言模型 1.2.蛋白质结构预测与设计回顾 1.3.Linux简介 1.4.代码环境&#xff1a;VS code和Jupyter notebook* 1.5.Python关键概…...

编程日记 2024/12/1 21:31:38

IOS ARKit进行图像识别

先讲一下基础控涧&#xff0c;资源的话可以留言&#xff0c;抽空我把它传到GitHub上&#xff0c;这里没写收积分&#xff0c;竟然充值才能下载&#xff0c;我下载也要充值&#xff0c;牛&#xff01; ARSCNView 可以理解画布或者场景 1 配置 ARWorldTrackingConfiguration AR追…...

编程日记 2024/12/1 21:29:36

初级数据结构——二叉搜索树

目录 前言一、定义二、基本操作三、时间复杂度分析四、变体五、动态图解六、代码模版七、经典例题[1.——700. 二叉搜索树中的搜索](https://leetcode.cn/problems/search-in-a-binary-search-tree/)代码题解 [2.——938. 二叉搜索树的范围和](https://leetcode.cn/problems/ra…...

编程日记 2024/12/1 21:28:35

C++设计模式之组合模式中如何实现同一层部件的有序性

在组合模式中&#xff0c;为了实现同一层上部件的有序性&#xff0c;可以采取以下几种设计方法&#xff1a; 1. 使用有序集合 使用有序集合&#xff08;如 std::list、std::vector 或其他有序容器&#xff09;来存储和管理子部件。这种方法可以确保子部件按照特定顺序排列&am…...

编程日记 2024/12/1 21:26:33

duxapp RN 端使用AppUpgrade 进行版本更新

版本更新包含了组件和工具的组合 注册 下面这是 duxcms 入口文件检查更新的注册方法&#xff0c;注册的同时会检查更新 import {request,updateApp,userConfig } from ./utils// 检查app更新 setTimeout(async () > {if (process.env.TARO_ENV rn) {// eslint-disable-n…...

编程日记 2024/12/1 21:25:32

【计网】自定义序列化反序列化(三) —— 实现网络版计算器【下】

&#x1f30e;实现网络版计算器【下】 本次序列化与反序列化所用到的代码&#xff0c;Tcp服务自定义序列化反序列化实现网络版计算器。 文章目录&#xff1a; 实实现网络版计算器【下】 客户端实现     基于守护进程的改写 &#x1f680;客户端实现 在这之前&#xff0c…...

编程日记 2024/12/1 21:23:30

神经网络中的优化方法(一)

目录 摘要Abstract1. 与纯优化的区别1.1 经验风险最小化1.2 代理损失函数1.3 批量算法和小批量算法 2. 神经网络中优化的挑战2.1 病态2.2 局部极小值2.3 高原、鞍点和其他平坦区域2.4 悬崖和梯度爆炸2.5 长期依赖2.6 非精确梯度2.7 局部和全局结构间的弱对应 3. 基本算法3.1 随…...

编程日记 2024/12/1 21:22:29

Linux 计算机网络基础概念

目录 0.前言 1.计算机网络背景 1.1 独立模式 1.2 网络互联 1.3 局域网&#xff08;Local Area Network&#xff0c;LAN&#xff09; 1.4 广域网&#xff08;Wide Area Network&#xff0c;WAN&#xff09; 2.协议 2.1什么是协议 2.2协议分层和软件分层 2.3 OSI七层网络模型 2.3…...

编程日记 2024/12/1 21:21:28

qt QGraphicsEllipseItem详解

1、概述 QGraphicsEllipseItem是Qt框架中QGraphicsItem的一个子类&#xff0c;它提供了一个可以添加到QGraphicsScene中的椭圆项。QGraphicsEllipseItem表示一个带有填充和轮廓的椭圆&#xff0c;也可以用于表示椭圆段&#xff08;通过startAngle()和spanAngle()方法&#xff…...

编程日记 2024/12/1 21:19:25

Python websocket

router.websocket(/chat/{flow_id}) 接口代码&#xff0c;并了解其工作流程、涉及的组件以及如何基于此实现你的新 WebSocket 接口。以下内容将分为几个部分进行讲解&#xff1a; 接口整体概述代码逐行解析关键组件和依赖关系如何基于此实现新功能示例&#xff1a;创建一个新的…...

编程日记 2024/12/1 21:16:22

做网站接活全流程/网站推广多少钱

VLAN&#xff08;Virtual Local Area Network&#xff09;虚拟局域网一种将局域网内的设备通过逻辑地划分成为一个个网段来进行管理的技术VLAN是建立在物理网络基础上的一种逻辑子网&#xff0c;因此建立VLAN需要相应的支持VLAN技术的网络设备当网络中的不同VLAN间进行相互通信…...

编程日记 2025/1/12 9:26:03

东莞疾控最新通告今天/短视频入口seo

参考链接 点击按钮直接上传文 /*批量导入*//*#load:为按钮,点击后生成一个隐藏的input file标签*/$(#load).after(<input type"file" id"load_xls" name"file" style"display:none" onchange "uploadFile()">);$(#loa…...

编程日记 2025/1/12 6:46:48

网站开发框架参考文献/华为手机软文范文300

微服务架构 什么是微服务架构&#xff1a; 简而言之&#xff0c;微服务架构风格这种开发方法&#xff0c;是以开发一组小型服务的方式来开发一个独立的应用系统的。其中每个小型服务都运行在自己的进程中&#xff0c;并经常采用HTTP资源API这祥轻里的机制来相互通信。 这些服…...

编程日记 2025/1/12 6:36:39

网站怎么申请备案/湖南平台网站建设设计

是的&#xff0c;这是可能的。有用于这些目的的模块&#xff0c;称为MSG PY。例如&#xff1a;from independentsoft.msg import Messagefrom independentsoft.msg import Recipientfrom independentsoft.msg import ObjectTypefrom independentsoft.msg import DisplayTypefro…...

编程日记 2025/1/12 1:35:57

用wordpress制作网站模板下载/培训课程

1、Android系统默认支持三种字体&#xff0c;分别为&#xff1a;“sans”, “serif”, “monospace 2、在Android中可以引入其他字体 。 <?xml version"1.0" encoding"utf-8"?> <TableLayout xmlns:Android"http://schemas.android.com/…...

编程日记 2025/1/11 20:32:29

设计官网收费标准/南京seo排名扣费

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2022年制冷与空调设备运行操作操作证考试题库系制冷与空调设备运行操作考题高频考题覆盖&#xff01;2022制冷与空调设备运行操作考试模拟100题及在线模拟考试根据制冷与空调设备运行操作考试大纲。制冷与空调设备运行…...

编程日记 2025/1/11 17:03:06