183 lines
8.4 KiB
HTML
183 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<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">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="start-screen" id="start-screen">
|
||
|
|
<div class="start-content">
|
||
|
|
<h1>三国杀</h1>
|
||
|
|
<h2>五人身份局</h2>
|
||
|
|
<p>主公、忠臣、反贼、内奸</p>
|
||
|
|
<button id="start-btn" class="start-btn">开始游戏</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="game-container" id="game-container" style="display: none;">
|
||
|
|
<div class="header">
|
||
|
|
<h1>三国杀</h1>
|
||
|
|
<div class="game-info">
|
||
|
|
<span id="current-phase">准备阶段</span>
|
||
|
|
<span id="turn-count">回合: 1</span>
|
||
|
|
<span id="attack-range">攻击距离: 1</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="game-area">
|
||
|
|
<div class="top-row">
|
||
|
|
<div class="player-card" id="player-2" onclick="selectTarget(2)">
|
||
|
|
<div class="player-info">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="" alt="" id="avatar-2">
|
||
|
|
</div>
|
||
|
|
<div class="player-details">
|
||
|
|
<h3 id="name-2"></h3>
|
||
|
|
<div class="identity" id="identity-2"></div>
|
||
|
|
<div class="hp">
|
||
|
|
<span class="hp-label">体力:</span>
|
||
|
|
<div class="hp-bar" id="hp-bar-2">
|
||
|
|
<div class="hp-fill"></div>
|
||
|
|
</div>
|
||
|
|
<span class="hp-value" id="hp-value-2"></span>
|
||
|
|
</div>
|
||
|
|
<div class="cards-count">手牌: <span id="cards-2"></span></div>
|
||
|
|
<div class="equipment" id="equipment-2"></div>
|
||
|
|
<div class="skill" id="skill-2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player-hand" id="hand-2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="middle-row">
|
||
|
|
<div class="player-card" id="player-1" onclick="selectTarget(1)">
|
||
|
|
<div class="player-info">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="" alt="" id="avatar-1">
|
||
|
|
</div>
|
||
|
|
<div class="player-details">
|
||
|
|
<h3 id="name-1"></h3>
|
||
|
|
<div class="identity" id="identity-1"></div>
|
||
|
|
<div class="hp">
|
||
|
|
<span class="hp-label">体力:</span>
|
||
|
|
<div class="hp-bar" id="hp-bar-1">
|
||
|
|
<div class="hp-fill"></div>
|
||
|
|
</div>
|
||
|
|
<span class="hp-value" id="hp-value-1"></span>
|
||
|
|
</div>
|
||
|
|
<div class="cards-count">手牌: <span id="cards-1"></span></div>
|
||
|
|
<div class="equipment" id="equipment-1"></div>
|
||
|
|
<div class="skill" id="skill-1"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player-hand" id="hand-1"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="center-area">
|
||
|
|
<div class="deck-area">
|
||
|
|
<div class="deck">
|
||
|
|
<div class="card-back"></div>
|
||
|
|
<div class="deck-count" id="deck-count">0</div>
|
||
|
|
</div>
|
||
|
|
<div class="discard-pile" id="discard-pile"></div>
|
||
|
|
</div>
|
||
|
|
<div class="game-log" id="game-log"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="player-card" id="player-3" onclick="selectTarget(3)">
|
||
|
|
<div class="player-info">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="" alt="" id="avatar-3">
|
||
|
|
</div>
|
||
|
|
<div class="player-details">
|
||
|
|
<h3 id="name-3"></h3>
|
||
|
|
<div class="identity" id="identity-3"></div>
|
||
|
|
<div class="hp">
|
||
|
|
<span class="hp-label">体力:</span>
|
||
|
|
<div class="hp-bar" id="hp-bar-3">
|
||
|
|
<div class="hp-fill"></div>
|
||
|
|
</div>
|
||
|
|
<span class="hp-value" id="hp-value-3"></span>
|
||
|
|
</div>
|
||
|
|
<div class="cards-count">手牌: <span id="cards-3"></span></div>
|
||
|
|
<div class="equipment" id="equipment-3"></div>
|
||
|
|
<div class="skill" id="skill-3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player-hand" id="hand-3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom-row">
|
||
|
|
<div class="player-card" id="player-4" onclick="selectTarget(4)">
|
||
|
|
<div class="player-info">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="" alt="" id="avatar-4">
|
||
|
|
</div>
|
||
|
|
<div class="player-details">
|
||
|
|
<h3 id="name-4"></h3>
|
||
|
|
<div class="identity" id="identity-4"></div>
|
||
|
|
<div class="hp">
|
||
|
|
<span class="hp-label">体力:</span>
|
||
|
|
<div class="hp-bar" id="hp-bar-4">
|
||
|
|
<div class="hp-fill"></div>
|
||
|
|
</div>
|
||
|
|
<span class="hp-value" id="hp-value-4"></span>
|
||
|
|
</div>
|
||
|
|
<div class="cards-count">手牌: <span id="cards-4"></span></div>
|
||
|
|
<div class="equipment" id="equipment-4"></div>
|
||
|
|
<div class="skill" id="skill-4"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player-hand" id="hand-4"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="player-card main-player" id="player-0">
|
||
|
|
<div class="player-info">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="" alt="" id="avatar-0">
|
||
|
|
</div>
|
||
|
|
<div class="player-details">
|
||
|
|
<h3 id="name-0"></h3>
|
||
|
|
<div class="identity" id="identity-0"></div>
|
||
|
|
<div class="hp">
|
||
|
|
<span class="hp-label">体力:</span>
|
||
|
|
<div class="hp-bar" id="hp-bar-0">
|
||
|
|
<div class="hp-fill"></div>
|
||
|
|
</div>
|
||
|
|
<span class="hp-value" id="hp-value-0"></span>
|
||
|
|
</div>
|
||
|
|
<div class="cards-count">手牌: <span id="cards-0"></span></div>
|
||
|
|
<div class="equipment" id="equipment-0"></div>
|
||
|
|
<div class="skill" id="skill-0"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player-hand" id="hand-0"></div>
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button id="ready-btn" class="action-btn">准备</button>
|
||
|
|
<button id="draw-btn" class="action-btn" disabled>摸牌</button>
|
||
|
|
<button id="skill-btn" class="action-btn" disabled>技能</button>
|
||
|
|
<button id="play-btn" class="action-btn" disabled>出牌</button>
|
||
|
|
<button id="end-turn-btn" class="action-btn" disabled>结束回合</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="modal" id="card-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close">×</span>
|
||
|
|
<div class="card-detail" id="card-detail"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="game.js"></script>
|
||
|
|
<script>
|
||
|
|
initGame();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|