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

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

news 2025/7/15 1:31:36

图片展示

开始游戏

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

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

新增功能说明：

如何操作：

完整代码

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

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

图片展示

开始游戏

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

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

新增功能说明：

打怪获得经验：新增了“打怪”按钮，玩家可以点击“打怪”按钮来获得经验。打怪时，经验有可能增加或减少（模拟失败）。
修炼速度提升：提升修炼速度的按钮仍然存在，但它现在有条件，玩家必须至少积累10点经验才能点击按钮来提升修炼速度。
随机事件：增加了一个随机的事件机制，玩家在打怪时可能会获得额外的经验，或者因失败损失一些经验。
游戏日志：所有事件的发生都会记录在游戏日志中，方便玩家查看游戏进程。

如何操作：

修炼：点击“开始修炼”按钮，每次修炼进度和经验都会增加。完成修炼进度后，玩家可以提升修炼速度并解锁打怪功能。
打怪：点击“打怪”按钮，进行打怪，每次会获得一定经验或损失经验。
提升修炼速度：通过积累经验达到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>