死神与火影的激情碰撞：可自选角色与技能的 HTML 格斗对战代码来袭！

```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>死神VS火影 - 格斗对战</title> <style> body { font-family: 'Arial', sans-serif; background: url('https://images.unsplash.com/photo-1579546929518-9e396f527ebd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center fixed; background-size: cover; color: #fff; margin: 0; padding: 0; text-align: center; } .container { max-width: 1000px; margin: 20px auto; padding: 20px; background: rgba(0, 0, 0, 0.7); border-radius: 12px; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); } h1 { font-size: 2.5em; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff6600; } .selection { margin: 20px 0; display: flex; justify-content: space-around; flex-wrap: wrap; } .character { width: 120px; margin: 10px; padding: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; cursor: pointer; transition: transform 0.3s, background 0.3s; } .character:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.3); } .character.selected { border: 3px solid yellow; background: rgba(255, 255, 0, 0.2); } .character img { width: 100%; border-radius: 6px; } .character p { margin-top: 5px; font-size: 0.9em; } .skills { margin: 20px 0; display: none; } .skill-btn { margin: 10px; padding: 12px 20px; font-size: 1em; background: #d9534f; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s; } .skill-btn:hover { background: #c9302c; } #battle-log { margin-top: 20px; height: 150px; overflow-y: auto; background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 6px; text-align: left; } .vs { font-size: 2em; margin: 20px 0; color: #ff4500; } </style> </head> <body> <div class="container"> <h1>死神 VS 火影</h1> <p>选择你的角色，开始战斗！</p> <div class="selection" id="char-select"> <div class="character" data-name="黑崎一护" data-universe="死神"> <img src="https://i.imgur.com/8VQgzRa.png" alt="黑崎一护"> <p>黑崎一护</p> </div> <div class="character" data-name="朽木露琪亚" data-universe="死神"> <img src="https://i.imgur.com/3yYXeBz.png" alt="朽木露琪亚"> <p>朽木露琪亚</p> </div> <div class="character" data-name="日番谷冬狮郎" data-universe="死神"> <img src="https://i.imgur.com/mKjNlUk.png" alt="日番谷冬狮郎"> <p>日番谷冬狮郎</p> </div> <div class="character" data-name="漩涡鸣人" data-universe="火影"> <img src="https://i.imgur.com/QrJ4v0A.png" alt="漩涡鸣人"> <p>漩涡鸣人</p> </div> <div class="character" data-name="宇智波佐助" data-universe="火影"> <img src="https://i.imgur.com/6FgqE0L.png" alt="宇智波佐助"> <p>宇智波佐助</p> </div> <div class="character" data-name="旗木卡卡西" data-universe="火影"> <img src="https://i.imgur.com/XaMwWjP.png" alt="旗木卡卡西"> <p>旗木卡卡西</p> </div> </div> <div class="vs">VS</div> <div id="player1-info"> <h3>玩家1：未选择</h3> </div> <div id="player2-info"> <h3>玩家2：未选择</h3> </div> <button id="start-battle" style="display:none; padding:10px 20px; font-size:1.2em; background:green; color:white; border:none; border-radius:6px; cursor:pointer;"> 开始战斗 </button> <div class="skills" id="skills-area"> <h3>选择技能攻击：</h3> <button class="skill-btn" data-damage="20">普通斩击</button> <button class="skill-btn" data-damage="40">瞬步突刺</button> <button class="skill-btn" data-damage="60">卍解·天锁斩月</button> <button class="skill-btn" data-damage="80">虚化爆发</button> </div> <div id="battle-log"> <p>欢迎进入死神VS火影对战模式！选择两名角色开始对决。</p> </div> </div> <script> let player1 = null; let player2 = null; const characters = document.querySelectorAll('.character'); const player1Info = document.getElementById('player1-info'); const player2Info = document.getElementById('player2-info'); const startBattleBtn = document.getElementById('start-battle'); const skillsArea = document.getElementById('skills-area'); const battleLog = document.getElementById('battle-log'); characters.forEach(char => { char.addEventListener('click', () => { if (!player1) { player1 = char.dataset; char.classList.add('selected'); player1Info.innerHTML = `<h3>玩家1：${player1.name}（${player1.universe}）</h3>`; logMessage(`玩家1选择了：${player1.name}`); } else if (!player2 && player1.name !== char.dataset.name) { player2 = char.dataset; char.classList.add('selected'); player2Info.innerHTML = `<h3>玩家2：${player2.name}（${player2.universe}）</h3>`; logMessage(`玩家2选择了：${player2.name}`); startBattleBtn.style.display = 'block'; } else if (player2 && char.dataset.name === player2.name) { char.classList.remove('selected'); player2 = null; player2Info.innerHTML = '<h3>玩家2：未选择</h3>'; startBattleBtn.style.display = 'none'; } }); }); startBattleBtn.addEventListener('click', () => { startBattleBtn.style.display = 'none'; skillsArea.style.display = 'block'; logMessage(`${player1.name} 与 ${player2.name} 开始激烈战斗！`); simulateHealth(); }); function simulateHealth() { let hp1 = 100; let hp2 = 100; document.querySelector('.skill-btn').addEventListener('click', function() { const damage = parseInt(this.dataset.damage); const attacker = Math.random() > 0.5 ? player1 : player2; const defender = attacker === player1 ? player2 : player1; const defName = defender.name; const atkName = attacker.name; const actualDamage = Math.floor(damage * (0.8 + Math.random() * 0.4)); if (attacker === player1) { hp2 -= actualDamage; hp2 = Math.max(0, hp2); } else { hp1 -= actualDamage; hp1 = Math.max(0, hp1); } logMessage(`${atkName} 使用【${this.textContent}】对 ${defName} 造成 ${actualDamage} 点伤害！`); if (hp1 <= 0) { logMessage(`${player2.name} 获胜！`); endBattle(); } else if (hp2 <= 0) { logMessage(`${player1.name} 获胜！`); endBattle(); } }); } function logMessage(msg) { const entry = document.createElement('p'); entry.textContent = msg; battleLog.appendChild(entry); battleLog.scrollTop = battleLog.scrollHeight; } function endBattle() { document.querySelectorAll('.skill-btn').forEach(btn => { btn.disabled = true; }); setTimeout(() => { alert("战斗结束！刷新页面重新开始。"); }, 1000); } </script> </body> </html> ``` 功能说明： - 角色选择：从《死神》和《火影忍者》中各选一名角色进行对战。 - 技能系统：点击“开始战斗”后，可使用不同威力的技能进行回合式攻击。 - 战斗日志：实时显示战斗过程和伤害信息。 - 血量模拟：内置简单血条逻辑，判断胜负。 - 响应式设计：适配PC与移动端。 > ⚠️ 注意：图片链接使用了外部图床（如 `i.imgur.com`），请确保网络可访问。如需本地化，请替换为本地资源路径。你可以将此代码保存为 `.html` 文件并用浏览器打开体验。支持扩展更多角色与技能动画。 ######[AI问答 | 2439点数解答 | 2025-10-17 20:00:07]

服务商

更多选项

快捷项

自定义