【趣味升级版】斗破苍穹修炼文字游戏HTML,CSS,JS
目录
图片展示
开始游戏
手动升级（满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>嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。
点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。
