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; // 所有者IDnull表示银行 this.mortgaged false; // 是否已抵押 this.houses 0; // 房屋数量0-4 this.hotel false; // 是否有酒店当houses4时可升级 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。我们可以将玩家的一个回合定义为一系列状态的迁移ROLL_DICE等待玩家投掷骰子。MOVE根据骰子点数移动棋子并触发落地格子的效果如购买土地、支付租金、抽卡等。BUY_OR_AUCTION如果落在无主土地上玩家可以选择购买或触发拍卖。PAY_RENT如果落在他人土地上自动支付租金可能触发破产判断。BUILD_HOUSES玩家可以选择在自己的同色地产上建造房屋可选阶段。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。它结合了易用性和灵活性。实现步骤创建SVG棋盘可以用JavaScript动态生成也可以直接在一个svg标签中写好静态的棋盘路径。格子可以用g组标签来组织每个组包含一个代表格子的rect和显示地名、价格的text。svg idgameBoard width800 height800 viewBox0 0 800 800 !-- 棋盘外框 -- rect x0 y0 width800 height800 fill#f0e6d2/ !-- 一个示例地产格子左下角 -- g idproperty-1 classproperty>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是右边从下到上... // 这里省略具体计算逻辑通常需要一些几何数学。 } }实现交互为每个格子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()就完事需要有一个视觉上的滚动动画。实现思路创建骰子UI用两个div模拟骰子每个骰子有6个面可以用CSS 3D旋转或者6个不同的点数图片来切换。动画函数在投掷时快速循环切换骰子显示的点数或旋转角度持续一小段时间如0.5秒。生成最终点数动画结束后用随机数决定最终点数并定格显示。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 卡片系统与随机事件“机会”和“公益金”卡片是游戏变数的来源。实现的关键是卡牌堆的洗牌和循环。定义卡牌每张卡牌是一个对象包含描述文本和触发效果的回调函数。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; } } // ... 更多卡牌 ];洗牌与抽牌游戏开始时对卡牌数组进行随机排序。抽牌时从数组顶部取出一张执行效果后将其放入牌堆底部。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与排查清单问题现象可能原因排查步骤玩家棋子位置错乱calculateCoordinates函数逻辑错误或棋盘索引与格子对象对应关系错误。1. 在控制台打印玩家移动前后的position索引。2. 检查calculateCoordinates函数在每个棋盘边上的计算逻辑。3. 确认棋盘board数组的顺序与UI渲染顺序一致。租金计算错误Property.getCurrentRent()逻辑错误或同色组判断有误。1. 编写单元测试输入不同的房屋数量、抵押状态验证输出租金。2. 检查canBuildHouse中evenDevelopment均匀发展的判断逻辑。游戏状态不同步UI显示落后UI更新没有紧跟状态变化。事件监听器未正确绑定或触发。1. 确保任何修改GameState的操作后都触发了对应的事件如player:moneyChanged。2. 在事件处理函数中使用console.log确认其被调用。3. 使用Vue或React等响应式框架可以极大缓解此问题。破产后游戏卡死破产玩家没有被正确从回合循环中移除。1. 检查GameState.nextPlayer()中的do...while循环条件确保它跳过了isBankrupt的玩家。2. 检查破产处理函数declareBankruptcy是否正确设置了玩家的破产状态并转移了资产。卡片效果执行后状态异常卡片effect函数有副作用影响了不该影响的状态。1. 为每张卡片效果函数编写独立的测试。2. 在effect函数开头和结尾打印游戏状态快照进行对比。5.2 必不可少的调试技巧善用浏览器开发者工具Console这是你最好的朋友。多使用console.log、console.table用于打印数组对象来输出关键状态。Sources Debugger在关键函数如payRent的第一行打上断点可以逐行执行查看所有变量的实时值。Event Listeners在Elements面板检查DOM元素可以看到其上绑定了哪些事件有助于排查交互失效问题。为核心逻辑编写单元测试 使用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 });状态快照 在游戏关键节点回合开始、投骰后、交易前后将整个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源于对规则的误解。最重要的是享受编码和游戏本身带来的乐趣。当你第一次和电脑对手完成一局游戏时你会觉得这一切都是值得的。