Spaces:
Paused
Paused
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>对战系统</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <div class="npc-portrait-layer"></div> | |
| <div class="screen-flash"></div> | |
| <!-- 战斗场景 --> | |
| <div class="battle-scene"> | |
| <!-- 回合指示器 --> | |
| <div class="turn-indicator"> | |
| <div id="turn-text">我方行动</div> | |
| </div> | |
| <!-- 玩家状态区 --> | |
| <div class="player-status-area"> | |
| <div class="health-container"> | |
| <div class="health-bar"> | |
| <div class="health-fill" id="player-health"></div> | |
| </div> | |
| <div class="health-text"> | |
| <span id="player-health-value">50</span>/<span id="player-max-health">50</span> | |
| </div> | |
| </div> | |
| <div class="energy-display"> | |
| <div class="energy-value"><span id="player-energy">0</span>/10</div> | |
| <div class="energy-icon">⚡</div> | |
| </div> | |
| </div> | |
| <!-- 敌人状态区 --> | |
| <div class="enemy-status-area"> | |
| <div class="health-container"> | |
| <div class="health-bar"> | |
| <div class="health-fill" id="enemy-health"></div> | |
| </div> | |
| <div class="health-text"> | |
| <span id="enemy-health-value">50</span>/<span id="enemy-max-health">50</span> | |
| </div> | |
| </div> | |
| <div class="energy-display"> | |
| <div class="energy-value"><span id="enemy-energy">0</span>/10</div> | |
| <div class="energy-icon">⚡</div> | |
| </div> | |
| </div> | |
| <!-- 左侧玩家角色 --> | |
| <div class="character player-character"></div> | |
| <!-- 右侧敌方角色 --> | |
| <div class="character enemy-character"></div> | |
| <!-- 战斗命令区域 --> | |
| <div class="command-buttons-floating"> | |
| <div class="command-btn" id="gather" data-key="Q"> | |
| <div class="key-hint">Q</div> | |
| <div class="btn-name">集气</div> | |
| </div> | |
| <div class="command-btn" id="defend" data-key="W"> | |
| <div class="key-hint">W</div> | |
| <div class="btn-name">防御</div> | |
| </div> | |
| <div class="command-btn" id="light-attack" data-key="E"> | |
| <div class="key-hint">E</div> | |
| <div class="btn-name">轻攻击</div> | |
| </div> | |
| <div class="command-btn" id="heavy-attack" data-key="R"> | |
| <div class="key-hint">R</div> | |
| <div class="btn-name">重攻击</div> | |
| </div> | |
| <div class="command-btn" id="special" data-key="F"> | |
| <div class="key-hint">T</div> | |
| <div class="btn-name">绝招</div> | |
| </div> | |
| <div class="command-btn" id="taunt" data-key="C"> | |
| <div class="key-hint">Y</div> | |
| <div class="btn-name">嘴炮</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 战斗日志 --> | |
| <div class="battle-log" id="battle-log"> | |
| <p>战斗开始，请选择行动...</p> | |
| </div> | |
| <!-- 确认弹窗 --> | |
| <div id="confirm-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header">确认行动</div> | |
| <div class="modal-body"> | |
| 已选择: <span id="selected-action">无</span> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="confirm-action">确认</button> | |
| <button id="cancel-action">取消</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |