纯前端HTML+JavaScript大富翁游戏开发实战教程

简介一款基于HTMLCSSJavaScript实现的经典大富翁游戏完整还原童年与小伙伴常玩的棋盘玩法包含地图、角色、骰子、地产购买与随机事件等核心模块适合Web前端初学者、期末大作业与毕业设计参考。资源包含源码与文档说明代码注释详细逻辑清晰新手也能读懂压缩包共37个文件以png/jpg图片素材、js脚本、json配置、css样式与html入口文件为主整体仅2.25MB解压即可部署运行。项目界面美观、操作简单功能模块完整文档对项目结构、核心逻辑和运行方式做了整理能够直接作为课程设计或毕设项目使用。已有706人学习下载对于需要快速完成前端交互类作品或学习游戏化编程的同学具有很高的参考和复用价值。1. 基于 htmlJavaScript 的大富翁游戏一份不用后端就能跑起来的童年复刻拿到“基于 htmlJavaScript 的大富翁游戏”这套源码的人问得最多的三个问题分别是它要不要装环境、要不要连数据库、能不能双击就玩。答案是都不需要它是一份纯前端项目浏览器打开 index.html 就能进入游戏。这类项目的价值不在于画面多精致而在于它把大富翁的回合制流程完整拆成了“状态 渲染”两层——玩家位置、资金、地产归属这些数据在内存里维护页面只是把它画出来。对刚学完 JavaScript 基础、想做一个完整作品的人或者正在找课程设计题目的同学这是很合适的练习方向它没有框架依赖核心逻辑全在一个 game.js 里你能看清每一行代码在干什么也能真正把一局游戏从头玩到尾。2. 从格子数据到棋盘渲染开局先建立“逻辑坐标”这套地基大富翁这种棋盘游戏第一件事不是画界面而是先把棋盘建模。很多新手拿到需求就急着写 HTML 布局结果地图数据、页面坐标、玩家位置三者搅在一起改一格位置就要改三个地方。正确做法是先让“棋盘是什么”和“棋盘长什么样”彻底分开。2.1 地图与格子建模用数组描述一整张棋盘常见做法是把整张地图定义成一个数组数组下标就是格子编号。每块地是一个对象包含类型、名称、价格这些属性。这里的核心原则是游戏逻辑只认“第几号格子”不认“第几行第几列”坐标换算交给专门的函数去算。// 格子类型0起点1地产2机会卡3罚款4监狱 const MAP_SIZE 28; const mapData [ { type: 0, name: 起点, price: 0, rent: 0 }, { type: 1, name: 老街, price: 100, rent: 40 }, { type: 1, name: 南门, price: 140, rent: 55 }, { type: 2, name: 机会, price: 0, rent: 0 }, { type: 4, name: 监狱, price: 0, rent: 0 }, { type: 3, name: 纳税, price: 0, rent: 0 }, // ...... 后面按同样的格式一直填到第 28 格 ];逻辑说明游戏里所有格子的属性都以这个数组为准。type决定踩到它时触发哪套结算逻辑price和rent只对地产格子有意义。数组顺序就是玩家绕圈的方向下标 0 永远是起点。参数说明MAP_SIZE设成 28 是因为常见的外圈棋盘是 8×8 网格去掉重复的角落正好 28 格。想加快游戏节奏可以改成 6×6 的 20 格但改完要同步调整后面的路径生成函数否则格子和坐标会对不上。价格数值也不要拍脑袋定建议按“地产价 100300、过路费是地价的 30%50%”这个比例区间来配不然前期买不起地后期又毫无悬念。2.2 用 DOM 渲染棋盘回合制游戏不需要 Canvas大富翁是回合制不需要每帧重绘用 Canvas 反而增加复杂度每个格子要做点击事件、每块地上要叠玩家棋子Canvas 里全得手动算命中。用 DOM 加 CSS 绝对是更省事的方案。格子的坐标不要手写死而是用一段生成函数把格子序号换算成行列坐标。const CELL_SIZE 80; // 每个格子的像素尺寸 const BOARD_SIZE 8; // 棋盘每边的格子数 function buildGridPositions() { const list []; // 顶边从左到右 for (let c 0; c BOARD_SIZE; c) list.push([0, c]); // 右边从上到下去掉右上角 for (let r 1; r BOARD_SIZE; r) list.push([r, BOARD_SIZE - 1]); // 底边从右到左 for (let c BOARD_SIZE - 2; c 0; c--) list.push([BOARD_SIZE - 1, c]); // 左边从下到上去掉左下角和左上角 for (let r BOARD_SIZE - 2; r 1; r--) list.push([r, 0]); return list; } const gridPos buildGridPositions(); function renderBoard() { const board document.getElementById(board); mapData.forEach((cell, i) { const [row, col] gridPos[i]; const div document.createElement(div); div.className cell; div.style.left col * CELL_SIZE px; div.style.top row * CELL_SIZE px; div.textContent cell.name; div.dataset.index i; board.appendChild(div); }); }逻辑说明buildGridPositions按顺时针方向生成每一格的[行, 列]这样gridPos[格子编号]就能直接拿到坐标。渲染时用left和top绝对定位把每个格子放在棋盘画布对应的位置。dataset.index是留给点击事件的后面要实现“点击某块地查看归属”全靠它。参数说明CELL_SIZE改大改小直接影响整个棋盘尺寸如果格子文字挤在一起优先把这块地字体调小而不是改格子大小。BOARD_SIZE改小后buildGridPositions依然能正确生成路径因为四段循环都基于BOARD_SIZE计算不会出现坐标错位的硬编码问题。2.3 回合主循环与事件锁让游戏一局接一局转起来大富翁的回合循环说起来很简单当前玩家掷骰子、移动、落地结算、轮到下一个人。但实现的时候最容易出问题的是事件没有加锁——玩家连续点三下骰子按钮角色就会连走三步。所以回合循环必须用状态锁把“结算中”“回合结束”这类状态管起来。let currentPlayer 0; let turnOver false; let isResolving false; function nextTurn() { do { currentPlayer (currentPlayer 1) % players.length; } while (players[currentPlayer].bankrupt); turnOver false; updatePanel(); } function onRollClick() { if (turnOver || isResolving) return; isResolving true; const steps rollDice(); animateMove(players[currentPlayer], steps, () { resolveCell(players[currentPlayer]); isResolving false; turnOver true; nextTurn(); }); }逻辑说明nextTurn里用do...while跳过已破产玩家保证每个回合的起点一定是个活人。onRollClick是骰子按钮唯一的入口开头的两句if就是锁回合没结束不能掷结算没完成也不能掷。真正的移动和结算放在animateMove的回调里这样动画播放期间所有点击都会被拒绝。参数说明这里最重要的参数其实是动画时长如果animateMove内部用setInterval移动且间隔太短回调还没触发按钮就已经恢复可点了。我一般把每次移动间隔设在 150200ms走 6 格大约一秒出头既不会让人觉得慢也给结算逻辑留足了执行时间。3. 移动、买地与破产判定让玩家真正“玩得起来”的结算逻辑棋盘画好、回合能转起来之后游戏才算进入正题。这一章要做的三件事是玩家怎么走、踩到无主地怎么买、踩到别人的地怎么赔钱以及钱不够时怎么退出游戏。3.1 掷骰子与移动回绕从一段取余开始的边界处理移动逻辑最核心的点在于棋盘是循环的玩家在最后一格再往前走要绕回起点。用取余运算实现最干净。function rollDice() { return Math.floor(Math.random() * 6) 1; } function movePlayer(player, steps) { const targetIndex (player.index steps) % MAP_SIZE; // 经过或正好停在起点发放奖励 if (targetIndex player.index steps 0) { player.money 200; } player.index targetIndex; return targetIndex; }逻辑说明(player.index steps) % MAP_SIZE让玩家永远停在地图范围内。判断经过起点用的是“目标下标小于当前下标”因为一圈内只有越过了数组末尾才会出现这种情况。这里我把“正好停在起点”也按经过处理属于宽容规则避免玩家踩在起点上拿不到钱的尴尬局面。参数说明200是经过起点的奖励金它直接影响游戏时长。给太多玩家破产难度增大给太少前期买地吃力。和地产价格放在一起看通常把奖励金设成最便宜地产价格的 1.52 倍比较合适。另外steps来自骰子如果以后想加“走到特定格子再掷一次”的特殊规则记得先记录原始steps再处理额外回合。3.2 买地与资金校验先判钱够不够再改状态踩到无主地产时游戏不能自动帮玩家买应该由玩家决定。但不管怎么决策程序必须做一次资金校验防止余额变成负数。function handleBuy(player, cell) { if (cell.owner ! null) return; if (player.money cell.price) { addLog(player.name 资金不足买不下 cell.name); return; } player.money - cell.price; cell.owner player.name; addLog(player.name 买下 cell.name); }逻辑说明先判断这块地有没有主再判断钱够不够最后才扣钱、写归属。顺序不能反否则可能出现“钱扣了但地没买到”的脏状态。真正要买地的动作由一个弹窗或按钮触发handleBuy只负责执行购买不负责弹出询问框。参数说明cell.price直接决定前期游戏节奏。常见做法是按地图路径分段定价起点附近 80120中段 150200后半段 250350。这样设置的好处是前期大家都能买得起一两块地游戏能进入互相收过路费的对抗阶段而不是所有人都站在起点旁干瞪眼。3.3 过路费、机会卡与破产退出把结算从渲染里拆出来踩到别人地产时玩家要支付过路费踩到机会卡时要从卡池里抽一张并执行效果如果钱扣到负数就标记破产并清空地皮。这块逻辑最忌讳的是边算钱边改页面正确姿势是只操作数据最后统一渲染。function resolveCell(player) { const cell mapData[player.index]; if (cell.type 2) { drawCard(player); } else if (cell.type 1) { if (cell.owner null) { handleBuy(player, cell); } else if (cell.owner ! player.name) { const owner players.find(p p.name cell.owner); const rent cell.rent; player.money - rent; owner.money rent; addLog(player.name 向 owner.name 支付过路费 rent); checkBankrupt(player); } } else if (cell.type 3) { player.money - cell.fee; checkBankrupt(player); } renderPlayers(); updatePanel(); } function checkBankrupt(player) { if (player.money 0) { player.bankrupt true; mapData.forEach(c { if (c.owner player.name) c.owner null; }); addLog(player.name 破产了名下地产全部释放); } }逻辑说明resolveCell是落地结算的总入口它按格子类型分路处理每个分支只负责改数据。注意过路费直接取cell.rent不要临时再按比例算让每块地的租金写在地图数据里方便后期调数值。checkBankrupt用来统一处理资金不足标记破产、释放地产这样剩下的玩家才有机会重新购买。机会卡是这里最容易失控的部分。卡池要用“打乱后顺序抽取”的方式每次都从数组里随机挑一张会让同一张卡反复出现游戏体验像撞大运。const cards [ { text: 前进 3 格, effect: p moveBy(p, 3) }, { text: 获得 200 元, effect: p p.money 200 }, { text: 后退 2 格, effect: p moveBy(p, -2) }, // 更多卡片...... ]; let cardCursor 0; function shuffle(arr) { for (let i arr.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [arr[i], arr[j]] [arr[j], arr[i]]; } } function drawCard(player) { if (cardCursor cards.length) { shuffle(cards); cardCursor 0; } const card cards[cardCursor]; addLog(player.name 抽到卡 card.text); card.effect(player); renderPlayers(); }逻辑说明cardCursor是卡池游标抽一张往前走一位抽完一轮就洗牌重置。这样保证每轮卡池里的卡片都会按随机顺序出现一次不会出现连续五张“前进 3 格”的场面。卡片的effect字段直接存函数实现“抽卡即执行”但要注意这些函数必须是纯数据操作不能在里面调用render。参数说明卡池建议准备 1216 张正负收益比例控制在 1:1 左右纯恶搞卡放一两张就行。卡片效果里的移动要注意回绕边界moveBy函数里同样用取余处理负数(player.index steps MAP_SIZE) % MAP_SIZE。这一步不做的话后退卡会让玩家直接卡在下标越界的位置。4. 大富翁项目常见问题排查坐标飘移、连点重入和抽卡玄学这一章全部是血泪经验。纯前端游戏看着简单跑起来翻车的地方通常不在玩法设计上而在最基础的事件和坐标处理。下面四类问题是我检查这类项目时最先看的位置。4.1 玩家走着走着出了棋盘逻辑索引和像素坐标混用了现象玩家棋子在前几格还正常走到棋盘转角后突然跑到地图外面或者两个角色叠在同一个格子上。原因移动代码里直接维护了player.x和player.y每走一格就手动加一次CELL_SIZE遇到转角还要写一堆if切换方向早晚写出错。解决游戏逻辑只存格子编号player.index像素坐标一律由gridPos换算。function renderPlayer(player, el) { const [row, col] gridPos[player.index]; el.style.transform translate(${col * CELL_SIZE}px, ${row * CELL_SIZE}px); }注意这里用了transform而不是left/top。频繁改left会反复触发浏览器布局计算transform走合成层动画更平滑。无论玩家移动多少次这个函数只需要知道格子和编号永远不会出现“多走了半格”的偏移问题。4.2 快速连点导致连走两步事件回调缺少防重入锁现象快速点骰子按钮角色连续移动两回合或者一个回合内骰子点数被叠加。原因点击事件没有锁动画还在播放时第二次点击已经进入了移动逻辑。解决方案在 2.3 节已经给出这里补充一个容易被忽略的细节——isResolving锁必须在异步回调里解锁不能放在函数末尾。function onRollClick() { if (turnOver || isResolving) return; isResolving true; const steps rollDice(); animateMove(players[currentPlayer], steps, () { resolveCell(players[currentPlayer]); isResolving false; turnOver true; }); }如果写成完成动画后立即解锁还行最怕的是有人把isResolving false直接写在animateMove()调用之后那根本锁不住——animateMove内部是异步定时器代码会立刻走到解锁那行。判断锁有没有生效就看骰子显示的数字和角色移动的格数是否一一对应。4.3 机会卡像黑匣子数组抽卡不能边抽边删现象卡片效果时而生效时而失效报错信息常是“卡片列表为空”或者抽出来的卡不符。原因有人把抽卡实现成“每抽一张就用splice从数组里删掉一张”抽到最后数组变空没有做重置处理。解决用 3.3 节的游标方案不删数组只挪游标抽完一轮重新洗牌。另外要注意洗牌算法。用sort(() Math.random() - 0.5)这类“伪随机排序”洗牌结果分布不均匀有经验的玩家会觉得某些卡总在开头出现。按 3.3 节的 Fisher-Yates 洗牌才是正路两行代码换一个公平的抽卡池这笔账很划算。4.4 控制台报错与调试验证从报错信息反推状态现象游戏运行中途控制台报Uncaught TypeError: Cannot read property money of undefined。原因绝大多数情况是currentPlayer指向了一个已破产玩家或者players.find()没找到对应的人返回了undefined。这类问题不要靠肉眼盯代码直接在最容易出错的结算分支打输出。function resolveCell(player) { console.log([结算], player.name, 位置, player.index, 金钱, player.money, 格子, mapData[player.index].name); // 原有逻辑...... }记住一条习惯凡是报了undefined的属性先去查它的来源对象是谁再查这个对象在什么条件下可能不存在。把console.log打在数据被读取的地方之前能省掉一半找 bug 的时间。5. 把可玩性调到位参数、面板与文档说明的落法纯前端的游戏项目最怕“能跑但不好玩”。大富翁的趣味性几乎全在数值平衡上其次才是界面反馈。这章给出一个能直接套用的调参思路以及让作品更像真正产品的界面细节。5.1 数值调参清单从骰子点数到破产阈值所有数值建议集中定义在文件头部做成配置项不要散落在逻辑里。这样后面改平衡性只需要动一个区域。参数建议值调整方向BOARD_SIZE8改小让游戏更快结束INIT_MONEY1000减少则对抗更激烈PASS_GO_BONUS200减少会让中后期更残酷地价区间100~350整体提高会拖慢买地节奏过路费比例地价的 30%~50%提高会让破产来得更突然罚款金额80~150低于地价太轻高于太多影响体验一个常见做法是把过路费写进地图数据而不是计算得出因为不同档位的地皮可以有不同的收租比例高级地段收得狠一些会让玩家抢地的目标更明确。调参时建议先用两个玩家快速跑十局记录每局结束时的回合数和剩余资金低于 20 回合说明节奏太快高于 60 回合说明太拖沓。5.2 回合状态面板与事件日志让旁观者看得懂游戏不能只有棋盘和骰子。新手看别人玩最想知道的是“现在轮到谁了”“刚才发生了什么”。一个回合面板加一条滚动事件日志成本很低效果却直接拉满。function updatePanel() { players.forEach((p, i) { const card document.getElementById(pc i); card.textContent ${p.name}${p.money} 元${p.bankrupt ? 破产 : }; card.classList.toggle(active, i currentPlayer); }); } function addLog(text) { const log document.getElementById(logArea); const line document.createElement(div); line.textContent text; log.appendChild(line); log.scrollTop log.scrollHeight; // 自动滚到底部 }状态面板的作用是让玩家不用去数格子也能一眼看清资金变化日志区则把“谁买了地、谁付了过路费、谁抽到了什么卡”全部记录下来。回合切换时把当前玩家卡片高亮配合日志里反复出现的名字十分钟就能让新观众理解全流程。5.3 文档说明里值得写的内容标题里既然带了“文档说明”说明作者默认把这套源码当作可交付物。一份合格的前端游戏文档不需要长篇大论但下面四块必须交代清楚运行方式双击打开 HTML 即可不需要启动服务器、操作说明掷骰子、买地确认、卡片触发方式、规则说明起点奖励、监狱规则、破产判定、参数修改指引明确指出数值在文件的哪个位置。把这几样写全接手的人才能从“跑起来”走向“改得动”。6. 用 localStorage 给大富翁做存档读档一个刷新不丢局的技巧大富翁一局动辄半小时中途刷新页面所有进度清零体验非常伤。好在纯前端项目可以用 localStorage 把游戏状态序列化存到浏览器里刷新后直接续上。这个技巧不难但有个关键点必须先说清楚存档只能存数据不能存 DOM 元素和函数。const SAVE_KEY monopoly_save_v1; function saveGame() { const state { players: players.map(p ({ name: p.name, money: p.money, index: p.index, bankrupt: p.bankrupt })), mapData: mapData.map(c ({ owner: c.owner || null, price: c.price })), currentPlayer: currentPlayer }; localStorage.setItem(SAVE_KEY, JSON.stringify(state)); } function loadGame() { const raw localStorage.getItem(SAVE_KEY); if (!raw) return false; const state JSON.parse(raw); if (state.mapData.length ! MAP_SIZE) return false; players.forEach((p, i) { p.money state.players[i].money; p.index state.players[i].index; p.bankrupt state.players[i].bankrupt; }); mapData.forEach((c, i) { c.owner state.mapData[i].owner; }); currentPlayer state.currentPlayer; return true; }逻辑说明saveGame手动挑出需要持久化的字段而不是直接把players数组整个塞进JSON.stringify。因为players里如果混入了 DOM 引用或者函数序列化时会静默丢失读档后拿到一个残缺对象报错时完全看不出来。loadGame里检查mapData.length是对版本最基本的防御防止地图结构改过之后旧存档把游戏撑爆。参数说明SAVE_KEY建议带版本号比如v1以后地图加格子、加新卡池只改版本号就能让旧存档自动失效而不是在加载逻辑里写一堆兼容分支。存档时机我习惯放在每次回合结算后自动调用一次saveGame()这样最坏情况只是刷新后重掷一次骰子而不是整局重来。读档入口放在页面加载完成时检测如果loadGame()返回true就显示一个“继续游戏”按钮点击后调用renderBoard()、renderPlayers()、updatePanel()把全部界面恢复到存档时的状态。这种“刷新不丢局”的体验做一次就知道有多值。我每次给游戏类项目加完存档功能都会顺手做一遍“中途刷新再读档”的测试很多隐藏的状态不同步问题都是在这一步现出原形的。希望帮到你。本文还有配套的精品资源点击获取