最近我折腾了一个挺有意思的小东西——网页版MC.html。这个名字说白了就是“用HTML写的《我的世界》网页版”一个单文件就能跑起来的体素小游戏随机生成一片方块地形用鼠标控制视角、WASD移动左键敲方块右键放方块还能存档读档。整个项目没有后端、没有框架、没有Node环境就一个HTML文件双击打开浏览器就能玩。写这个项目倒不是因为要挑战什么高难度主要是想验证一个想法在不动用WebGL、不依赖Three.js这类库的前提下纯靠Canvas 2D加上一点数学到底能不能搭出一个能玩的第一人称方块世界。折腾完之后的结论是能而且比想象中简单也比想象中容易踩坑。这篇文章我把整个项目的技术选型、核心架构、关键实现、性能调优过程都拆开聊一遍前半部分是原理和思路后面是代码和实测数据最后是一份我很想早点拿到的避坑清单。这期内容适合这些人对Minecraft类游戏原理感兴趣的前端开发者想用原生JS写小游戏练手的同学以及那种“不想装环境、就想写个能双击运行的小项目”的懒人党。如果你只是想找个现成的完整代码去复制这篇文章也给到了足够多的核心片段拼起来就是一个能跑的demo。1. 项目定位与技术选型1.1 为什么想用HTML做MC体素游戏听起来很高大上但核心概念几句话就能讲清楚把游戏世界切成一个个小格子每个格子里存一个方块类型游戏引擎负责把这些方块渲染出来再让玩家以“格子”为单位进行交互。我的世界玩起来让人觉得自由本质上是因为它给每个方块都赋予了“可破坏、可放置、可合成”的规则而底层数据结构并不复杂。网页技术做体素游戏的难点主要在三块第一三维空间怎么在二维屏幕上表达第二方块数量大了以后怎么保证帧率第三第一人称视角的操作映射怎么做得顺手。这三块没有一块是必须靠神器才能解决的Canvas 2D配合透视投影就能做所以我决定用最朴素的方式写一版。这么做还有一个现实原因我经常想给别人展示一个好玩的小项目但让对方去装Python、跑npm实在不现实。单HTML文件双击即开是传播成本最低的形态。写完这个文件之后我把它发给同事对方用手机浏览器打开也能玩这种“零依赖”带来的爽快感只有经历过装环境痛苦的人才能懂。1.2 Canvas 2D实现的可行性分析做之前我其实纠结过选型列了一张表对比过几条路线方案性能开发成本单文件可行性适合场景Canvas 2D 手写3D投影中等较低完美中小世界、学习体素原理WebGL原生编写很高很高困难大世界、商业级渲染Three.js等库较高中等一般追求效果、可接受依赖CSS 3D Transform中等中高勉强展示型项目、非游戏最终我选了第一项理由一句话就能概括用最基础的API把游戏原理跑通不让渲染库把核心逻辑给“包办”了。写渲染库的人已经把矩阵、贴图、深度缓冲全部封装好开发者只需要调API确实很爽但体素游戏真正的难点在数据组织和空间算法上这些恰恰不应该被库藏起来。Canvas 2D的画画家算法、透视投影虽然性能天花板不高但对一个32x32x24的小世界来说帧率完全可以接受。我的定位是做一个“能玩能看能展示原理”的项目不是去跟商业游戏比画质。如果你以后真想做大世界直接把渲染层换成WebGL就行数据结构和算法逻辑可以原封不动搬过去。2. 体素世界的架构拆解2.1 世界数据三维数组与方块ID体素世界的数据结构我选择了最短平快的方式——三维数组。坐标系这样定x和z是水平方向y是垂直向上。世界大小是32x24x32也就是32格长、32格宽、24格高正好凑出一个适合小范围探索的“孤岛”。每个格子用整数表示方块类型0是空气1是草方块2是泥土3是石头。世界初始化的时候就往数组里填值运行中破坏方块就是把这个格子的值改成0放置方块就是改成对应方块ID。这种直接到格子的存储方式配合Minecraft同款设计空间上就是教科书式的二维数组扩展成三维没有任何花哨操作。const WORLD_W 32; const WORLD_H 24; const WORLD_D 32; // world[x][y][z] blockId const world []; for (let x 0; x WORLD_W; x) { world[x] []; for (let y 0; y WORLD_H; y) { world[x][y] []; for (let z 0; z WORLD_D; z) { world[x][y][z] 0; } } }这段代码看着简单但它会带来一个容易忽视的性能问题每初始化一个格子就要创建三个嵌套的数组引用。32x24x32一共不到25000个格子数据量很小但如果以后把世界扩大到512x256x512嵌套数组的开销和垃圾回收压力就会明显变大。到那时可以考虑用“一维数组索引计算”的紧凑存储形如world[x y * WORLD_W z * WORLD_W * WORLD_H]。做项目时先求简单等性能瓶颈真的来了再优化才是务实的做法。2.2 渲染核心相机、投影与画家算法3D场景显示在2D屏幕上的核心是“投影”。我这里的相机模型非常经典相机有三个位置属性(camera.x, camera.y, camera.z)代表玩家眼睛在三维空间中的位置还有两个旋转属性(yaw偏航角和pitch俯仰角)代表玩家往哪儿看。yaw控制左右转头pitch控制上下低头这两个值由鼠标移动来控制。投影计算分三步走把世界坐标平移到相机坐标系、绕Y轴旋转适配yaw、绕X轴旋转适配pitch最后用透视公式把三维坐标映射成屏幕上的二维坐标与缩放比例。透视效果的关键就在于“近大远小”——用z2深度做分母离相机越近的方块投影后越大。function worldToScreen(x, y, z) { const dx x - camera.x; const dy y - camera.y; const dz z - camera.z; // 绕Y轴旋转左右转头 const cosY Math.cos(camera.yaw); const sinY Math.sin(camera.yaw); const x1 dx * cosY - dz * sinY; const z1 dx * sinY dz * cosY; // 绕X轴旋转上下低头 const cosX Math.cos(camera.pitch); const sinX Math.sin(camera.pitch); const y1 dy * cosX - z1 * sinX; const z2 dy * sinX z1 * cosX; if (z2 0.1) return null; // 在相机后方不渲染 const fov 1.2; const projectedX canvas.width / 2 (x1 * fov * canvas.width) / z2; const projectedY canvas.height / 2 - (y1 * fov * canvas.height) / z2; const scale (fov * canvas.width) / z2; return { x: projectedX, y: projectedY, scale }; }理解这个函数整个3D实验的档位就打通了。每次你想渲染一个方块就把它的八个顶点坐标传入得到八个屏幕坐标然后用Canvas绘制多边形。但是注意直接画所有方块会乱套因为后画的会把先画的盖住。这时候就需要画家算法把世界里的所有方块按“到相机的距离从远到近排序”远的先画进的自然而然覆盖在远处上面。这个规则和真实画家画油画时先涂背景再画前景完全一样故得此名。2.3 可见面剔除渲染性能的第一道闸门如果所有方块都把六个面画出来一个方块要画六个四边形一个30x30的小世界即使只算表面方块也轻松上万面Canvas 2D绘制这么多路径会直接卡成PPT。所以必须做可见面剔除只画玩家当前能看到的面。判断一个面是否可见方法非常简单看这个面的外侧邻居方块是不是空气。如果是空气说明这个面暴露在外面需要绘制如果邻居是实体方块这个面被完全挡住不画也不会有视觉差异。function isFaceVisible(x, y, z, face) { const nx x face[0]; const ny y face[1]; const nz z face[2]; if (nx 0 || nx WORLD_W || ny 0 || ny WORLD_H || nz 0 || nz WORLD_D) { return true; // 世界边界视为可见 } return world[nx][ny][nz] 0; // 邻居是空气则可见 } const FACES [ [0, 1, 0], // 顶面 [0, -1, 0], // 底面 [1, 0, 0], // 右面 [-1, 0, 0], // 左面 [0, 0, 1], // 前面 [0, 0, -1] // 后面 ];这套剔除逻辑配合方块光照模拟效果很好。我在绘制时给不同面加不同的亮度系数顶面最亮乘1.0侧面乘0.8底面乘0.5。这样即使是纯色方块也能看出上下左右的立体感视觉效果立刻上一个档次代码量多不到十行强烈建议加上。3. 核心玩法功能的代码实现3.1 第一人称控制与碰撞检测操作手感是游戏demo的命门。第一人称控制分两块视角控制和移动控制。视角控制很简单监听鼠标移动事件把mouseX的增量加到yaw上把mouseY的增量加到pitch上同时限制pitch在-1.5到1.5之间防止玩家把头“转穿”过去。移动用WASD键按下时根据yaw方向计算前进向量移动速度用deltaTime修正这样不同帧率下速度保持一致。碰撞检测是这块最核心也最容易漏掉的东西。玩家不能穿墙最简单的做法是把玩家当成一个轴对齐的盒子移动前先计算目标位置检测盒子所占的格子有没有方块如果有就阻止对应轴向上的移动。function collides(px, py, pz) { const minX Math.floor(px - 0.3); const maxX Math.floor(px 0.3); const minY Math.floor(py - 1.6); const maxY Math.floor(py); const minZ Math.floor(pz - 0.3); const maxZ Math.floor(pz 0.3); for (let x minX; x maxX; x) { for (let y minY; y maxY; y) { for (let z minZ; z maxZ; z) { if (getBlock(x, y, z) ! 0) return true; } } } return false; }这里我踩过一个坑玩家碰撞盒子的宽度设为0.6也就是横向半宽0.3高度设为1.6。如果高度设得太高走楼梯和上坡会特别难受如果太矮又能从一格高的缝隙里挤过去。0.6x1.6不算精确复刻MC的0.6x1.8但实测走起来更舒服。跌落重力我用简单的速度累加每帧给vy减一个重力系数碰到地面就归零。3.2 射线拾取砸方块和放方块方块破坏和放置的逻辑本质上都是“玩家视线先撞到哪个格子”。这个操作在三维图形学中叫射线与格子的求交。我不推荐用暴力遍历所有方块的方式去检测虽然小世界也能跑但代码逻辑不优雅大世界就废了。更标准的做法是DDA算法即数字微分分析。核心思路是从相机位置沿视线方向一步一步往前走每一步检测当前所在的格子是不是实体方块如果是就停下来返回该方块坐标同时记录上一个空格的位置这样放置方块时可以直接放到空格上。function raycast() { let x camera.x; let y camera.y; let z camera.z; const stepX Math.sign(Math.sin(camera.yaw)); const stepY Math.sign(Math.sin(-camera.pitch)); const stepZ Math.sign(Math.cos(camera.yaw)); for (let i 0; i 8; i) { const bx Math.floor(x); const by Math.floor(y); const bz Math.floor(z); if (getBlock(bx, by, bz) ! 0) { return { bx, by, bz, px: Math.floor(lastX), py: Math.floor(lastY), pz: Math.floor(lastZ) }; } lastX x; lastY y; lastZ z; // 沿视线方向前进0.1格然后继续检测 x Math.sin(camera.yaw) * 0.1; y Math.sin(-camera.pitch) * 0.1; z Math.cos(camera.yaw) * 0.1; } return null; }这段代码用固定步长0.1格前进最多检测8格距离。8格虽然不算远但对一个做“周边交互”的demo来说足够了。真实游戏里可以用更精确的DDA但这里固定步长足够直观、够用。左键调用raycast把命中的方块ID改成0右键在空格坐标放进当前选中的方块就完成了两种最核心的交互。3.3 地形生成与存档地形生成我用了最简单的“正弦叠加法”。原理是用多个不同频率的正弦函数相加能得到看似不规则、实际却平滑起伏的曲线。对每个x和z坐标算出一个高度值然后从下往上填充方块最底下三层放石头中间放泥土最顶层放草方块。这样生成的山丘远看有点自然味道近看又能看出规律性的波浪不至于杂乱。function getHeight(x, z) { return Math.floor( 5 Math.sin(x * 0.2) * 2 Math.sin(z * 0.25) * 3 Math.cos((x z) * 0.15) * 2 ); }存档模块我给了两个方案。第一个是用localStorage直接把三维数组压成字符串存进去好处是不需要手动操作缺点是localStorage容量只有5MB左右如果是大世界很容易撑爆而且换个浏览器或清了缓存就没了。第二个方案是做两个按钮一键导出存档为JSON文件一键导入。这样玩家可以把存档文件保存到本地分享给别人时甚至能把世界一起发过去。我最终两个都做了默认进入自动读localStorage同时在设置界面提供导出导入用户体验和功能完整性兼顾。4. 实操过程中的坑和调优记录4.1 从0到可玩我的开发顺序很多人拿到一个完整的项目不知道从哪儿下手我自己写的时候总结了有一条比较顺的路线。第一步先搭好页面框架和Canvas不做任何3D先画一个简单的直角坐标系验证坐标方向有没有反。第二步实现相机旋转与投影跑起来以后用鼠标左右转屏幕上能看到一个模拟方块在转动这一步会特别有成就感也是整个项目的“心脏”。第三步把三维数组加进来渲染地形这时候注意跑一遍画家算法和可见面剔除FPS会肉眼可见地变化。第四步做玩家移动和碰撞此时世界已经能“走”进去。最后才加射线交互、地形生成、存档UI这些外围功能。这个顺序的妙处在于每一步都有可验证的结果不会攒了三百行代码然后一次debug找不出问题。我自己第一次就把投影和坐标轴搞反了屏幕上的方块转得跟喝醉一样后来老老实实先画坐标轴才定位到问题。4.2 性能实测什么规模会卡不同世界规模下的帧率表现我直接搭了个简单场景测了几组数据。机器是普通的Windows笔记本Chrome浏览器开启硬件加速分辨率1920x1080。注意这只是单机参考不同的浏览器、屏幕尺寸会略有差异但相对趋势很稳定。世界尺寸是否开启可见面剔除平均帧率体验感受16x16x16否55-60勉强流畅偶见卡顿16x16x16是60丝滑32x24x32是45-60流畅地形复杂时略降64x32x64是20-30能玩但不畅快64x32x64否8-12几乎不可玩数据很直观可见面剔除是性价比最高的优化手段没有任何理由不做。第二个高性价比优化是限制渲染距离。把世界到相机中心超过一定距离的方块跳过不画能非常有效地保护帧率。我做了一个可视距离滑块从4格到16格可调实测在64x64的世界中把可视距离拉到16格还能保持45帧以上调到8格就稳在60帧。Canvas 2D的顶点填充始终顶不过WebGL的GPU渲染但配合这些削减渲染量的方法做中小型场景完全够用。4.3 移动端适配做完PC版以后我顺手做了移动端适配这一块比想象中更重要。因为浏览器直接打开一个HTML文件的场景里手机用户占了很大一部分。移动端没有键盘和鼠标所以需要两部分改动虚拟摇杆控制移动、滑动屏幕控制视角。虚拟摇杆我实现得很朴素屏幕左下角一个圆形区域触摸按下后记录圆心手指滑动时计算偏移量映射成前后左右移动速度。右下角放两个按钮一个破坏方块一个放置方块。视角控制则是单指滑动屏幕时改变yaw和pitch。这套方案做不出原版MC手游的精致手感但作为网页demo已经足够顺滑。还有一个容易踩的坑是移动端的视口配置。如果少了meta nameviewport contentwidthdevice-width, initial-scale1.0这句话手机上打开页面会先按980px宽度渲染再缩放导致画布模糊、触摸坐标错位。加上之后还要在CSS里设置touch-action: none不然手指滑动时浏览器会默认滚动或缩放页面游戏视角就会跳。5. 常见问题速查表我把开发过程中遇到过的问题和排查思路整成了一张表格后面照做就行。现象原因解决办法画面卡成PPT世界太大或没有做可见面剔除开启剔除限制可视距离缩小世界尺寸方块闪烁前后互相遮挡画家算法排序不稳定渲染前按方块到相机距离排序距离相同加深比较鼠标一转视角就乱飞yaw或pitch累加错误或没阻止默认事件给canvas加pointer lock或调用preventDefault移动直接穿墙碰撞检测只做了单轴检测分别在x和z方向检测目标位置不要同时检测存档读出来是空的localStorage被浏览器清掉提示玩家使用导出JSON功能备份手机上看不到画面视口标签缺失或canvas尺寸固定为PC尺寸加上viewport用window.innerWidth动态设置canvas大小方块面颜色发黑不同面的亮度未区分为顶面、侧面、底面分别乘不同亮度系数放置方块总是放在自己身上射线检测忽略了自己所在的格子放置前检查目标格和玩家包围盒是否重叠5.1 画面类问题画面类问题里最坑的是“方块闪烁”。这个问题表面看是画出来的顺序不稳定实际是排序算法不稳定。我在对方块进行距离排序时用到了sort但比较函数只返回远近差值当两个方块距离完全一样时sort结果可能不稳定导致两个本来应该一前一后覆盖的方块互相穿插。解决办法是给比较函数加一个严格区分例如先比较距离再比较y值再比较x值。虽然方块数量多了以后这点开销可以忽略但排序的稳定性却直接影响画面。另一个高频问题是Canvas在高分屏下模糊。很多人发现字和方块边缘发虚原因是没有处理devicePixelRatio。Canvas的CSS尺寸是100%宽度但实际像素达不到物理像素密度。解决方法是把canvas.width设成clientWidth * devicePixelRatiocanvas.height以此类推再调用ctx.scale(devicePixelRatio, devicePixelRatio)。这样画面会变得锐利。加完这段代码整个项目给人的观感立刻提升一个档次。5.2 逻辑与操作类问题逻辑类问题里经常踩的是碰撞检测不彻底。移动检测如果只对“目标位置”格做一次检测角色高速移动时会直接穿过薄墙。稳妥的做法是每一帧把目标位置拆成x、y、z三个方向分别检测看到哪一个方向撞了方块就停住哪个轴的移动这样不仅防穿墙还能让角色沿着墙滑行手感自然很多。一次性检测三维目标点会让角色撞墙后直接卡住不动体验极差。射线拾取还有一个细节破坏方块和放置方块需要互斥触发。移动端尤其要注意手指点击放置的位置如果正好也在破坏按钮的感应区内会同时触发两个操作。我加了一个简单的机制每一次触摸事件只允许执行一种操作比如检测到按压时间小于200毫秒视为点击否则是拖动视角。这个细节对手机端的操作手感提升非常明显。写在最后折腾完这个网页版MC项目最大的收获反而不是一个“能玩的demo”而是把体素游戏从“看着神秘”变成了“就这回事”。三维数组存世界投影公式画场景射线算法做交互思想都很朴素组合起来却能产生很大的自由度和乐趣。如果你也想动手试试我建议千万不要照抄别人的完整代码而是先跑通相机旋转再看画面慢慢变得像MC那个过程特别上瘾。最后分享一个小技巧开发期间把世界的地形种子值做成可调试的全局变量每次刷新页面之前改一下seed就能不重启服务地测试不同地形引起的渲染性能问题。这个小习惯帮我省了很多反复关开页面的时间。如果你也写出了一个版本的网页MC记得在存档按钮旁边留一个“随机世界”入口那是玩家一定会按的按钮。