勿点,是开源的雷霆代码
2026-10-05 14:37:16
发布于:浙江
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡牌对战 · 天赋肝途</title>
<style>
* {
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body {
background: linear-gradient(145deg, #0b1a2e 0%, #1a2f3f 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.game-container {
max-width: 1300px;
width: 100%;
background: rgba(22, 34, 48, 0.85);
backdrop-filter: blur(6px);
border: 2px solid #4d7a9b;
border-radius: 32px;
padding: 1.5rem;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(110, 190, 240, 0.2);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* 头部:魔丸豆 + 反派 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background: #0b1622;
border-radius: 60px;
padding: 0.75rem 2rem;
border: 1px solid #2e5a7a;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 10px #00000040;
}
.beans-box {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.3rem;
font-weight: bold;
color: #e9f2fa;
text-shadow: 0 0 12px #9ad0ff;
}
.beans-icon {
font-size: 2rem;
filter: drop-shadow(0 0 6px white);
}
.beans-count {
background: #1b3448;
padding: 0.2rem 1rem;
border-radius: 40px;
border: 1px solid #7ab3d9;
font-family: monospace;
font-size: 1.8rem;
color: #f0f9ff;
min-width: 80px;
text-align: center;
box-shadow: inset 0 0 8px #00000066, 0 0 10px #2f6f9b;
}
.enemy-panel {
display: flex;
align-items: center;
gap: 1.5rem;
color: #ffc1b0;
}
.enemy-health {
background: #2d1e1e;
padding: 0.4rem 1.2rem;
border-radius: 30px;
border: 1px solid #b55a4a;
font-weight: bold;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: inset 0 0 10px #330000;
}
.enemy-health span {
color: #ff9478;
font-size: 1.6rem;
font-family: monospace;
}
.enemy-btn {
background: #4d2b2b;
border: none;
border-radius: 40px;
padding: 0.5rem 1.3rem;
font-weight: bold;
color: #ffbea8;
font-size: 1rem;
cursor: pointer;
border: 1px solid #b56b5b;
transition: all 0.15s;
box-shadow: 0 5px 0 #261212;
}
.enemy-btn:active {
transform: translateY(3px);
box-shadow: 0 2px 0 #261212;
}
.enemy-btn:disabled {
opacity: 0.4;
transform: translateY(3px);
box-shadow: 0 2px 0 #261212;
pointer-events: none;
}
/* 角色卡牌区 */
.heroes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 0.5rem 0;
}
.hero-card {
background: linear-gradient(145deg, #182c3c, #0f1e2a);
border-radius: 24px;
padding: 1rem 0.8rem;
border: 2px solid #315d7c;
box-shadow: 0 8px 0 #0a121b, 0 10px 20px #00000070;
transition: all 0.1s;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 0.6rem;
position: relative;
}
.hero-card.selected {
border: 3px solid #f5d742;
box-shadow: 0 0 18px #f5d742, 0 8px 0 #0a121b;
transform: translateY(-3px);
}
.hero-card.disabled {
opacity: 0.5;
filter: grayscale(0.7);
pointer-events: none;
}
.hero-name {
font-size: 1.5rem;
font-weight: 800;
color: #d9ecff;
text-shadow: 0 2px 4px black;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.8rem;
font-size: 0.85rem;
color: #aac7dd;
background: #0b1923;
padding: 0.4rem 0.6rem;
border-radius: 14px;
border: 1px solid #2d5170;
}
.hero-stats span {
display: flex;
align-items: center;
gap: 0.2rem;
}
.talent-badge {
background: #2d3e5c;
border-radius: 20px;
padding: 0.15rem 0.6rem;
font-size: 0.75rem;
font-weight: bold;
color: #c2e0ff;
border: 1px solid #7fa9cc;
margin-left: auto;
}
.hero-hp {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #b4d9ff;
background: #10212e;
padding: 0.2rem 0.6rem;
border-radius: 30px;
border: 1px solid #2d5777;
}
.hp-bar-bg {
background: #282828;
height: 8px;
flex: 1;
margin-left: 0.5rem;
border-radius: 10px;
overflow: hidden;
}
.hp-fill {
height: 100%;
background: #35b06b;
width: 100%;
border-radius: 10px;
transition: width 0.2s;
}
/* 天赋选择面板 */
.talent-panel {
background: #0d1b26e0;
border-radius: 28px;
padding: 1.2rem;
border: 1px solid #3e6d8f;
box-shadow: inset 0 0 30px #00000055;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
min-height: 120px;
}
.talent-options {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
width: 100%;
}
.talent-btn {
background: #1e3d54;
border: 2px solid #4a89b3;
border-radius: 60px;
padding: 0.9rem 2rem;
font-size: 1.15rem;
font-weight: bold;
color: #e3f0ff;
cursor: pointer;
transition: all 0.12s;
box-shadow: 0 6px 0 #0b1a24, 0 8px 15px black;
flex: 0 1 auto;
min-width: 160px;
}
.talent-btn:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #0b1a24, 0 8px 15px black;
}
.talent-btn:disabled {
opacity: 0.4;
transform: translateY(4px);
box-shadow: 0 2px 0 #0b1a24;
pointer-events: none;
}
.talent-btn.special {
background: #2d4b2d;
border-color: #8bc34a;
}
.talent-hint {
font-size: 0.9rem;
color: #b0d4f0;
margin-top: 0.2rem;
width: 100%;
text-align: center;
font-style: italic;
}
.talent-history {
background: #10212e;
border-radius: 30px;
padding: 0.3rem 1.2rem;
font-size: 0.9rem;
color: #c2d9f0;
border: 1px solid #2e5a7a;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
/* 日志区 */
.log-area {
background: #07121b;
border-radius: 20px;
padding: 0.8rem 1.2rem;
height: 90px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
color: #b0e0b0;
border: 1px solid #2b5e3b;
box-shadow: inset 0 0 20px #00000080;
line-height: 1.5;
}
.log-area div {
border-bottom: 1px dashed #1e412e;
}
/* 按钮行 */
.action-bar {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.action-btn {
background: #314e6b;
border: none;
border-radius: 50px;
padding: 0.9rem 2rem;
font-weight: bold;
font-size: 1.2rem;
color: white;
cursor: pointer;
border: 1px solid #7db3d9;
box-shadow: 0 7px 0 #10212e;
transition: all 0.1s;
min-width: 150px;
}
.action-btn:active {
transform: translateY(4px);
box-shadow: 0 3px 0 #10212e;
}
.action-btn:disabled {
opacity: 0.4;
transform: translateY(4px);
box-shadow: 0 3px 0 #10212e;
pointer-events: none;
}
.action-btn.reset {
background: #4d2e2e;
border-color: #b56b5b;
}
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #f5d742;
color: #1a2f3f;
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0 10px 25px black;
z-index: 999;
transition: opacity 0.3s;
pointer-events: none;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="game-container">
<!-- 头部 魔丸豆 & 反派 -->
<div class="header">
<div class="beans-box">
<span class="beans-icon">⚪</span>
<span>魔丸豆</span>
<div class="beans-count" id="beansDisplay">0</div>
</div>
<div class="enemy-panel">
<div class="enemy-health">
👹 反派血量 <span id="enemyHpDisplay">120</span>
</div>
<button class="enemy-btn" id="attackEnemyBtn">攻击反派 (耗1⚪)</button>
</div>
</div>
<!-- 六英雄卡牌 -->
<div class="heroes-grid" id="heroesGrid"></div>
<!-- 天赋选择区 -->
<div class="talent-panel">
<div id="talentOptionsContainer" class="talent-options">
<!-- 动态渲染天赋按钮 -->
</div>
<div class="talent-history" id="talentHistory">
<span>📜 天赋路线:</span>
<span id="talentPathDisplay">无</span>
</div>
</div>
<!-- 日志 -->
<div class="log-area" id="logArea">
<div>⚔️ 击败反派掉落魔丸豆与技能卡...</div>
</div>
<!-- 操作按钮 -->
<div class="action-bar">
<button class="action-btn" id="useCardBtn" disabled>使用技能卡 (1⚪)</button>
<button class="action-btn reset" id="resetGameBtn">🔄 重开对局</button>
</div>
</div>
<div id="toast" class="toast" style="opacity:0;">提示</div>
<script>
// ======================== 游戏核心数据 ========================
// 英雄基础属性 (设定完全按照描述)
const HEROES = [
{ id: 'xbai', name: '全能哥小白', baseHp: 100, maxHp: 100, atk: 15, def: 15, magic: 15, heal: 15, type: '均衡',
desc: '回血中等/攻击中等/防御中等/魔法中等' },
{ id: 'xlan', name: '魔法哥小蓝', baseHp: 70, maxHp: 70, atk: 0, def: 6, magic: 28, heal: 6, type: '法师',
desc: '防御低级/回血低级/攻击无/魔法天赋' },
{ id: 'xbai2', name: '重武器小百', baseHp: 90, maxHp: 90, atk: 12, def: 12, magic: 0, heal: 12, type: '锻造',
desc: '所有技能由天赋决定,专攻不同武器' },
{ id: 'xmiao', name: '小淼', baseHp: 80, maxHp: 80, atk: 0, def: 8, magic: 0, heal: 18, type: '奶妈',
desc: '防御低级/全体回血/攻击魔法全无' },
{ id: 'xqing', name: '小青', baseHp: 110, maxHp: 110, atk: 28, def: 22, magic: 10, heal: 10, type: '战士',
desc: '输出强大/防御高' },
{ id: 'xlin', name: '小林', baseHp: 75, maxHp: 75, atk: 10, def: 10, magic: 10, heal: 10, type: '辅助',
desc: '给全体增益' }
];
// 玩家队伍 (状态)
let heroes = HEROES.map(h => ({
...h,
hp: h.maxHp,
maxHp: h.maxHp,
// 天赋树进度: 每个英雄可累积选择
talent: {
branch: null, // 主分支 e.g. '输出' / '防御'
subBranch: null, // 子分支 e.g. '雷电' / '镭射'
special: null, // 终极天赋 e.g. '爆炸雷电' / '散弹雷电'
// 额外属性加成
bonusAtk: 0,
bonusDef: 0,
bonusMagic: 0,
bonusHeal: 0,
// 特殊效果标记
aoeLightning: false,
},
// 是否已选择天赋(本局) 但可继续分支
selectedTalentThisTurn: false,
}));
// 魔丸豆
let beans = 3; // 初始给3颗方便测试
// 反派
let enemyMaxHp = 120;
let enemyHp = 120;
// 一次性技能卡(收藏品/技能卡) 简单模拟: 有概率掉落
let skillCards = 0; // 拥有的技能卡数量
// 当前选中的英雄ID (用于天赋选择)
let selectedHeroId = null;
// 天赋树定义 (根据英雄不同, 动态生成)
// 为了简化并贴合描述: 每个英雄的天赋树都有点不同, 但结构类似
// 使用函数生成
// 日志
let logs = [];
// ======================== 辅助函数 ========================
function addLog(msg) {
logs.unshift(msg);
if (logs.length > 6) logs.pop();
renderLog();
}
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = msg;
toast.style.opacity = '1';
setTimeout(() => toast.style.opacity = '0', 1200);
}
// 渲染全部
function renderAll() {
renderBeans();
renderEnemy();
renderHeroes();
renderTalentPanel();
renderLog();
}
function renderBeans() {
document.getElementById('beansDisplay').textContent = beans;
// 攻击反派按钮 需要豆
document.getElementById('attackEnemyBtn').disabled = beans < 1 || enemyHp <= 0;
// 使用技能卡按钮
document.getElementById('useCardBtn').disabled = beans < 1 || skillCards < 1 || enemyHp <= 0;
}
function renderEnemy() {
document.getElementById('enemyHpDisplay').textContent = Math.max(0, enemyHp);
}
// 计算英雄实际属性 (基础+天赋加成)
function getHeroStats(hero) {
let base = HEROES.find(h => h.id === hero.id);
let atk = base.atk + (hero.talent.bonusAtk || 0);
let def = base.def + (hero.talent.bonusDef || 0);
let magic = base.magic + (hero.talent.bonusMagic || 0);
let heal = base.heal + (hero.talent.bonusHeal || 0);
// 小淼全体回血特殊处理
return { atk, def, magic, heal };
}
// 渲染英雄卡牌
function renderHeroes() {
const grid = document.getElementById('heroesGrid');
grid.innerHTML = '';
heroes.forEach(hero => {
const card = document.createElement('div');
card.className = `hero-card ${selectedHeroId === hero.id ? 'selected' : ''}`;
if (hero.hp <= 0) card.classList.add('disabled');
card.dataset.id = hero.id;
const stats = getHeroStats(hero);
// 天赋描述简短
let talentDesc = '';
if (hero.talent.special) talentDesc = hero.talent.special;
else if (hero.talent.subBranch) talentDesc = hero.talent.subBranch;
else if (hero.talent.branch) talentDesc = hero.talent.branch;
else talentDesc = '未选';
card.innerHTML = `
<div class="hero-name">
${hero.name}
<span class="talent-badge">${talentDesc}</span>
</div>
<div class="hero-stats">
<span>❤️ ${hero.hp}/${hero.maxHp}</span>
<span>⚔️ ${stats.atk}</span>
<span>🛡️ ${stats.def}</span>
<span>✨ ${stats.magic}</span>
<span>💚 ${stats.heal}</span>
</div>
<div class="hero-hp">
<span>HP</span>
<div class="hp-bar-bg"><div class="hp-fill" style="width: ${(hero.hp / hero.maxHp) * 100}%"></div></div>
</div>
`;
card.addEventListener('click', () => {
if (hero.hp <= 0) {
showToast('该英雄已阵亡,无法选择');
return;
}
selectedHeroId = hero.id;
renderHeroes();
renderTalentPanel();
});
grid.appendChild(card);
});
}
// ======================== 天赋树逻辑 ========================
// 根据选中的英雄生成可用的天赋选项
function getTalentOptions(heroId) {
const hero = heroes.find(h => h.id === heroId);
if (!hero) return [];
const talent = hero.talent;
const options = [];
// 如果已经有special,没有更多选项
if (talent.special) return [];
// 根据英雄类型给出不同分支
// 但为了可玩性,所有英雄都有一些分支,按照描述区别化
// 全能哥小白
if (hero.id === 'xbai') {
if (!talent.branch) {
options.push({ label: '⚔️ 攻击强化', action: 'branch', value: '攻击', desc: '攻击天赋 +8攻击' });
options.push({ label: '🛡️ 防御强化', action: 'branch', value: '防御', desc: '防御天赋 +8防御' });
options.push({ label: '✨ 魔法强化', action: 'branch', value: '魔法', desc: '魔法天赋 +8魔法' });
} else if (talent.branch === '攻击' && !talent.subBranch) {
options.push({ label: '🗡️ 剑术专精', action: 'sub', value: '剑术', desc: '攻击+6,防御+3' });
options.push({ label: '🏹 弓术专精', action: 'sub', value: '弓术', desc: '攻击+10' });
} else if (talent.branch === '防御' && !talent.subBranch) {
options.push({ label: '🛡️ 铁壁', action: 'sub', value: '铁壁', desc: '防御+10' });
options.push({ label: '💪 坚韧', action: 'sub', value: '坚韧', desc: '防御+6,回血+4' });
} else if (talent.branch === '魔法' && !talent.subBranch) {
options.push({ label: '🔥 火焰', action: 'sub', value: '火焰', desc: '魔法+10' });
options.push({ label: '❄️ 冰霜', action: 'sub', value: '冰霜', desc: '魔法+6,防御+4' });
} else if (talent.subBranch) {
// 终极天赋
options.push({ label: '🌟 究极强化', action: 'special', value: '究极强化', desc: '全属性+5' });
options.push({ label: '⚡ 迅捷', action: 'special', value: '迅捷', desc: '攻击+7,防御+3' });
}
}
// 魔法哥小蓝
else if (hero.id === 'xlan') {
if (!talent.branch) {
options.push({ label: '🔮 雷电天赋', action: 'branch', value: '雷电', desc: '魔法+12' });
options.push({ label: '💥 爆炸天赋', action: 'branch', value: '爆炸', desc: '魔法+10,攻击+5' });
} else if (talent.branch === '雷电' && !talent.subBranch) {
options.push({ label: '🌩️ 普通雷电', action: 'sub', value: '普通雷电', desc: '魔法+8' });
options.push({ label: '⚡ 连锁雷电', action: 'sub', value: '连锁雷电', desc: '魔法+5,攻击+5' });
} else if (talent.branch === '爆炸' && !talent.subBranch) {
options.push({ label: '💣 爆裂', action: 'sub', value: '爆裂', desc: '魔法+10' });
options.push({ label: '🔥 灼烧', action: 'sub', value: '灼烧', desc: '魔法+6,攻击+6' });
} else if (talent.subBranch) {
// 按描述: 爆炸雷电仅给小青增加15伤害,散弹雷电可以让所有人同时释放自身技能加雷电伤害
if (talent.subBranch === '普通雷电' || talent.subBranch === '连锁雷电') {
options.push({ label: '💥 爆炸雷电', action: 'special', value: '爆炸雷电', desc: '小青增加15伤害(需小青存活)' });
options.push({ label: '🌩️ 散弹雷电', action: 'special', value: '散弹雷电', desc: '所有人释放技能时附加雷电伤害' });
} else {
options.push({ label: '💥 爆炸强化', action: 'special', value: '爆炸强化', desc: '魔法+15' });
options.push({ label: '🌪️ 扩散', action: 'special', value: '扩散', desc: '魔法+8,全体回血5' });
}
}
}
// 重武器小百 (天赋决定武器方向)
else if (hero.id === 'xbai2') {
if (!talent.branch) {
options.push({ label: '⚔️ 攻击武器', action: 'branch', value: '攻击', desc: '攻击+10' });
options.push({ label: '🛡️ 防御武器', action: 'branch', value: '防御', desc: '防御+10' });
options.push({ label: '💚 回血武器', action: 'branch', value: '回血', desc: '回血+10' });
} else if (talent.branch === '攻击' && !talent.subBranch) {
options.push({ label: '🗡️ 巨剑', action: 'sub', value: '巨剑', desc: '攻击+15' });
options.push({ label: '🔨 战锤', action: 'sub', value: '战锤', desc: '攻击+10,防御+5' });
} else if (talent.branch === '防御' && !talent.subBranch) {
options.push({ label: '🛡️ 盾墙', action: 'sub', value: '盾墙', desc: '防御+15' });
options.push({ label: '⛓️ 重甲', action: 'sub', value: '重甲', desc: '防御+10,回血+5' });
} else if (talent.branch === '回血' && !talent.subBranch) {
options.push({ label: '💚 治愈之触', action: 'sub', value: '治愈之触', desc: '回血+15' });
options.push({ label: '🌿 生命领域', action: 'sub', value: '生命领域', desc: '回血+10,防御+5' });
} else if (talent.subBranch) {
options.push({ label: '🌟 武器大师', action: 'special', value: '武器大师', desc: '攻击+10,防御+10' });
options.push({ label: '🔥 熔铸', action: 'special', value: '熔铸', desc: '攻击+8,回血+8' });
}
}
// 小淼 (全体回血)
else if (hero.id === 'xmiao') {
if (!talent.branch) {
options.push({ label: '💚 回血强化', action: 'branch', value: '回血', desc: '回血+12' });
options.push({ label: '🛡️ 防御强化', action: 'branch', value: '防御', desc: '防御+8' });
} else if (talent.branch === '回血' && !talent.subBranch) {
options.push({ label: '🌊 潮涌', action: 'sub', value: '潮涌', desc: '全体回血+10' });
options.push({ label: '💧 甘露', action: 'sub', value: '甘露', desc: '回血+8,防御+4' });
} else if (talent.branch === '防御' && !talent.subBranch) {
options.push({ label: '🐢 硬壳', action: 'sub', value: '硬壳', desc: '防御+12' });
options.push({ label: '🌱 生机', action: 'sub', value: '生机', desc: '防御+6,回血+6' });
} else if (talent.subBranch) {
options.push({ label: '💖 生命之泉', action: 'special', value: '生命之泉', desc: '全体回血+15' });
options.push({ label: '🛡️ 圣盾', action: 'special', value: '圣盾', desc: '全体防御+10' });
}
}
// 小青
else if (hero.id === 'xqing') {
if (!talent.branch) {
options.push({ label: '⚔️ 输出', action: 'branch', value: '输出', desc: '攻击+12' });
options.push({ label: '🛡️ 防御', action: 'branch', value: '防御', desc: '防御+12' });
} else if (talent.branch === '输出' && !talent.subBranch) {
options.push({ label: '🔫 镭射技能', action: 'sub', value: '镭射技能', desc: '攻击+15' });
options.push({ label: '⚡ 雷电技能', action: 'sub', value: '雷电技能', desc: '攻击+10,魔法+8' });
} else if (talent.branch === '防御' && !talent.subBranch) {
options.push({ label: '🛡️ 铁壁', action: 'sub', value: '铁壁', desc: '防御+15' });
options.push({ label: '💪 反击', action: 'sub', value: '反击', desc: '防御+8,攻击+8' });
} else if (talent.subBranch) {
// 雷电分支衍生
if (talent.subBranch === '雷电技能') {
options.push({ label: '💥 爆炸雷电', action: 'special', value: '爆炸雷电', desc: '自身攻击+15' });
options.push({ label: '🌩️ 散弹雷电', action: 'special', value: '散弹雷电', desc: '所有人释放技能时附加雷电伤害' });
} else {
options.push({ label: '🌟 终极输出', action: 'special', value: '终极输出', desc: '攻击+20' });
options.push({ label: '⚡ 雷神', action: 'special', value: '雷神', desc: '攻击+10,魔法+10' });
}
}
}
// 小林
else if (hero.id === 'xlin') {
if (!talent.branch) {
options.push({ label: '✨ 增益强化', action: 'branch', value: '增益', desc: '全体攻击+5' });
options.push({ label: '💚 恢复强化', action: 'branch', value: '恢复', desc: '全体回血+5' });
} else if (talent.branch === '增益' && !talent.subBranch) {
options.push({ label: '⚔️ 攻击号令', action: 'sub', value: '攻击号令', desc: '全体攻击+8' });
options.push({ label: '🛡️ 防御号令', action: 'sub', value: '防御号令', desc: '全体防御+8' });
} else if (talent.branch === '恢复' && !talent.subBranch) {
options.push({ label: '💚 群体治愈', action: 'sub', value: '群体治愈', desc: '全体回血+10' });
options.push({ label: '🌿 再生', action: 'sub', value: '再生', desc: '全体回血+6,防御+4' });
} else if (talent.subBranch) {
options.push({ label: '🌟 全军鼓舞', action: 'special', value: '全军鼓舞', desc: '全体攻击+10,防御+5' });
options.push({ label: '💖 生命祝福', action: 'special', value: '生命祝福', desc: '全体回血+15' });
}
}
return options;
}
// 应用天赋选择
function applyTalent(heroId, action, value, desc) {
const hero = heroes.find(h => h.id === heroId);
if (!hero) return;
const talent = hero.talent;
// 根据action修改
if (action === 'branch') {
talent.branch = value;
// 根据分支给基础加成
if (value === '攻击' || value === '输出') talent.bonusAtk += 8;
if (value === '防御') talent.bonusDef += 8;
if (value === '魔法') talent.bonusMagic += 8;
if (value === '回血' || value === '恢复') talent.bonusHeal += 8;
if (value === '增益') { /* 增益作为标记,稍后应用全体 */ talent.bonusAtk += 3; }
} else if (action === 'sub') {
talent.subBranch = value;
// 子分支加成
if (value.includes('剑术')) { talent.bonusAtk += 6; talent.bonusDef += 3; }
else if (value.includes('弓术')) talent.bonusAtk += 10;
else if (value.includes('铁壁')) talent.bonusDef += 10;
else if (value.includes('坚韧')) { talent.bonusDef += 6; talent.bonusHeal += 4; }
else if (value.includes('火焰')) talent.bonusMagic += 10;
else if (value.includes('冰霜')) { talent.bonusMagic += 6; talent.bonusDef += 4; }
else if (value.includes('雷电') || value.includes('雷电技能')) { talent.bonusMagic += 8; talent.bonusAtk += 5; }
else if (value.includes('爆炸')) talent.bonusMagic += 8;
else if (value.includes('普通雷电')) talent.bonusMagic += 8;
else if (value.includes('连锁雷电')) { talent.bonusMagic += 5; talent.bonusAtk += 5; }
else if (value.includes('镭射技能')) talent.bonusAtk += 15;
else if (value.includes('巨剑')) talent.bonusAtk += 15;
else if (value.includes('战锤')) { talent.bonusAtk += 10; talent.bonusDef += 5; }
else if (value.includes('盾墙')) talent.bonusDef += 15;
else if (value.includes('重甲')) { talent.bonusDef += 10; talent.bonusHeal += 5; }
else if (value.includes('治愈之触')) talent.bonusHeal += 15;
else if (value.includes('生命领域')) { talent.bonusHeal += 10; talent.bonusDef += 5; }
else if (value.includes('潮涌')) talent.bonusHeal += 10;
else if (value.includes('甘露')) { talent.bonusHeal += 8; talent.bonusDef += 4; }
else if (value.includes('硬壳')) talent.bonusDef += 12;
else if (value.includes('生机')) { talent.bonusDef += 6; talent.bonusHeal += 6; }
else if (value.includes('攻击号令')) { /* 全体效果,特殊处理 */ hero.talent.bonusAtk += 0; }
else if (value.includes('防御号令')) { /* 全体效果 */ }
else if (value.includes('群体治愈')) { /* 全体 */ }
else if (value.includes('再生')) { /* 全体 */ }
// 对于全体增益小林的子分支,给全体加属性 (通过遍历)
if (hero.id === 'xlin') {
if (value === '攻击号令') heroes.forEach(h => { if (h.hp>0) h.talent.bonusAtk += 8; });
if (value === '防御号令') heroes.forEach(h => { if (h.hp>0) h.talent.bonusDef += 8; });
if (value === '群体治愈') heroes.forEach(h => { if (h.hp>0) h.talent.bonusHeal += 10; });
if (value === '再生') heroes.forEach(h => { if (h.hp>0) { h.talent.bonusHeal += 6; h.talent.bonusDef += 4; } });
}
} else if (action === 'special') {
talent.special = value;
// 特殊天赋效果
if (value === '爆炸雷电') {
if (hero.id === 'xqing') hero.talent.bonusAtk += 15;
else hero.talent.bonusMagic += 10;
} else if (value === '散弹雷电') {
// 标记所有人技能附加雷电伤害
heroes.forEach(h => { h.talent.aoeLightning = true; });
addLog('🌩️ 散弹雷电激活: 所有人释放技能时附加雷电伤害!');
} else if (value === '究极强化') {
hero.talent.bonusAtk += 5; hero.talent.bonusDef += 5; hero.talent.bonusMagic += 5; hero.talent.bonusHeal += 5;
} else if (value === '武器大师') {
hero.talent.bonusAtk += 10; hero.talent.bonusDef += 10;
} else if (value === '生命之泉') {
heroes.forEach(h => { if (h.hp>0) h.talent.bonusHeal += 15; });
} else if (value === '圣盾') {
heroes.forEach(h => { if (h.hp>0) h.talent.bonusDef += 10; });
} else if (value === '全军鼓舞') {
heroes.forEach(h => { if (h.hp>0) { h.talent.bonusAtk += 10; h.talent.bonusDef += 5; } });
} else if (value === '生命祝福') {
heroes.forEach(h => { if (h.hp>0) h.talent.bonusHeal += 15; });
} else {
// 通用小加成
hero.talent.bonusAtk += 5;
}
}
// 清理可能导致的重复问题,不深究
// 恢复血量至新上限(可选)
hero.hp = Math.min(hero.hp, hero.maxHp);
addLog(`✨ ${hero.name} 选择了 ${desc}`);
renderAll();
}
// 渲染天赋面板
function renderTalentPanel() {
const container = document.getElementById('talentOptionsContainer');
const historySpan = document.getElementById('talentPathDisplay');
// 历史路径
if (selectedHeroId) {
const hero = heroes.find(h => h.id === selectedHeroId);
if (hero) {
let path = [];
if (hero.talent.branch) path.push(hero.talent.branch);
if (hero.talent.subBranch) path.push(hero.talent.subBranch);
if (hero.talent.special) path.push(hero.talent.special);
historySpan.textContent = path.length ? path.join(' → ') : '无';
}
} else {
historySpan.textContent = '未选择英雄';
}
if (!selectedHeroId) {
container.innerHTML = '<div style="color:#8ba9c7; padding:1rem;">点击英雄卡牌以选择天赋</div>';
return;
}
const hero = heroes.find(h => h.id === selectedHeroId);
if (!hero || hero.hp <= 0) {
container.innerHTML = '<div style="color:#b37; padding:1rem;">英雄已阵亡,无法选择天赋</div>';
return;
}
const options = getTalentOptions(selectedHeroId);
if (options.length === 0) {
container.innerHTML = '<div style="color:#9fc5e8; padding:1rem;">✨ 该英雄天赋已满级</div>';
return;
}
container.innerHTML = '';
options.forEach(opt => {
const btn = document.createElement('button');
btn.className = 'talent-btn';
btn.textContent = opt.label;
btn.title = opt.desc;
btn.addEventListener('click', (e) => {
e.stopPropagation();
applyTalent(selectedHeroId, opt.action, opt.value, opt.desc);
renderAll();
});
container.appendChild(btn);
});
// 加提示
const hint = document.createElement('div');
hint.className = 'talent-hint';
hint.textContent = '点击选项获得对应加成 (天赋树持续解锁)';
container.appendChild(hint);
}
// 日志渲染
function renderLog() {
const area = document.getElementById('logArea');
area.innerHTML = logs.map(l => `<div>${l}</div>`).join('');
}
// ======================== 战斗/技能逻辑 ========================
// 攻击反派 (消耗1豆)
function attackEnemy() {
if (beans < 1 || enemyHp <= 0) return;
beans -= 1;
// 计算队伍总攻击 (存活英雄)
let totalAtk = 0;
heroes.forEach(h => {
if (h.hp > 0) {
const stats = getHeroStats(h);
totalAtk += stats.atk;
// 散弹雷电附加
if (h.talent.aoeLightning) totalAtk += 8; // 额外雷电伤害
}
});
// 保底至少5伤害
totalAtk = Math.max(5, totalAtk);
enemyHp = Math.max(0, enemyHp - totalAtk);
addLog(`⚔️ 队伍造成 ${totalAtk} 点伤害,反派剩余 ${enemyHp}`);
// 反派掉落魔丸豆 (概率掉落1-3颗)
const dropBeans = Math.floor(Math.random() * 3) + 1;
beans += dropBeans;
addLog(`💧 反派掉落了 ${dropBeans} 颗魔丸豆`);
// 概率掉落技能卡
if (Math.random() < 0.4) {
skillCards += 1;
addLog('🎴 获得一张一次性技能卡!');
showToast('获得技能卡 x1');
}
// 如果反派死亡,额外奖励
if (enemyHp <= 0) {
const bonus = 3;
beans += bonus;
addLog(`🏆 反派被击败! 额外获得 ${bonus} 颗魔丸豆,并掉落一张技能卡!`);
skillCards += 1;
showToast('击败反派! 获得奖励');
// 可以重置反派? 简单起见就让反派维持0,不再攻击
}
renderAll();
}
// 使用技能卡 (消耗1豆+1技能卡)
function useSkillCard() {
if (beans < 1 || skillCards < 1) return;
beans -= 1;
skillCards -= 1;
// 技能卡效果: 全体回血20,或对敌造成30伤害 (随机)
if (Math.random() < 0.5) {
heroes.forEach(h => { if (h.hp > 0) h.hp = Math.min(h.maxHp, h.hp + 20); });
addLog('🎴 技能卡: 全体恢复20点生命');
} else {
const dmg = 30 + Math.floor(Math.random() * 20);
enemyHp = Math.max(0, enemyHp - dmg);
addLog(`🎴 技能卡: 对反派造成 ${dmg} 点伤害`);
}
renderAll();
}
// 重置游戏
function resetGame() {
beans = 3;
enemyHp = enemyMaxHp;
skillCards = 0;
selectedHeroId = null;
heroes = HEROES.map(h => ({
...h,
hp: h.maxHp,
maxHp: h.maxHp,
talent: {
branch: null,
subBranch: null,
special: null,
bonusAtk: 0,
bonusDef: 0,
bonusMagic: 0,
bonusHeal: 0,
aoeLightning: false,
},
}));
logs = ['⚔️ 击败反派掉落魔丸豆与技能卡...'];
renderAll();
addLog('🔄 游戏已重置');
renderAll();
}
// ======================== 事件绑定 ========================
function bindEvents() {
document.getElementById('attackEnemyBtn').addEventListener('click', attackEnemy);
document.getElementById('useCardBtn').addEventListener('click', useSkillCard);
document.getElementById('resetGameBtn').addEventListener('click', resetGame);
}
// 启动
function init() {
bindEvents();
renderAll();
addLog('⚔️ 点击英雄卡牌选择天赋,消耗魔丸豆攻击反派。');
}
init();
</script>
</body>
</html>
这里空空如也















有帮助,赞一个