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

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

news 2026/3/27 4:19:19

 

目录

图片展示

开始游戏

手动升级（满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

MGeo门址地址解析效果展示：高德×达摩院多模态模型真实解析案例集

MGeo门址地址解析效果展示&#xff1a;高德达摩院多模态模型真实解析案例集 1. 引言&#xff1a;当AI开始“读懂”地址 想象一下&#xff0c;你收到一条外卖订单&#xff0c;地址写着“朝阳区望京SOHO T3 B座15楼1501室&#xff0c;到了打电话”。对于骑手来说&#xff0c;这…...

编程新知 2026/3/27 3:39:24

RTX 3090 + PyTorch 1.7.1环境配置全攻略：从Scene-Graph-Benchmark.pytorch到Apex安装避坑指南

RTX 3090深度学习环境配置实战&#xff1a;从PyTorch到Scene-Graph-Benchmark全流程解析 当高端硬件遇上前沿算法&#xff0c;环境配置往往成为开发者面临的第一道技术门槛。RTX 3090凭借24GB显存和Ampere架构的强大算力&#xff0c;成为计算机视觉研究的理想选择&#xff0c;但…...

编程新知 2026/3/27 2:54:48

Arco design vue 表格排序踩坑

父组件&#xff1a;<template><div class"p-10"><!-- 商户管理 --><div class"invate-box placeholder:"><div class"flex items-center"><SvgIcon :name"user"></SvgIcon><div class&q…...

编程新知 2026/3/27 2:30:44

APK Editor Studio：从入门到精通的完整Android应用编辑指南

APK Editor Studio&#xff1a;从入门到精通的完整Android应用编辑指南 【免费下载链接】apk-editor-studio Powerful yet easy to use APK editor for PC and Mac. 项目地址: https://gitcode.com/gh_mirrors/ap/apk-editor-studio 在Android应用开发和逆向工程领域&am…...

编程新知 2026/3/27 2:28:43

OpenClaw多模型管理：Qwen3.5-4B-Claude与其他模型的协作方案

OpenClaw多模型管理&#xff1a;Qwen3.5-4B-Claude与其他模型的协作方案 1. 为什么需要多模型协作 去年冬天&#xff0c;当我第一次尝试用OpenClaw自动化处理技术文档时&#xff0c;发现单一模型很难兼顾所有任务场景。有些模型擅长代码生成但逻辑推理薄弱&#xff0c;有些长…...

编程新知 2026/3/27 2:10:41

OpenClaw日志分析：QwQ-32B任务执行效率监控

OpenClaw日志分析&#xff1a;QwQ-32B任务执行效率监控 1. 为什么需要监控OpenClaw任务执行效率 去年冬天&#xff0c;我部署了一个自动整理会议纪要的OpenClaw工作流。起初运行得很顺利&#xff0c;直到某天早上发现它漏掉了三场重要会议的记录。检查日志才发现&#xff0c;…...

编程新知 2026/3/27 2:04:40

深度解析Windows微信自动化：Wechaty Puppet XP零成本架构设计与实战指南

深度解析Windows微信自动化&#xff1a;Wechaty Puppet XP零成本架构设计与实战指南 【免费下载链接】puppet-xp Wechaty Puppet WeChat Windows Protocol 项目地址: https://gitcode.com/gh_mirrors/pu/puppet-xp 在即时通讯自动化领域&#xff0c;Windows平台微信机器…...

编程新知 2026/3/27 1:42:29

vLLM实战：手把手教你用LLMEngine构建高效推理服务（附代码解析）

vLLM实战&#xff1a;从零构建高性能大模型推理服务的工程指南 当大语言模型从实验室走向生产环境时&#xff0c;如何实现高吞吐、低延迟的推理服务成为工程化落地的关键挑战。vLLM作为当前最受关注的开源推理框架之一&#xff0c;其核心组件LLMEngine的设计理念值得每一位AI工…...

编程新知 2026/3/27 1:26:20

Arduino高性能WebSocket客户端库深度解析

1. Arduino-Websocket-Fast 库深度解析&#xff1a;面向嵌入式物联网的高性能 WebSocket 客户端实现1.1 设计动因与工程定位在嵌入式物联网&#xff08;IoT&#xff09;系统开发中&#xff0c;WebSocket 协议因其全双工、低开销、长连接特性&#xff0c;已成为设备与云平台间实…...

编程新知 2026/3/27 0:11:22

别再傻傻分不清了！用Simulink手把手带你搞懂导纳控制与阻抗控制的本质区别

导纳控制 vs 阻抗控制&#xff1a;从理论到Simulink实战的深度解析 在机器人控制领域&#xff0c;柔性交互是一个永恒的话题。想象一下&#xff0c;当机械臂需要完成精密装配任务时&#xff0c;既要有足够的刚性保证定位精度&#xff0c;又要在意外碰撞时表现出适当的柔顺性——…...

编程新知 2026/3/26 23:51:15