Ubuntu
122 lines
4.3 KiB
HTML
122 lines
4.3 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>AI斗地主</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 用户分数栏 -->
|
|
<div class="score-bar" id="scoreBar">
|
|
<div class="score-info">
|
|
<span class="score-label">斗地主积分:</span>
|
|
<span class="score-value" id="scoreValue">--</span>
|
|
</div>
|
|
<div class="user-name" id="userName">--</div>
|
|
</div>
|
|
|
|
<div class="game-container">
|
|
<!-- 顶部：底牌区 -->
|
|
<div class="deck-area">
|
|
<div class="deck-label">底牌</div>
|
|
<div class="deck-cards">
|
|
<div class="card back"></div>
|
|
<div class="card back"></div>
|
|
<div class="card back"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 左侧玩家 -->
|
|
<div class="player left-player">
|
|
<div class="avatar">
|
|
<div class="avatar-img">AI1</div>
|
|
<div class="player-name">农民甲</div>
|
|
<div class="player-role" id="left-role">?</div>
|
|
</div>
|
|
<div class="card-count">17张</div>
|
|
<div class="cards-back">
|
|
<!-- 牌背堆叠 -->
|
|
<div class="card-stack">
|
|
<div class="card-small back"></div>
|
|
<div class="card-small back"></div>
|
|
<div class="card-small back"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧玩家 -->
|
|
<div class="player right-player">
|
|
<div class="card-count">17张</div>
|
|
<div class="cards-back">
|
|
<div class="card-stack">
|
|
<div class="card-small back"></div>
|
|
<div class="card-small back"></div>
|
|
<div class="card-small back"></div>
|
|
</div>
|
|
</div>
|
|
<div class="avatar">
|
|
<div class="avatar-img">AI2</div>
|
|
<div class="player-name">农民乙</div>
|
|
<div class="player-role" id="right-role">?</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中央：桌面出牌区 -->
|
|
<div class="table-area">
|
|
<div class="last-played">
|
|
<div class="played-by">等待出牌...</div>
|
|
<div class="played-cards">
|
|
<!-- 出的牌显示在这里 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部：玩家自己 -->
|
|
<div class="player-self">
|
|
<div class="self-info">
|
|
<div class="avatar">
|
|
<div class="avatar-img me">我</div>
|
|
<div class="player-name">玩家</div>
|
|
<div class="player-role" id="my-role">?</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 手牌区 -->
|
|
<div class="hand-cards" id="hand-cards">
|
|
<!-- 手牌由JS动态生成 -->
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary" id="btn-play" disabled>出牌</button>
|
|
<button class="btn btn-secondary" id="btn-pass" disabled>不出</button>
|
|
<button class="btn btn-hint" id="btn-hint" disabled>提示</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 游戏状态提示 -->
|
|
<div class="game-status" id="game-status">点击"开始游戏"</div>
|
|
|
|
<!-- 开始按钮（居中） -->
|
|
<div class="start-screen" id="start-screen">
|
|
<button class="btn-start" id="btn-start">开始游戏</button>
|
|
</div>
|
|
|
|
<!-- 叫地主弹窗 -->
|
|
<div class="call-lord-modal" id="call-lord-modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<h3>是否叫地主？</h3>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-primary" id="btn-call-yes">叫地主</button>
|
|
<button class="btn btn-secondary" id="btn-call-no">不叫</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="game.js?v=2"></script>
|
|
<script src="ui.js?v=2"></script>
|
|
</body>
|
|
</html>
|