jiaogonglaing-games/debug.html at main · boathell/jiaogonglaing-games · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!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="css/style.css">
    <style>
        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 12px;
            max-width: 300px;
            z-index: 1000;
        }
        .debug-log {
            max-height: 200px;
            overflow-y: auto;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="debug-info">
        <h4>调试信息</h4>
        <div id="debug-status">加载中...</div>
        <div id="debug-log" class="debug-log"></div>
    </div>

    <!-- 复制主游戏界面 -->
    <div class="game-container">
        <div class="game-header">
            <h1>交公粮 - 调试模式</h1>
            <div class="game-controls">
                <button id="new-game-btn">新游戏</button>
                <button id="help-btn">帮助</button>
                <button id="debug-btn">调试信息</button>
            </div>
        </div>

        <div class="game-board">
            <!-- 电脑玩家区域 -->
            <div class="player-area computer-player" id="player-1">
                <div class="player-info">
                    <span class="player-name">电脑玩家 1</span>
                    <span class="card-count">0 张牌</span>
                </div>
                <div class="player-cards"></div>
            </div>

            <div class="player-area computer-player" id="player-2">
                <div class="player-info">
                    <span class="player-name">电脑玩家 2</span>
                    <span class="card-count">0 张牌</span>
                </div>
                <div class="player-cards"></div>
            </div>

            <!-- 出牌区域 -->
            <div class="play-area">
                <div class="last-play" id="last-play">
                    <!-- 最后出的牌会显示在这里 -->
                </div>
                <div class="game-status" id="game-status">
                    等待游戏开始...
                </div>
            </div>

            <!-- 玩家区域 -->
            <div class="player-area human-player" id="player-0">
                <div class="player-info">
                    <span class="player-name">玩家</span>
                    <span class="card-count">0 张牌</span>
                </div>
                <div class="player-cards" id="player-cards"></div>
                <div class="player-controls">
                    <button id="play-btn" disabled>出牌</button>
                    <button id="pass-btn" disabled>不出</button>
                </div>
            </div>
        </div>

        <!-- 游戏提示和消息 -->
        <div class="game-message" id="game-message"></div>
    </div>

    <!-- 游戏脚本 -->
    <script src="js/EventBus.js"></script>
    <script src="js/models/Card.js"></script>
    <script src="js/models/Player.js"></script>
    <script src="js/models/GameState.js"></script>
    <script src="js/CardManager.js"></script>
    <script src="js/AIManager.js"></script>
    <script>
        // 调试信息记录
        const debugLog = [];
        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            debugLog.push(`[${timestamp}] ${message}`);
            document.getElementById('debug-log').innerHTML = debugLog.join('<br>');
            console.log(message);
        }

        // 增强的UIManager用于调试
        class DebugUIManager extends UIManager {
            constructor() {
                super();
                log('UIManager构造函数执行');
            }

            renderPlayerCards(player) {
                log(`开始渲染玩家 ${player.id} (${player.name}) 的手牌，共 ${player.cards.length} 张`);

                const playerArea = this.playerAreas[player.id];
                log(`找到玩家区域: ${player.id}, 元素存在: ${!!playerArea}`);

                if (!playerArea) {
                    log(`错误: 找不到玩家 ${player.id} 的区域`);
                    return;
                }

                // 清空玩家区域
                playerArea.innerHTML = '';
                log('已清空玩家区域');

                // 排序手牌
                player.sortCards();
                log('手牌排序完成');

                // 渲染手牌
                for (let i = 0; i < player.cards.length; i++) {
                    const card = player.cards[i];
                    log(`创建第 ${i+1} 张牌: ${card.suit} ${card.rank}`);

                    try {
                        const cardElement = this.createCardElement(card);
                        log(`卡片元素创建成功: ${!!cardElement}`);

                        // 如果是人类玩家，添加点击事件
                        if (player.isHuman) {
                            cardElement.addEventListener('click', () => {
                                log(`玩家点击了卡片: ${card.suit} ${card.rank}`);
                                this.handleCardClick(card, cardElement);
                            });

                            // 如果卡牌被选中，添加选中样式
                            if (card.selected) {
                                cardElement.classList.add('selected');
                                log('卡片被标记为选中状态');
                            }
                        } else {
                            // 如果不是人类玩家，卡牌背面朝上
                            cardElement.classList.add('card-back');
                            log('电脑玩家卡片设置为背面');
                        }

                        playerArea.appendChild(cardElement);
                        log('卡片元素已添加到玩家区域');
                    } catch (error) {
                        log(`创建卡片时出错: ${error.message}`);
                    }
                }

                log(`玩家 ${player.name} 的手牌渲染完成`);
            }

            createCardElement(card) {
                try {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.dataset.suit = card.suit;
                    cardElement.dataset.rank = card.rank;

                    // 添加花色和点数
                    const suitElement = document.createElement('div');
                    suitElement.className = 'card-suit';
                    suitElement.textContent = this.getSuitSymbol(card.suit);

                    const rankElement = document.createElement('div');
                    rankElement.className = 'card-rank';
                    rankElement.textContent = this.getRankText(card.rank);

                    cardElement.appendChild(suitElement);
                    cardElement.appendChild(rankElement);

                    log(`创建卡片元素成功: ${card.suit} ${card.rank}`);
                    return cardElement;
                } catch (error) {
                    log(`创建卡片元素出错: ${error.message}`);
                    throw error;
                }
            }

            updateButtonStatus() {
                const currentPlayer = this.gameEngine.gameState.getCurrentPlayer();
                const gameState = this.gameEngine.gameState;

                log(`更新按钮状态 - 当前玩家: ${currentPlayer.name}, 是否人类: ${currentPlayer.isHuman}, 游戏阶段: ${gameState.phase}`);
                log(`出牌按钮存在: ${!!this.playButton}, 不出按钮存在: ${!!this.passButton}`);

                // 如果当前玩家是人类玩家且游戏阶段是PLAYING
                if (currentPlayer.isHuman && gameState.phase === 'PLAYING') {
                    this.playButton.disabled = false;
                    log('出牌按钮已启用');

                    // 如果有上一次有效出牌，则可以不出
                    this.passButton.disabled = !gameState.lastValidPlay;
                    log(`不出按钮状态: ${this.passButton.disabled ? '禁用' : '启用'}`);
                } else {
                    this.playButton.disabled = true;
                    this.passButton.disabled = true;
                    log('两个按钮都已禁用');
                }
            }
        }

        // 游戏初始化
        document.addEventListener('DOMContentLoaded', () => {
            log('DOM加载完成');

            try {
                // 创建事件总线
                const eventBus = new EventBus();
                log('事件总线创建成功');

                // 创建游戏引擎
                const gameEngine = new GameEngine();
                log('游戏引擎创建成功');

                // 创建UI管理器（调试版本）
                const uiManager = new DebugUIManager();
                log('UI管理器创建成功');

                // 创建AI管理器
                const aiManager = new AIManager();
                log('AI管理器创建成功');

                // 初始化各个模块
                aiManager.init(eventBus);
                log('AI管理器初始化完成');

                uiManager.init(gameEngine, eventBus);
                log('UI管理器初始化完成');

                gameEngine.init(uiManager, aiManager, eventBus);
                log('游戏引擎初始化完成');

                // 绑定新游戏按钮事件
                const newGameBtn = document.getElementById('new-game-btn');
                if (newGameBtn) {
                    newGameBtn.addEventListener('click', () => {
                        log('点击新游戏按钮');
                        gameEngine.startNewGame();
                    });
                } else {
                    log('错误：找不到新游戏按钮');
                }

                // 绑定调试按钮
                const debugBtn = document.getElementById('debug-btn');
                if (debugBtn) {
                    debugBtn.addEventListener('click', () => {
                        const debugDiv = document.querySelector('.debug-info');
                        debugDiv.style.display = debugDiv.style.display === 'none' ? 'block' : 'none';
                    });
                }

                // 自动开始第一局游戏
                log('准备开始新游戏...');
                setTimeout(() => {
                    gameEngine.startNewGame();
                    log('新游戏已开始');
                }, 100);

                document.getElementById('debug-status').textContent = '游戏初始化成功';

            } catch (error) {
                log(`初始化错误: ${error.message}`);
                document.getElementById('debug-status').textContent = `错误: ${error.message}`;
            }
        });
    </script>
</body>
</html>