richGame.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="css/richGame.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>负翁大冒险 - 增强版</h1>
            <div class="subtitle">管理资产，应对挑战，成为真正的富翁！</div>
        </header>
        
        <div class="game-area">
            <!-- 左侧：玩家信息 -->
            <div class="player-info">
                <div class="assets">
                    <h2>资产状况</h2>
                    <div class="asset-item">
                        <span>现金:</span>
                        <span id="cash">1000</span>
                    </div>
                    <div class="asset-item">
                        <span>存款:</span>
                        <span id="deposit">0</span>
                    </div>
                    <div class="asset-item">
                        <span>总资产:</span>
                        <span id="total-assets">1000</span>
                    </div>
                    <div class="asset-item">
                        <span>心情值:</span>
                        <span id="mood">50</span>
                    </div>
                    <div class="mood-bar">
                        <div class="mood-progress" id="mood-progress" style="width: 50%;"></div>
                    </div>
                </div>
                
                <div class="wealth-level">
                    <h2>财富等级</h2>
                    <div id="wealth-level">1</div>
                    <div class="level-bar">
                        <div class="level-progress" id="level-progress" style="width: 10%;"></div>
                    </div>
                    <div id="level-benefits">捐献提高赦免几率</div>
                </div>
                
                <div class="deposit-info">
                    <h3>我的存款</h3>
                    <div class="deposit-list" id="deposit-list">
                        <!-- 存款列表将通过JS动态生成 -->
                    </div>
                </div>
                
                <div class="properties">
                    <h2>我的房地产</h2>
                    <div id="properties-list">
                        <!-- 房地产列表将通过JS动态生成 -->
                    </div>
                </div>
                
                <div class="actions">
                    <button class="bank-btn" id="deposit-btn">存款</button>
                    <button class="bank-btn" id="withdraw-btn">取款</button>
                    <button class="card-btn" id="buy-card-btn">购买机遇卡 (200元)</button>
                    <button class="rob-btn" id="rob-bank-btn">抢银行</button>
                    <button class="travel-btn" id="travel-btn">旅游</button>
                    <button class="card-btn" id="donate-btn">捐献</button>
                </div>
                
                <button class="end-turn" id="end-turn">结束回合</button>
            </div>
            
            <!-- 中间：房地产市场 -->
            <div class="market">
                <h2>房地产市场</h2>
                <div id="property-market">
                    <!-- 房地产市场将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 右侧：事件和系统 -->
            <div class="events">
                <h2>事件日志</h2>
                <div class="event-log" id="event-log">
                    <!-- 事件日志将通过JS动态生成 -->
                </div>
                
                <div class="news">
                    <h3>今日新闻</h3>
                    <div id="news-content">科技园区政策利好，房产预计上涨！</div>
                </div>
                
                <div class="card-system">
                    <h3>机遇卡系统</h3>
                    <div id="cards-owned">当前拥有卡片: 0张</div>
                    <button class="card-btn" id="use-card-btn">使用机遇卡</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 银行任务模态框 -->
    <div class="modal" id="bank-job-modal">
        <div class="modal-content">
            <h2>银行职员任务</h2>
            <p>完成计算任务可获得薪水！</p>
            <div class="problem" id="math-problem">10 + 15 = ?</div>
            <input type="number" class="answer-input" id="answer-input" placeholder="输入答案">
            <button class="submit-btn" id="submit-answer">提交答案</button>
        </div>
    </div>
    
    <!-- 卡片结果模态框 -->
    <div class="modal" id="card-modal">
        <div class="modal-content card-modal">
            <h2>机遇卡</h2>
            <div class="card-result" id="card-result">你抽到了现金红包！</div>
            <button class="submit-btn" id="close-card">确定</button>
        </div>
    </div>
    
    <!-- 抢银行小游戏模态框 -->
    <div class="modal" id="rob-bank-modal">
        <div class="modal-content">
            <h2>🏦 抢银行大冒险</h2>
            <p>避开警察👮和监控📹，到达出口🚪！小心规划你的路线！</p>
            <div class="mini-game">
                <div class="game-info">
                    <div class="moves-left">剩余移动次数: <span id="moves-count">8</span></div>
                    <div class="game-tips">提示：绿色是你的位置，红色是警察，紫色是监控</div>
                </div>
                <div class="game-grid" id="game-grid">
                    <!-- 游戏网格将通过JS动态生成 -->
                </div>
            </div>
            <button class="submit-btn" id="close-rob-game">放弃行动</button>
        </div>
    </div>
    
    <!-- 答题卡模态框 -->
    <div class="modal" id="quiz-card-modal">
        <div class="modal-content">
            <h2>知识问答</h2>
            <p>回答正确可获得奖金！</p>
            <div class="problem" id="quiz-question">问题加载中...</div>
            <input type="text" class="answer-input" id="quiz-answer" placeholder="输入答案">
            <button class="submit-btn" id="submit-quiz">提交答案</button>
        </div>
    </div>
    
    <!-- 旅游模态框 -->
    <div class="modal" id="travel-modal">
        <div class="modal-content">
            <h2>选择旅游目的地</h2>
            <div class="travel-options" id="travel-options">
                <!-- 旅游选项将通过JS动态生成 -->
            </div>
            <button class="submit-btn" id="close-travel">取消</button>
        </div>
    </div>

    <!-- 存档系统 -->
    <div id="save-modal" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 800px;">
            <h2>🏦 游戏存档</h2>
            <p>管理你的游戏进度</p>
        
            <div class="tab-container">
                <div class="tab-buttons">
                    <button class="tab-btn active" data-tab="save-tab">保存游戏</button>
                    <button class="tab-btn" data-tab="load-tab">加载游戏</button>
                    <button class="tab-btn" data-tab="manage-tab">管理存档</button>
                    <button class="tab-btn" data-tab="cloud-tab">云存档</button>
                </div>
            
                <!-- 保存游戏标签页 -->
                <div id="save-tab" class="tab-content active">
                    <div class="save-slots">
                        <div class="save-slot" onclick="saveGameToSlot('save1')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 1</span>
                                <span class="slot-status" id="slot1-status">空</span>
                            </div>
                            <div class="slot-info" id="slot1-info">暂无存档</div>
                            <button class="save-btn">保存到此位</button>
                        </div>
                    
                        <div class="save-slot" onclick="saveGameToSlot('save2')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 2</span>
                                <span class="slot-status" id="slot2-status">空</span>
                            </div>
                            <div class="slot-info" id="slot2-info">暂无存档</div>
                                <button class="save-btn">保存到此位</button>
                            </div>
                    
                        <div class="save-slot" onclick="saveGameToSlot('save3')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 3</span>
                                <span class="slot-status" id="slot3-status">空</span>
                            </div>
                            <div class="slot-info" id="slot3-info">暂无存档</div>
                                <button class="save-btn">保存到此位</button>
                            </div>
                    </div>
                
                    <div class="save-options">
                        <div class="option-group">
                            <label>
                                <input type="checkbox" id="auto-save" checked> 启用自动保存
                            </label>
                            <label>
                                <input type="checkbox" id="backup-saves" checked> 创建备份存档
                            </label>
                        </div>
                    
                        <div class="quick-save-section">
                            <button class="submit-btn" onclick="quickSaveGame()">快速保存</button>
                            <button class="export-btn" onclick="exportCurrentSave()">导出当前存档</button>
                        </div>
                    </div>
                </div>
            
                <!-- 加载游戏标签页 -->
                <div id="load-tab" class="tab-content">
                    <div class="save-slots">
                        <div class="save-slot load-slot" onclick="loadGameFromSlot('save1')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 1</span>
                                <span class="slot-status" id="load-slot1-status">空</span>
                            </div>
                            <div class="slot-info" id="load-slot1-info">暂无存档</div>
                            <button class="load-btn">加载此存档</button>
                        </div>
                    
                        <div class="save-slot load-slot" onclick="loadGameFromSlot('save2')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 2</span>
                                <span class="slot-status" id="load-slot2-status">空</span>
                            </div>
                            <div class="slot-info" id="load-slot2-info">暂无存档</div>
                            <button class="load-btn">加载此存档</button>
                        </div>
                    
                        <div class="save-slot load-slot" onclick="loadGameFromSlot('save3')">
                            <div class="slot-header">
                                <span class="slot-name">存档位 3</span>
                                <span class="slot-status" id="load-slot3-status">空</span>
                            </div>
                            <div class="slot-info" id="load-slot3-info">暂无存档</div>
                            <button class="load-btn">加载此存档</button>
                        </div>
                    </div>
                </div>
            
                <!-- 管理存档标签页 -->
                <div id="manage-tab" class="tab-content">
                    <div class="manage-actions">
                        <button class="danger-btn" onclick="deleteAllSaves()">删除所有存档</button>
                        <button class="warning-btn" onclick="repairSaves()">修复存档数据</button>
                        <button class="info-btn" onclick="clearGameData()">清除游戏数据</button>
                    </div>
                
                    <div class="save-stats">
                        <h3>存档统计</h3>
                            <div id="save-stats-info">加载中...</div>
                        </div>
                    </div>
            
                    <!-- 云存档标签页 -->
                    <div id="cloud-tab" class="tab-content">
                        <div class="cloud-section">
                            <h3>导入存档</h3>
                            <input type="file" id="import-file" accept=".json" style="margin: 10px 0;">
                            <button onclick="importSaveFile()" class="submit-btn">导入存档</button>
                    
                            <h3 style="margin-top: 20px;">导出存档</h3>
                            <button onclick="exportCurrentSave()" class="export-btn">导出当前存档</button>
                            <button onclick="exportAllSaves()" class="export-btn">导出所有存档</button>
                        </div>
                    </div>
                </div>
        
                <button class="submit-btn" onclick="closeSaveModal()" style="margin-top: 20px;">关闭</button>
            </div>
        </div>

    <script src="js/richGame.js"></script>
</body>
</html>