前几天我在接单群里看到一条需求做一个俄罗斯方块小游戏预算50元。需求描述就三个字“俄罗斯方块”平台、玩法、交互细节一概没提。群里有人起哄说这钱还不够一顿外卖但我看了一眼就接了。前后花了一个多小时交付了一个直接用浏览器打开就能玩的HTML文件买家一次验收通过还顺手给了个好评。这篇就完整复盘这单副业的全过程需求怎么拆、技术方案怎么选、核心代码怎么做、自测时会踩哪些坑。对想靠写小游戏接单的新手来说这是个非常典型的入门场景看完你应该能直接用同一套路接住类似的单子。1. 一单50块的俄罗斯方块我为什么接下1.1 50元报价背后的真实需求信号先说结论50元当然不是一个能发财的价格但也不是一个应该鄙视的价格。接这类小单真正换来的不是时薪而是三样东西完整走一遍交付流程、一个能进作品集的成品、一个真实需求方的反馈。尤其是刚接触外包或副业的前端新手前几单最缺的往往不是技术而是“面对真实用户做需求判断”的历练。我接到这个单第一时间没有写代码而是先判断需求方的画像和预期。从极简描述和偏低预算来看对方大概率是没什么技术背景的普通用户可能看到别人能做小游戏也想给自己的网页或者孩子弄一个。这类用户有三个典型特点第一功能上只要“能玩”就行第二交付形式越简单越好最好双击就能用第三因为不理解技术实现对bug的容忍度其实不低但需要你主动说明怎么操作。我见过不少技术不错的人翻车在小单上原因不是写不出代码而是没搞清楚对方真正要什么。这里分享一个我自己的接单判断逻辑预算极低的单子需求描述越模糊反而越安全说明对方没有复杂预期预算低但需求描述极长、条目极多的单子才危险那是想用50块做5000块的事。俄罗斯方块属于边界极度成熟的项目不存在“需求理解偏差”的坑唯一风险是自己实现不完整。所以判断完这几点我就决定接而且有信心在两小时内交付。这类单子通常出现在兼职群、外包平台、论坛接单区发布者点开资料往往不是技术相关行业。他要的不是华丽架构而是一个能解决实际问题的文件。我见过有人和需求方反复拉扯只为一个“鼠标操作”要加收10块钱结果被放鸽子也见过有人交完代码顺手补一段操作说明第二周对方又介绍来一个“做一个扫雷”的单子。报价低不丢人交付不靠谱才丢人。1.2 需求拆解的那一步决定你后面要不要返工确定接单后我没有直接闷头写而是先给需求方发了一条消息把范围和交付方式确认清楚。这种沟通不是客套是给自己上一道保险。我的原话大致是“确认下需要桌面浏览器里能打开的俄罗斯方块方向键操作有计分、消行、游戏结束提示对吗我会给你一个HTML文件存到电脑上双击就能玩。”对方回了一句“对能玩就行”。这一条消息的价值在于把“俄罗斯方块”五个字翻译成了可验证的验收条件。哪怕最后需求方改口你手里也有聊天记录作为依据。50块钱的单子当然不值得走什么纠纷流程但沟通本身就是专业感的体现也是拿好评的关键。很多新手觉得接单就是闷头写代码其实先花两分钟把边界锁死才是整个项目里性价比最高的动作。我最终定义的最小交付范围是这样的标准10乘20棋盘七种经典方块I、O、T、S、Z、J、L键盘控制左右移动、旋转、加速下落、一键落底满行消除、得分、等级随消行数量提升游戏结束判定与重新开始单文件交付不依赖任何外部库或网络资源需求拆解还有一个反方向的原则不要因为你觉得某个功能酷就擅自加进去。以前我接过一个单好心加了一套成就系统结果需求方觉得操作复杂差点要求退款。俄罗斯方块经典玩法本身就足以撑起验收任何多余交互都可能变成对方眼里的使用门槛。50块的单子克制是美德。2. 技术方案怎么选原生HTMLJS单文件2.1 不引入框架的核心理由俄罗斯方块逻辑不复杂但不少人一上来就想着上Vue、React或者Phaser游戏引擎。我劝你先冷静。接单交付和兴趣爱好最大的区别是交付物要“干净”“可解释”“运行环境低门槛”。你给需求方一个需要npm install、再启动dev server的项目对方当场就崩了就算只维护给自己用也没必要把工程化复杂度拉满。我选择原生HTML加JavaScript、零依赖实现核心理由有三个。一是单文件即可运行复制代码保存成tetris.html浏览器双击打开就完事需求方和使用者都零成本。二是代码逻辑暴露在明面上对方以后要改方块颜色、改下落速度直接搜索关键词就能定位后续维护容易。三是这种逻辑规模用原生实现完全够用引入框架反而会让简单的数组和定时器逻辑包一层壳出问题更难排查。还有一层很现实的原因报价只有50元开发时间必须控制在一两小时以内。如果花三天做一个带工程化脚手架的版本那是浪费自己的时间。接这种单的首要原则永远是控制成本而不是炫技。2.2 棋盘、方块与游戏循环的数据设计写俄罗斯方块之前你先把游戏世界抽象成数据。这一步想清楚后面所有代码都会顺畅。棋盘是一个20行10列的二维数组初始值全是0代表空格。方块落定后对应位置写入一个颜色字符串代表被占用。渲染每一帧时只需要遍历这个数组碰到有值的格子就在Canvas上画一个色块。数据与渲染彻底分开逻辑清晰也不容易出bug。正在下落的方块我用一个带shape、x、y、color四个字段的对象保存。shape是二维矩阵比如“田”字方块是[[1,1],[1,1]]长条是[[1,1,1,1]]。x和y表示这个矩阵左上角在棋盘坐标系中的位置。关键要记住方块在落地前并没有写进board数组它是“半空中”的只有碰撞落地后才“烧录”进棋盘。经典俄罗斯方块的棋盘就是10列20行这个尺寸不是我随意定的而是这么多年游戏市场里被验证过的标准体验。给需求方做东西遵循用户脑中已有的认知模型最安全你甚至不用解释对方玩起来就是“那个味儿”。游戏循环我用最可靠的方案setInterval定时器。默认每500毫秒执行一次下落等级提升后缩短间隔。手动按键是在定时器之外的独立事件监听里处理的两者不冲突因为整局只有一个timer在推进时间按键只负责改坐标不会重复触发下落。2.3 用Canvas还是DOM渲染渲染方式也值得说一句。我选Canvas因为俄罗斯方块的画面本质是网格色块用fillRect一个格子一个格子画性能和代码量都是最优解。如果用DOM做网格每个格子是一个div状态更新时要操作几百个节点代码繁琐节点一多性能还会明显下降。Canvas看起来像底层绘图API但在这种固定网格游戏里反而最直接。我提前把格子大小定义为20像素所以Canvas宽200、高400。这个尺寸在普通电脑屏幕上很舒服也适合嵌入任意网页区域。后续想扩大棋盘或做手机适配只需要改动格宽常量重绘逻辑不用动。另外Canvas是浏览器原生API不需要引入第三方库这正好与单文件交付的需求闭环。3. 核心实现拆解方块、旋转与碰撞检测3.1 七种方块的定义和随机生成俄罗斯方块玩法再多样核心素材永远是那七个经典形状长条I、方块O、T形、S形、Z形、J形、L形。我在代码里用一个二维数组全部定义好const shapes [ [[1,1,1,1]], // I [[1,1],[1,1]], // O [[0,1,0],[1,1,1]], // T [[0,1,1],[1,1,0]], // S [[1,1,0],[0,1,1]], // Z [[1,0,0],[1,1,1]], // J [[0,0,1],[1,1,1]] // L ]; const colors [#00f0f0,#f0f000,#b000f0,#f00000,#00f000,#f0a000,#0000f0];这里的“1”代表形状占位真正着色时用colors里对应的值。这样形状定义和颜色解耦想改配色只动一个数组。随机生成方块的方式很简单随机取一个下标再用深拷贝生成独立副本。新手最容易忽视的坑生成新方块必须深拷贝不能直接引用原数组。旋转操作会原地改写矩阵共用引用会让第一轮的旋转污染后续所有方块而且这种bug很隐蔽不是每次都触发。3.2 旋转矩阵与踢墙修正旋转是俄罗斯方块里最容易写错的部分。你需要把当前矩阵顺时针转90度代码可以用两层循环实现先按列读取原矩阵再从下往上取每列元素结果就是顺时针旋转后的矩阵。但纯旋转还不够玩家贴着墙按旋转时转出来的形状很可能会跑出屏幕外或者与已固定方块重叠。如果直接禁止旋转手感会非常差。标准做法叫踢墙修正先尝试原地旋转如果碰撞就往左或右平移一到三格找到能落的位置再用。我在代码里用offset记录修正值最多尝试左右各3格。这个逻辑不需要复杂但能明显提升贴边旋转的体验。第一次写俄罗斯方块的人往往会漏掉它结果就是经常“转不了”需求方立刻判定交付的东西不行。3.3 碰撞检测、落地固定与消行计分碰撞检测是所有动作安全检查的后端。每次移动、旋转、下落前都调用collide方法传入目标shape和偏移量(dx, dy)。它遍历shape中每个有值的格子检查新位置是否碰到边界或已有方块。碰边界就是x小于0、x大于等于10、y大于等于20等碰已有方块则是board里对应位置有值。只要任何格子碰撞操作就被禁止。当一个方块无法再下落时调用solidify把它写进board数组。这里有个容易忽略的细节新生成的方块刚出现时如果它的位置已经和顶部堆叠区域重叠按经典规则必须游戏结束。我通过在newBlock后立刻检测一次碰撞来实现这个判定。同时保留对y小于0的检查覆盖旋转在顶部地带可能产生的越界情况。消行处理也直接从棋盘最下面一行往上检查某行所有格子都非空就说明满了用splice删除这一行再在棋盘顶部unshift一行全0的新行。由于数组是引用类型这个操作会同步影响下一次渲染。计分规则用经典方案消1行100分、2行300分、3行500分、4行800分再乘以当前等级。每消10行升一级等级越高下落速度越快间隔从500毫秒逐步逼近100毫秒。这里补一个逻辑细节消行时用splice加unshift方案有同行下标变化的坑。因为删除一行会让上面所有内容整体下移如果连续消多行直接按原下标继续遍历可能漏检。我习惯在消行后让当前下标反向自增一次重新检查当前位置这样连续消行也能正确应对。4. 完整代码与交付演示4.1 tetris.html完整源码以下就是这单交付的完整代码没有外部依赖没有构建步骤。复制到任意文件命名为tetris.html浏览器打开就能玩。我交付给买家的版本去掉注释更精简核心逻辑完全一致。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title俄罗斯方块/title style body { background: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; color: #eee; flex-wrap: wrap; } #game { border: 2px solid #e94560; } #info { margin-left: 20px; font-size: 18px; line-height: 2; } h1 { font-size: 24px; margin: 0 0 10px; color: #e94560; } #info div { background: #0f3460; padding: 4px 12px; margin: 6px 0; border-radius: 6px; } /style /head body canvas idgame width200 height400/canvas div idinfo h1俄罗斯方块/h1 div得分span idscore0/span/div div等级span idlevel1/span/div div消行span idlines0/span/div div stylemargin-top:10px;← →左右移动/div div↑旋转/div div↓加速下落/div div空格直接落底/div divP暂停/div /div script const COLS 10, ROWS 20, BLOCK 20; const canvas document.getElementById(game); const ctx canvas.getContext(2d); const shapes [ [[1,1,1,1]], [[1,1],[1,1]], [[0,1,0],[1,1,1]], [[0,1,1],[1,1,0]], [[1,1,0],[0,1,1]], [[1,0,0],[1,1,1]], [[0,0,1],[1,1,1]] ]; const colors [#00f0f0,#f0f000,#b000f0,#f00000,#00f000,#f0a000,#0000f0]; let board []; let current null; let score 0, lines 0, level 1; let dropInterval 500; let gameOver false; let paused false; let timer null; function initBoard() { board []; for (let i 0; i ROWS; i) { board.push(new Array(COLS).fill(0)); } } function newBlock() { const i Math.floor(Math.random() * shapes.length); const shape JSON.parse(JSON.stringify(shapes[i])); current { shape: shape, x: Math.floor((COLS - shape[0].length) / 2), y: 0, color: colors[i] }; if (collide(current.shape, 0, 0)) { gameOver true; clearInterval(timer); } } function drawCell(x, y, color) { ctx.fillStyle color; ctx.fillRect(x * BLOCK, y * BLOCK, BLOCK - 1, BLOCK - 1); ctx.strokeStyle #1a1a2e; ctx.strokeRect(x * BLOCK, y * BLOCK, BLOCK - 1, BLOCK - 1); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let r 0; r ROWS; r) { for (let c 0; c COLS; c) { if (board[r][c]) { drawCell(c, r, board[r][c]); } } } if (current) { for (let r 0; r current.shape.length; r) { for (let c 0; c current.shape[0].length; c) { if (current.shape[r][c]) { drawCell(current.x c, current.y r, current.color); } } } } if (gameOver) { ctx.fillStyle rgba(0,0,0,0.7); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle #fff; ctx.font bold 20px Arial; ctx.textAlign center; ctx.fillText(游戏结束, canvas.width / 2, canvas.height / 2 - 10); ctx.fillText(按 R 重开, canvas.width / 2, canvas.height / 2 20); } } function collide(shape, dx, dy) { for (let r 0; r shape.length; r) { for (let c 0; c shape[0].length; c) { if (shape[r][c]) { const nx current.x c dx; const ny current.y r dy; if (nx 0 || nx COLS || ny ROWS) return true; if (ny 0 board[ny][nx]) return true; } } } return false; } function solidify() { for (let r 0; r current.shape.length; r) { for (let c 0; c current.shape[0].length; c) { if (current.shape[r][c]) { const y current.y r; const x current.x c; if (y 0) { gameOver true; clearInterval(timer); return; } board[y][x] current.color; } } } clearLines(); } function clearLines() { let cleared 0; for (let r ROWS - 1; r 0; r--) { const fullRow board[r].every(v v); if (fullRow) { board.splice(r, 1); board.unshift(new Array(COLS).fill(0)); r; cleared; } } if (cleared 0) { score [0, 100, 300, 500, 800][cleared] * level; lines cleared; level Math.floor(lines / 10) 1; dropInterval Math.max(100, 500 - (level - 1) * 40); clearInterval(timer); timer setInterval(tick, dropInterval); } } function rotate() { const shape current.shape; const rows shape.length; const cols shape[0].length; const rotated []; for (let i 0; i cols; i) { const row []; for (let j rows - 1; j 0; j--) { row.push(shape[j][i]); } rotated.push(row); } let offset 0; if (collide(rotated, 0, 0)) { for (let k 1; k 3; k) { if (!collide(rotated, k, 0)) { offset k; break; } if (!collide(rotated, -k, 0)) { offset -k; break; } } if (offset 0) return; } current.shape rotated; current.x offset; } function moveLeft() { if (!collide(current.shape, -1, 0)) current.x--; } function moveRight() { if (!collide(current.shape, 1, 0)) current.x; } function moveDown() { if (!collide(current.shape, 0, 1)) { current.y; return true; } solidify(); if (!gameOver) newBlock(); return false; } function hardDrop() { if (gameOver || paused) return; while (moveDown()) {} draw(); } function tick() { if (gameOver || paused) return; moveDown(); draw(); updateInfo(); } function updateInfo() { document.getElementById(score).textContent score; document.getElementById(level).textContent level; document.getElementById(lines).textContent lines; } document.addEventListener(keydown, function(e) { if (gameOver e.key r) { reset(); return; } if (gameOver) return; if (e.key p) { paused !paused; return; } if (paused) return; e.preventDefault(); if (e.key ArrowLeft) moveLeft(); else if (e.key ArrowRight) moveRight(); else if (e.key ArrowDown) { if (moveDown()) score 1; } else if (e.key ArrowUp) rotate(); else if (e.key ) hardDrop(); draw(); updateInfo(); }); function start() { initBoard(); score 0; lines 0; level 1; dropInterval 500; gameOver false; paused false; newBlock(); clearInterval(timer); timer setInterval(tick, dropInterval); draw(); updateInfo(); } function reset() { start(); } start(); /script /body /html4.2 交付物使用方法与效果说明整个交付物只有这一个文件。为了照顾非技术用户我还特意在自测通过后给需求方发了一段使用说明文件保存后双击打开如果浏览器弹安全提示选择“仍然打开”进入页面后方向键控制移动和旋转空格键直接落底按R重开。不需要安装软件也不需要联网加载任何资源。很多新手交付时把文件一扔就完事我建议至少把控制方式写清楚。一方面很大一部分用户根本不会自己摸索“空格键能落底”另一方面你主动写清楚说明对方在验收时遇到“功能找不到”的情况会更倾向于归因于自己没看说明而不是“你交付的东西有问题”。这不是甩锅这是交付体验管理。5. 测试翻车实录与交付防坑检查单5.1 六个容易翻车的细节这一节写这类小游戏开发里我实际踩过、或者常见到会影响验收的坑。你如果能一次通过测试大概率是提前避开了这几点。第一是数组引用污染。刚才强调过生成新方块时不深拷贝形状矩阵旋转几次后经典方块的原始定义会被改得面目全非而且bug很隐蔽。我用JSON深拷贝解决虽然简单粗暴但在这个规模里足够可靠。第二是旋转越界处理不及时。只做旋转不做踢墙修正贴墙旋转时功能直接失效玩家体验会差到当场退款。做完旋转一定要联动边界检测并尝试横向偏移。第三是定时器重复初始化。常见于消行后重置下落间隔如果忘记先clearInterval两个timer同时跑方块下落速度直接翻倍甚至越滚越快。我坚持每次重置前先清理保证全局只有一条定时链路。第四是方向键导致页面滚动。浏览器里按空格和方向键默认会滚动页面游戏画面会跟着乱跑。解法是在keydown里调用e.preventDefault()。这个细节没处理体验直接减半。第五是加速下落的得分逻辑。按下方向键下移一步很多实现会忘记给每一步加分导致冲分机制不完整。其实只在moveDown成功后给score加1分即可配合落底功能计分体系才完整。第六是事件监听的作用域。有人喜欢把键盘事件挂在window上容易跟页面其他交互冲突。我建议挂在document上专门处理游戏按键并且在暂停、结束时及时返回拦截避免用户翻页时误触。5.2 交付前自测清单我把每次交付前必做的一轮检查整理成表照着走一遍基本能杜绝低级返工检查项预期行为最容易出错的地方初始状态游戏自动开始方块从顶部下落timer未启动或启动两次左右移动方块贴边界能停不能穿墙collide中x的边界判断写反旋转贴墙贴地时仍能旋转或尝试偏移缺少踢墙修正加速下落按键频率和下落速度成正比每步加1分频控与得分逻辑缺失一键落底方块瞬间到底并立即生成新方块落底循环后未重新渲染消行计分消1行100分升级后速度变快消行后未重新检查连续行游戏结束顶部堆叠时弹提示按R能重开timer未清理重开后双重下落页面滚动键盘操作时不滚屏缺少preventDefault自测时不要坐在电脑前按两下就说完成。我建议按表格一项一项走至少完整玩三局手动加速冲到第10级确认高速下落时没有明显按键延迟或掉帧。交付后买家测试时不会手下留情自测越狠返工越少。6. 50元小单怎么接出长期价值6.1 小单的运营价值不只是50块这单报价50实际到手50说句实在话真正的收益在别处。副业角度讲小单是建立交付口碑和作品集最便宜的方式。你花一个多小时换来一个能公开分享的成品、一条真实买家评价、一次对别人说“我做过游戏开发”的底气。这些东西的长期价值远超50元。我自己的习惯是每完成一个接单项目就把核心代码整理成可公开的demo放进作品集同时在社交平台发一条简短的“小游戏交付”记录。不要觉得展示低价单丢人很多高价客户恰恰是看到你低成本解决实际问题的能力才来咨询。一个没有作品、只有口头的开发者报价再高也难让人信任。交付后还有一个低成本动作容易被忽略隔几天发条消息问问对方有没有遇到问题。这一下就把一次性交易变成了可复购的服务关系。很多需求方手上不止一个网站改造需求这次小游戏只是试探你的靠谱程度决定了他会不会把下一个单价更高的单子也交给你。6.2 从俄罗斯方块出发的进阶方向如果需求方和我一样想在这个项目上继续沉淀扩展点其实非常多。第一是体验层增加下一个方块的预览窗口、幽灵投影位置提示、消除时的闪烁动画和音效改动都不复杂却能把产品完整度拉高一截。第二是模式层加入无重力模式、限时冲分模式、双人对战模式每一类模式都是独立卖点。第三是技术层补上移动端touch事件的滑动支持让手机也能玩再把代码接到静态托管上生成一个链接发给对方直接在线试玩。只要底层是现在这套清晰逻辑往哪个方向加功能都不费劲。如果你想继续练技术建议把一锅炖的代码拆成board、render、control三个模块再用class把逻辑封装起来。并不是要求每一单都是优雅工程但多写一次重构就多一分底气下一次遇到类似项目开发速度会快很多。接这类小单还有一个隐藏好处它锻炼的是“把成熟玩法快速实现”的能力。俄罗斯方块、扫雷、贪吃蛇、Flappy Bird都是逻辑经典、边界清晰、测试简单的项目非常适合做副业练手。每熟练一个下一个同类型需求的成本都会断崖式下降。最后再分享一点我的个人体会别嫌单小关键是每一次交付都把“靠谱”两个字钉在买家心里。这个项目我交付完没有一锤子买卖而是在对方确认可用后多问了一句“需要我调整下落速度或者配色吗”对方回了句“暂时不用辛苦了”。这一句肯定比你多跑十单面试都管用。如果你正准备开始接副业小单拿俄罗斯方块这类项目起步比从零接一个需求模糊的大型项目靠谱得多试试就知道。