JavaScript实现大富翁游戏：从状态机到UI渲染的完整实战指南

1. 项目概述：为什么用JavaScript重制经典桌游？

如果你对前端开发感兴趣，或者想找一个能综合运用JavaScript核心知识的实战项目，那么用JavaScript实现一个《Monopoly》（大富翁）游戏绝对是个绝佳的选择。这不仅仅是一个“玩具”项目，它几乎涵盖了现代Web应用开发中所有核心的、让人头疼又兴奋的挑战：复杂的状态管理、用户交互逻辑、动画效果、以及如何将一套严谨的桌游规则，用代码清晰、健壮地表达出来。

我最初决定动手做这个项目，是因为发现很多教程里的“待办事项”或“计算器”应用太单薄了，它们能教你语法，但很难让你体会到构建一个完整应用时，各个模块是如何咬合在一起的。而《Monopoly》则不同，它有明确的游戏规则（买地、建房、收租、随机事件）、多玩家轮流机制、以及一个可视化的棋盘界面，这天然就是一个中等复杂度的单页应用（SPA）原型。

从技术角度看，这个项目能让你深入理解几个关键点：如何使用面向对象或函数式编程来组织游戏实体（玩家、地产、卡片）；如何设计一个高效、无歧义的游戏状态机来处理回合流程；如何用Canvas或SVG甚至纯CSS来绘制动态棋盘和棋子移动；以及如何实现那些看似简单实则微妙的细节，比如“连环收租”时破产的连锁反应。这比单纯调用API或写个动画要有趣和扎实得多。

接下来，我会带你从零开始，拆解这个项目的完整实现过程。我们不会只停留在“能跑通”的层面，而是会深入每个技术决策的背后，聊聊为什么这么设计，以及我踩过哪些坑。无论你是想学习前端工程化，还是单纯想重温这款经典游戏的乐趣，相信这篇长文都能给你带来实实在在的收获。

2. 核心架构设计：如何用代码模拟一个游戏世界？

在动手写第一行代码之前，最重要的就是设计架构。一个混乱的架构会让后期的功能添加和BUG修复变成噩梦。对于《Monopoly》这类游戏，核心是状态和规则。我们的代码需要清晰地模拟游戏中的所有实体和它们之间的交互规则。

2.1 数据模型设计：游戏世界的基石

首先，我们需要定义游戏中的核心“名词”。我采用了面向对象的设计，因为这与现实世界的“玩家”、“地产”等概念非常契合。

玩家类 (Player)这是最核心的类之一。一个玩家对象需要包含哪些状态？

class Player { constructor(id, name, token) { this.id = id; // 唯一标识 this.name = name; // 玩家名 this.token = token; // 棋子图标或颜色 this.cash = 1500; // 初始现金，经典规则 this.position = 0; // 在棋盘上的位置索引（0代表起点） this.properties = []; // 拥有的地产ID数组 this.getOutOfJailCards = 0; // “免罪卡”数量 this.isInJail = false; // 是否在监狱中 this.jailTurns = 0; // 已在监狱停留的回合数 this.isBankrupt = false; // 是否破产 } // 方法：移动玩家 move(steps) { this.position = (this.position + steps) % 40; // 假设棋盘共40格 // 触发“经过起点”逻辑 if (this.position + steps >= 40) { this.passGo(); } return this.position; } // 方法：经过起点，领取薪水 passGo() { this.cash += 200; // 这里可以触发UI更新事件 GameEventEmitter.emit('player:passedGo', this); } // ... 其他方法，如 buyProperty, payRent, declareBankruptcy 等 }

注意：cash（现金）是游戏中最关键的状态之一。所有交易、罚款都围绕它进行。务必确保对现金的修改（加、减）是原子操作，并且在每次修改后立即更新UI，避免状态不同步。

地产类 (Property)地产是游戏的另一个核心。它不仅仅是棋盘上的一个格子，更是一个有状态、有行为的对象。

class Property { constructor(id, name, price, rent, colorGroup, houseCost, hotelCost) { this.id = id; this.name = name; // 如“海滨大道” this.price = price; // 购买价格 this.baseRent = rent; // 基础租金 this.colorGroup = colorGroup; // 颜色分组，用于计算成套加成 this.ownerId = null; // 所有者ID，null表示银行 this.mortgaged = false; // 是否已抵押 this.houses = 0; // 房屋数量（0-4） this.hotel = false; // 是否有酒店（当houses=4时，可升级） this.houseCost = houseCost; // 建一座房子的成本 this.hotelCost = hotelCost; // 将4屋升级为酒店的成本 } // 计算当前租金 getCurrentRent() { if (this.mortgaged || this.ownerId === null) { return 0; // 抵押或无人拥有则不收租 } if (this.hotel) { return this.baseRent * 10; // 简化计算，实际规则更复杂 } const rentMultiplier = [1, 5, 15, 45, 80][this.houses]; // 根据房屋数递增 return this.baseRent * rentMultiplier; } // 判断是否可以建造房屋（需拥有同色组所有地产且未抵押） canBuildHouse(gameState) { if (this.mortgaged) return false; const groupProperties = gameState.getPropertiesByColor(this.colorGroup); const allOwnedByPlayer = groupProperties.every(p => p.ownerId === this.ownerId); const evenDevelopment = groupProperties.every(p => Math.abs(p.houses - this.houses) <= 1); return allOwnedByPlayer && evenDevelopment && this.houses < 4 && !this.hotel; } }

实操心得：地产的租金计算是游戏逻辑的难点之一。经典规则中，租金随房屋数量呈非线性增长，且拥有同色组全部地产后租金会翻倍。我建议将租金计算逻辑单独封装成一个函数或方法，并预先将不同房屋数量的租金倍数定义成常量数组，这样代码更清晰，也便于调试和修改规则。

游戏状态管理类 (GameState)这是游戏的大脑，一个单例（Singleton）或全局状态管理器。它持有当前游戏的所有全局信息。

class GameState { constructor() { this.players = []; // 玩家数组 this.currentPlayerIndex = 0; // 当前回合玩家索引 this.dice = { die1: 0, die2: 0 }; // 骰子点数 this.board = []; // 棋盘格子数组，每个元素是一个Property或特殊格子的对象 this.communityChestCards = []; // 机会卡牌堆 this.chanceCards = []; // 公益金卡牌堆 this.phase = 'ROLL_DICE'; // 游戏阶段：ROLL_DICE, BUY_OR_AUCTION, PAY_RENT, etc. this.initBoard(); this.initCards(); } // 初始化棋盘 initBoard() { // 按顺序创建40个格子对象 this.board = [ new Property(1, '地中海大道', 60, 2, 'brown', 50, 50), new SpecialSpace(2, '公益金', 'COMMUNITY_CHEST'), // ... 省略其他格子 new Property(40, '公园广场', 350, 35, 'darkBlue', 200, 200) ]; } // 切换到下一个玩家 nextPlayer() { do { this.currentPlayerIndex = (this.currentPlayerIndex + 1) % this.players.length; } while (this.players[this.currentPlayerIndex].isBankrupt); // 跳过已破产玩家 this.phase = 'ROLL_DICE'; // 触发UI更新 GameEventEmitter.emit('turn:changed', this.getCurrentPlayer()); } getCurrentPlayer() { return this.players[this.currentPlayerIndex]; } }

关键设计决策：为什么使用一个中心化的GameState？因为游戏中的许多操作（如买地、付租金）都需要读取和修改多个实体的状态。如果状态分散在各个UI组件或对象里，很容易出现不一致。一个集中的状态源，配合事件驱动（如GameEventEmitter）来通知UI更新，是管理复杂应用状态的经典模式（类似于Redux或Vuex的思想）。

2.2 游戏流程与状态机：让游戏“动”起来

《Monopoly》是一个严格的回合制游戏。每个玩家的回合都必须遵循固定的流程。用代码实现这个流程，最好的工具就是状态机（State Machine）。

我们可以将玩家的一个回合定义为一系列状态的迁移：

1. ROLL_DICE：等待玩家投掷骰子。
2. MOVE：根据骰子点数移动棋子，并触发落地格子的效果（如购买土地、支付租金、抽卡等）。
3. BUY_OR_AUCTION：如果落在无主土地上，玩家可以选择购买或触发拍卖。
4. PAY_RENT：如果落在他人土地上，自动支付租金（可能触发破产判断）。
5. BUILD_HOUSES：玩家可以选择在自己的同色地产上建造房屋（可选阶段）。
6. END_TURN：结束当前回合，切换到下一个玩家。

在GameState中，我们用一个phase属性来跟踪当前状态，并提供一系列方法来进行状态转换。

// 在GameState类中添加方法 processTurn() { const player = this.getCurrentPlayer(); switch (this.phase) { case 'ROLL_DICE': // 由UI按钮触发rollDice()方法 break; case 'MOVE': const newPos = player.move(this.dice.die1 + this.dice.die2); const landedOn = this.board[newPos]; this.handleLandOn(landedOn); break; case 'BUY_OR_AUCTION': // 弹出UI对话框让玩家选择“购买”或“拍卖” break; // ... 其他case } } // 处理落在某个格子上的事件 handleLandOn(space) { if (space.type === 'PROPERTY') { if (space.ownerId === null) { this.phase = 'BUY_OR_AUCTION'; } else if (space.ownerId !== this.getCurrentPlayer().id) { this.phase = 'PAY_RENT'; this.payRent(this.getCurrentPlayer(), space); } } else if (space.type === 'CHANCE') { this.drawChanceCard(); } else if (space.type === 'TAX') { this.payTax(this.getCurrentPlayer(), space.amount); } // ... 处理其他类型格子（如入狱、免费停车场等） }

注意事项：状态机的设计要保证“封闭性”，即从任何一个状态出发，都有明确、有限的下一步状态。避免出现状态混乱，比如在PAY_RENT阶段还能回头去BUY_PROPERTY。清晰的阶段划分是逻辑正确的保障。

3. 核心模块实现详解

有了清晰的架构设计，我们就可以分模块实现具体功能了。这一部分，我们会深入到代码层面，看看如何让骰子滚动、棋子移动、交易发生。

3.1 棋盘与UI渲染：用Canvas还是DOM？

这是第一个需要做出的技术选择。两种方案各有优劣：

• 纯DOM + CSS：每个棋盘格子是一个<div>，棋子是绝对定位的元素。优点是简单，易于添加CSS动画和响应式布局。缺点是当棋子移动、需要高亮地产时，操作大量DOM元素可能性能稍差，且绘制复杂棋盘线略麻烦。
• Canvas：整个棋盘画在一张画布上。优点是性能高，适合复杂的绘图和动画（如平滑的棋子移动轨迹）。缺点是交互处理（如点击某个格子）需要自己计算坐标，文本渲染和CSS样式支持较弱。
• SVG：折中方案。每个格子是<path>或<rect>，棋子是<circle>。既有DOM的易交互性，又有矢量图形的清晰度。

对于《Monopoly》这种交互要求高、但图形不算极度复杂的游戏，我推荐使用SVG。它结合了易用性和灵活性。

实现步骤：

1. 创建SVG棋盘：可以用JavaScript动态生成，也可以直接在一个<svg>标签中写好静态的棋盘路径。格子可以用<g>（组）标签来组织，每个组包含一个代表格子的<rect>和显示地名、价格的<text>。

   <svg id="gameBoard" width="800" height="800" viewBox="0 0 800 800"> <!-- 棋盘外框 --> <rect x="0" y="0" width="800" height="800" fill="#f0e6d2"/> <!-- 一个示例地产格子（左下角） --> <g id="property-1" class="property">class PlayerToken { constructor(playerId, color) { this.element = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); this.element.setAttribute('r', '15'); this.element.setAttribute('fill', color); this.element.classList.add('player-token'); document.getElementById('gameBoard').appendChild(this.element); this.updatePosition(0); // 初始在起点 } updatePosition(boardIndex) { // 根据格子索引计算棋盘上的像素坐标 const {x, y} = this.calculateCoordinates(boardIndex); this.element.setAttribute('cx', x); this.element.setAttribute('cy', y); } calculateCoordinates(index) { // 这是最复杂的部分之一：将0-39的索引映射到棋盘四边的坐标上。 // 需要根据棋盘布局（通常是环形）进行分段计算。 // 例如：索引0-9是底边（从左到右），10-19是右边（从下到上）... // 这里省略具体计算逻辑，通常需要一些几何数学。 } }

2. 实现交互：为每个格子<g>添加点击事件监听器，用于处理“购买地产”、“查看详情”等操作。

   document.querySelectorAll('.property').forEach(propEl => { propEl.addEventListener('click', (e) => { const propertyId = parseInt(propEl.dataset.id); const gameState = GameState.getInstance(); const property = gameState.board.find(p => p.id === propertyId); if (gameState.phase === 'BUY_OR_AUCTION' && property.ownerId === null) { // 触发购买流程 gameState.buyProperty(gameState.getCurrentPlayer(), property); } }); });

踩坑记录：SVG的坐标系和DOM不同，它的原点(0,0)在左上角，y轴向下为正。在计算棋子位置时务必注意。另外，将棋子<circle>放在格子<g>的后面（代码顺序靠后），或者使用z-index（通过style属性），可以确保棋子显示在格子之上。

3.2 骰子动画与随机数生成

投骰子是游戏的重要仪式感来源。我们不能简单地用一个Math.random()就完事，需要有一个视觉上的滚动动画。

实现思路：

1. 创建骰子UI：用两个<div>模拟骰子，每个骰子有6个面，可以用CSS 3D旋转或者6个不同的点数图片来切换。
2. 动画函数：在投掷时，快速循环切换骰子显示的点数（或旋转角度），持续一小段时间（如0.5秒）。
3. 生成最终点数：动画结束后，用随机数决定最终点数并定格显示。

class Dice { constructor(die1Element, die2Element) { this.die1El = die1Element; this.die2El = die2Element; this.isRolling = false; } roll() { if (this.isRolling) return; this.isRolling = true; const rollDuration = 500; // 动画持续500毫秒 const startTime = Date.now(); const animate = () => { const elapsed = Date.now() - startTime; // 在动画期间快速显示随机点数 this.showRandomFace(this.die1El); this.showRandomFace(this.die2El); if (elapsed < rollDuration) { requestAnimationFrame(animate); } else { // 动画结束，生成最终结果 this.isRolling = false; const finalDie1 = Math.floor(Math.random() * 6) + 1; const finalDie2 = Math.floor(Math.random() * 6) + 1; this.showFace(this.die1El, finalDie1); this.showFace(this.die2El, finalDie2); // 触发游戏逻辑 GameEventEmitter.emit('dice:rolled', { die1: finalDie1, die2: finalDie2 }); } }; requestAnimationFrame(animate); } showRandomFace(dieEl) { const randomFace = Math.floor(Math.random() * 6) + 1; this.showFace(dieEl, randomFace); } showFace(dieEl, face) { // 根据face值，更新dieEl的类名或背景图，显示对应的点数 dieEl.className = `die face-${face}`; } }

注意事项：Math.random()生成的是伪随机数，但对于游戏来说完全足够。如果你需要更加密安全的随机数，可以使用window.crypto.getRandomValues()，但没必要。重点是，必须在动画结束后才将最终点数提交给游戏逻辑，避免动画还没结束游戏状态就改变了。

3.3 游戏逻辑核心：交易、租金与破产

这是游戏规则的代码体现，必须严谨。

购买地产

// 在GameState类中 buyProperty(player, property) { if (this.phase !== 'BUY_OR_AUCTION') { console.error('Not in buying phase'); return false; } if (property.ownerId !== null) { console.error('Property already owned'); return false; } if (player.cash < property.price) { console.error('Insufficient funds'); // 这里可以触发“资金不足”的UI提示，或者自动进入拍卖流程 return false; } // 执行交易 player.cash -= property.price; property.ownerId = player.id; player.properties.push(property.id); // 更新UI GameEventEmitter.emit('property:bought', { player, property }); this.phase = 'END_TURN'; // 购买后通常回合结束 return true; }

支付租金这是最容易出BUG的地方，因为涉及“连环收租”和“破产”的复杂情况。

payRent(tenant, property) { const landlord = this.players.find(p => p.id === property.ownerId); if (!landlord || landlord.isBankrupt) return; const rent = property.getCurrentRent(); if (tenant.cash >= rent) { // 简单情况：租客有钱 tenant.cash -= rent; landlord.cash += rent; GameEventEmitter.emit('rent:paid', { from: tenant, to: landlord, amount: rent, property }); } else { // 复杂情况：租客现金不足，需要变卖资产或抵押地产 this.handleInsufficientFunds(tenant, landlord, rent, property); } } handleInsufficientFunds(debtor, creditor, amount, reason) { // 1. 首先尝试用现金支付 let remainingDebt = amount - debtor.cash; creditor.cash += debtor.cash; debtor.cash = 0; // 2. 如果现金不够，尝试抵押地产 const mortgagableProperties = debtor.properties .map(id => this.board.find(p => p.id === id)) .filter(p => !p.mortgaged); mortgagableProperties.sort((a, b) => b.price / 2 - a.price / 2); // 按抵押价值排序 for (const prop of mortgagableProperties) { if (remainingDebt <= 0) break; prop.mortgaged = true; const mortgageValue = prop.price / 2; // 抵押获得一半价格 // 注意：抵押获得的钱是给玩家，不是直接给债权人 debtor.cash += mortgageValue; // 然后用新增的现金还债 const payment = Math.min(debtor.cash, remainingDebt); debtor.cash -= payment; creditor.cash += payment; remainingDebt -= payment; GameEventEmitter.emit('property:mortgaged', { player: debtor, property: prop }); } // 3. 如果仍还不清，则宣布破产 if (remainingDebt > 0) { this.declareBankruptcy(debtor, creditor); } }

核心难点：破产处理。规则是，破产玩家将所有资产（现金、抵押/未抵押的地产）转移给债权人。如果债务是对银行（如交税），则银行收回所有地产并重新拍卖。这部分逻辑非常复杂，需要仔细处理资产转移、抵押状态清除、以及从玩家列表中移除破产者等操作。务必编写详细的单元测试来覆盖各种破产场景。

3.4 卡片系统与随机事件

“机会”和“公益金”卡片是游戏变数的来源。实现的关键是卡牌堆的洗牌和循环。

1. 定义卡牌：每张卡牌是一个对象，包含描述文本和触发效果的回调函数。

   const chanceCards = [ { text: “前进到「起点」。”, effect: (player, gameState) => { player.position = 0; player.passGo(); // 经过起点可以领钱 gameState.handleLandOn(gameState.board[0]); } }, { text: “银行付给你股息$50。”, effect: (player) => { player.cash += 50; } }, { text: “直接入狱。不可经过起点，不可领取$200。”, effect: (player) => { player.position = 10; // 假设监狱在索引10 player.isInJail = true; } } // ... 更多卡牌 ];

2. 洗牌与抽牌：游戏开始时，对卡牌数组进行随机排序。抽牌时，从数组顶部取出一张，执行效果后，将其放入牌堆底部。

   class CardDeck { constructor(cards) { this.cards = [...cards]; this.discardPile = []; this.shuffle(); } shuffle() { for (let i = this.cards.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; } } draw() { if (this.cards.length === 0) { // 如果牌抽完了，将弃牌堆洗牌后作为新的牌堆 this.cards = [...this.discardPile]; this.discardPile = []; this.shuffle(); } const drawnCard = this.cards.shift(); this.discardPile.push(drawnCard); return drawnCard; } }

实操心得：卡牌效果可能会修改玩家位置、现金、监狱状态等。务必在effect函数中处理好所有状态变更，并触发相应的事件来更新UI。有些卡牌效果非常复杂（如“修理房屋”需要计算所有房屋和酒店的成本），最好将这些效果函数单独放在一个模块里，保持卡牌定义数组的简洁。

4. 高级功能与性能优化

当基础功能完成后，我们可以考虑添加一些提升体验和代码质量的高级功能。

4.1 游戏存档与恢复

为了让玩家可以随时继续，需要实现存档功能。核心是将整个GameState对象序列化（转换成字符串）保存起来。

// 存档 function saveGame() { const gameState = GameState.getInstance(); const saveData = { players: gameState.players, board: gameState.board, currentPlayerIndex: gameState.currentPlayerIndex, phase: gameState.phase, // 注意：直接保存对象可能有问题，需要处理可能存在的循环引用或函数 // 一个更安全的方法是每个类实现一个 toJSON() 方法 }; // 使用 JSON.stringify，但需确保所有关键数据都是可序列化的 const saveString = JSON.stringify(saveData); localStorage.setItem('monopoly_save', saveString); } // 读档 function loadGame() { const saveString = localStorage.getItem('monopoly_save'); if (!saveString) return false; const saveData = JSON.parse(saveString); // 这里需要根据saveData，重新初始化GameState和所有类实例 // 这是一个复杂的过程，因为JSON.parse出来的只是普通对象，不是Player/Property类的实例 // 可能需要一个专门的恢复函数来重建对象关系 restoreGameState(saveData); return true; }

踩坑记录：直接JSON.stringify(gameState)很可能失败，因为对象中可能包含方法、DOM元素引用或循环引用。正确的做法是设计一个纯数据的“快照”对象，只保存必要的状态（如玩家现金、位置、地产拥有者等），在存档和读档时，手动进行转换。

4.2 简单AI对手的实现

要实现一个“电脑玩家”，核心是让它在每个游戏阶段（phase）做出自动决策。

class BasicAI { makeDecision(player, gameState) { switch (gameState.phase) { case 'BUY_OR_AUCTION': const property = gameState.board[player.position]; // 简单策略：如果现金大于地产价格的两倍，就购买 if (player.cash > property.price * 2) { gameState.buyProperty(player, property); } else { gameState.startAuction(property); // 否则触发拍卖 } break; case 'BUILD_HOUSES': // 策略：找到自己能建房子的最贵地产组，建一座房子 const buildableProps = player.properties .map(id => gameState.board.find(p => p.id === id)) .filter(p => p.canBuildHouse(gameState)); if (buildableProps.length > 0 && player.cash > 100) { // 选择同色组中房子最少的地产来建（平均发展） const propToBuild = buildableProps.sort((a,b) => a.houses - b.houses)[0]; gameState.buildHouse(player, propToBuild); } break; // ... 处理其他阶段 } } }

AI的策略可以非常复杂，从简单的规则判断到基于蒙特卡洛树搜索的算法。对于初学者，实现一个基于简单规则的AI就足够了，它能大大提升单人游戏的趣味性。

4.3 代码组织与模块化

随着项目变大，将所有代码塞在一个文件里是灾难。推荐使用ES6模块来组织代码：

/src ├── index.js // 主入口，初始化游戏 ├── core/ │ ├── GameState.js │ ├── Player.js │ ├── Property.js │ └── CardDeck.js ├── logic/ │ ├── dice.js │ ├── trade.js │ └── bankruptcy.js ├── ui/ │ ├── boardRenderer.js // SVG棋盘渲染 │ ├── diceView.js │ └── infoPanel.js // 玩家信息面板 └── utils/ ├── eventEmitter.js // 简单的事件发布订阅器 └── helpers.js

使用import/export来管理依赖。例如，在GameState.js中：

import Player from './Player.js'; import { calculateRent } from '../logic/trade.js'; export default class GameState { ... }

这样结构清晰，便于维护和测试。

5. 调试、测试与常见问题

开发过程中，你一定会遇到各种BUG。以下是一些常见问题及排查技巧。

5.1 常见BUG与排查清单

5.2 必不可少的调试技巧

1. 善用浏览器开发者工具：

   • Console：这是你最好的朋友。多使用console.log、console.table（用于打印数组对象）来输出关键状态。
   • Sources & Debugger：在关键函数（如payRent）的第一行打上断点，可以逐行执行，查看所有变量的实时值。
   • Event Listeners：在Elements面板检查DOM元素，可以看到其上绑定了哪些事件，有助于排查交互失效问题。

2. 为核心逻辑编写单元测试： 使用Jest或Mocha等测试框架。即使只是简单的测试，也能在重构时给你巨大信心。

   // 使用 Jest 示例 import Property from './Property'; test('rent calculation with 3 houses', () => { const prop = new Property(1, 'Test', 100, 10, 'red', 50); prop.houses = 3; expect(prop.getCurrentRent()).toBe(10 * 45); // 假设租金倍数为45 });

3. 状态快照： 在游戏关键节点（回合开始、投骰后、交易前后），将整个GameState用JSON.stringify简化后打印出来。对比前后快照，能快速定位是哪个操作导致了意外变化。

5.3 性能优化小贴士

对于这个规模的游戏，性能通常不是瓶颈，但好习惯要养成：

• 避免频繁的DOM操作：不要在每个动画帧中都更新所有棋子和地产的样式。只在状态确实改变时更新对应的UI元素。
• 事件委托：不要为棋盘上40个格子分别绑定点击事件。在棋盘容器上绑定一个事件，利用event.target来判断点击的是哪个格子。

  document.getElementById('gameBoard').addEventListener('click', (e) => { const propElement = e.target.closest('.property'); // 找到被点击的格子元素 if (propElement) { const propertyId = parseInt(propElement.dataset.id); // ... 处理逻辑 } });

• 防抖与节流：如果有一些频繁触发的事件（比如窗口resize时重绘棋盘），使用防抖函数确保只在停止操作后才执行。

从头实现一个《Monopoly》游戏是一个庞大的工程，但每完成一个模块——看到骰子滚动、棋子移动、成功收取租金——都会带来巨大的成就感。这个项目几乎是一个前端技能的“试金石”，它能强迫你去思考状态管理、UI同步、事件处理和算法逻辑。我建议你分步实现：先做一个能移动棋子的静态棋盘，然后加入购买功能，再实现租金和破产，最后完善卡片和AI。遇到问题时，回头仔细阅读官方规则，很多时候BUG源于对规则的误解。最重要的是，享受编码和游戏本身带来的乐趣。当你第一次和电脑对手完成一局游戏时，你会觉得这一切都是值得的。