尧图网页设计 
前阵子接了个小单子报价50块做一个经典俄罗斯方块小游戏。说实话看到需求的那一刻我第一反应是这种东西网上随便搜搜就是一大把怎么会有人愿意花钱买。等真做完一整个流程我才慢慢回过味来这种报价50的小单在副业里恰恰是很好的练手项目——需求明确、交付周期短、试错成本低而且能让你完整走一遍“接单—实现—交付—收款”的闭环。这篇文章就把这单从需求沟通到技术实现的过程摊开聊聊适合刚开始接副业、手头正缺小项目练手的朋友也适合想快速搭出一个可交付版本俄罗斯方块的人参考。1. 报价50的俄罗斯方块单子先算清楚这笔账接单之前先把这笔账算明白才不会在开发中途觉得亏。50块这个价格放在外包市场上属于典型低价单但它并不是一无是处关键在于你怎么用它。1.1 这种需求从哪来谁会花50块买个经典小游戏接单渠道不同需求的画风完全不一样。我这次遇到的需求方是要做一个个人网站的心理测试页想放一个小游戏当“彩蛋”引流。他不需要多复杂的功能只要打开能玩、界面不丑、别一卡一卡就行。这也是低价俄罗斯方块单最常见的来源个人站长、学生课程作业、朋友的朋友想做表白页面、小公司想测试外包方的沟通和交付水平。这类需求有个共同点对方不是真缺一个小游戏而是缺一个“能快速拿到手、还不贵”的成品。对他来说50块买的是省时间不是买多厉害的技术。所以需求描述往往很模糊可能就几句话“做一个俄罗斯方块能玩就行。”这种单子最大的风险不是技术要求高而是需求边界不清。如果你不问清楚后面加个音效、加个手机适配、改个配色都可能变成口头扯皮。我的做法是接单前先确认三件套运行环境电脑还是手机、界面语言中文还是英文、有没有自定义要求改颜色、加分、加音效。问完这三个需求方大概率会觉得自己花50块买到的是一个“认真对待”的服务。后面交付验收也会顺很多。1.2 时间成本拆解50块不是单价是入场券接这个单我实际花的时间大致是这样的需求沟通和确认约30分钟核心逻辑开发和调试约3小时样式美化加移动端适配约1.5小时打包、写说明、交付和售后答疑约1小时合计约6小时。按50块来算时薪不到10块确实不好看。但换个角度看这6小时的产出不只是50块。俄罗斯方块虽然是个经典老游戏但它的核心逻辑包含几个通用基础功二维数组状态管理、矩阵旋转、碰撞检测、基于时间的游戏循环。这些点在整个游戏开发里都属于高频通用技能你自己平时很难为了练一个碰撞检测专门搭个项目但接了这一单就被需求推着把整条链路完整走了一遍。做完了你手里还多一个可以直接复用的模板以后再接同类单子报价翻倍是正常操作开发时间反而能压到两三个小时。这就是低价单的底层价值它不是时薪换算而是用一次低成本实战换一套以后能反复出手的技能包和模板。第一笔副业收入更多是买一次实弹演练。2. 技术方案选型为什么坚持HTMLJS单文件交付技术选型没有想象中复杂我对这个项目的核心要求只有一个交付后对方拿到就能玩。有了这个前提方案基本就锁定在纯HTMLJavaScript做单文件交付。2.1 交付硬指标双击就能玩需求方不是程序员他不会配环境不熟悉Node更不可能打开命令行去装依赖。如果他拿到的是一个需要npm install、再npm run dev才能跑的项目那这个单子就不可能验收通过。所以“双击打开浏览器就能玩”是硬指标。这个硬指标直接把所有需要构建步骤的方案排除了。React、Vue这类框架当然也能做俄罗斯方块但为了一个50块的小游戏去引入构建工具链显然不合理文件多了、依赖多了、部署复杂了任何一个环节出错都要你来解释和背锅。选HTMLJS单文件还有一个隐性收益对方拿到的是一个干干净净的tetris.html他放进自己的网站、发给朋友、存到U盘里都不会出问题。交付物越简单售后的坑越少。2.2 单文件方案的边界在哪里单文件不是万能的它的边界必须提前知道不方便做成后台动态资源不适合塞大量图片和外部库也不适合需求方要求“接入某某平台API”的情况下直接套用。但就俄罗斯方块这个需求来说单文件完全够用。我实际交付时压缩包里只有两个文件tetris.html和使用说明.txt。说明里写清楚了三件事怎么打开游戏、键盘怎么操作、如果想改界面配色或方块速度可以改哪几行。需求方看完没有追问说明交付物完全在他的预期之内。2.3 渲染棋盘用Canvas还是DOM网格实现俄罗斯方块渲染层有两个常见选择一种是搞一个20行10列的CSS网格把每个格子渲染成一个div节点方块移动时改节点的背景色另一种是用Canvas画布在每一帧里把整个棋盘画出来。我选了Canvas。原因很简单俄罗斯方块的核心是“用二维数组描述状态”Canvas只需要把这个数组按格子画进画布移动和消除时不用操作一堆DOM节点逻辑更集中性能也更稳。纯DOM做法最大问题是200个格子节点全挂上去之后页面结构很啰嗦样式代码多改起来麻烦。Canvas还有一个好处是绘制预览下一个方块时很方便新建一个小的画布用同一个方块数据画一遍就行。代码不用维护两套渲染方式。3. 俄罗斯方块核心逻辑拆解方块、旋转和碰撞在动手写代码之前我建议先把几个核心概念理清楚。俄罗斯方块看着简单但逻辑拆开无非四件事棋盘怎么表示、方块怎么定义、旋转怎么计算、碰撞怎么判断。这四个点想明白了后面的代码就是一马平川。3.1 10×20棋盘和二维数组游戏世界的坐标系俄罗斯方块的棋盘是一个10列、20行的网格。代码里我用一个二维数组来表示它const COLS 10; const ROWS 20; let board Array.from({ length: ROWS }, () Array(COLS).fill(0));这里有个特别容易踩的坑数组的第一维是行第二维是列。也就是说访问第3行第5列时要写board[3][5]不是board[5][3]。我第一次顺手写反过一次结果所有移动和旋转都像照了镜子一样反着来找问题找了快半小时。后面我养成了一个习惯凡是涉及二维数组都先在本子上画一个10×20的格子图标好行号和列号再写代码。棋盘里每个格子只有两种状态空或者有颜色。空用0表示有颜色就存颜色字符串。用truthy/falsy判断时0是false颜色字符串是true这个特性后面在碰撞检测里会很方便。3.2 七种方块与用矩阵表示的旋转俄罗斯方块有7种标准方块每种都可以用一个或几个小矩阵定义。矩阵里1表示有方块0表示空const SHAPES [ { matrix: [[1,1,1,1]], color: #00f0f0 }, // I { matrix: [[1,1],[1,1]], color: #f0f000 }, // O { matrix: [[0,1,0],[1,1,1]], color: #a000f0 }, // T { matrix: [[0,1,1],[1,1,0]], color: #00f000 }, // S { matrix: [[1,1,0],[0,1,1]], color: #f00000 }, // Z { matrix: [[1,0,0],[1,1,1]], color: #0000f0 }, // J { matrix: [[0,0,1],[1,1,1]], color: #f0a000 } // L ];旋转的计算是一个经典的矩阵操作先转置再把每一行倒过来。写成代码是这样的function rotateMatrix(matrix) { const rows matrix.length; const cols matrix[0].length; const result Array.from({ length: cols }, () Array(rows).fill(0)); for (let r 0; r rows; r) { for (let c 0; c cols; c) { result[c][rows - 1 - r] matrix[r][c]; } } return result; }这里最大的坑也在行列数互换上一个2行3列的矩阵旋转后会变成3行2列很多人没注意导致旋转完成之后循环越界或者直接渲染错乱。记得要把旋转结果的行列长度当成变量而不是写死原矩阵的尺寸。3.3 碰撞检测与消行全游戏最容易写错的两个点碰撞检测的逻辑说穿了就是一句话先假设移动再看目标位置能不能站住。具体来说每次尝试向左、向右、向下移动或者旋转之前都用当前方块的矩阵加上目标坐标去和棋盘数组对一遍只要发现有任何一个格子越界或者和棋盘上已有方块重叠就判定为不合法。function isValid(matrix, x, y) { const rows matrix.length; const cols matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (matrix[r][c]) { const nx x c; const ny y r; if (nx 0 || nx COLS || ny ROWS) return false; if (ny 0 board[ny][nx]) return false; } } } return true; }注意那个ny 0的判断。方块刚生成时可能有一部分在棋盘顶部的可见区域之上这个判断允许负坐标出现否则新方块还没落进来就被误判成撞顶了。这个问题我在初版代码里漏了结果方块消失不见还以为是生成逻辑错了。消行是另一个容易出问题的地方。正确做法是从棋盘底部往上扫描发现满行就删掉这一行再在顶部补一个空行function clearRows() { let cleared 0; for (let y ROWS - 1; y 0; ) { if (board[y].every(cell cell)) { board.splice(y, 1); board.unshift(Array(COLS).fill(0)); cleared; } else { y--; } } ... }这里有个细节很多人栽过splice删除一行之后原来在同一位置上面的行会掉下来所以此时我们的y不能自减而是要继续检查同一个索引因为那里已经是新的一行了。只有当这一行不满才把y往上挪。作者当初第一次写的时候直接放了个for循环自增结果一次消一行没问题一次消两行就总有一行消不掉。4. 实操环节直接复制这套代码保存为tetris.html就能跑理论基础说完了下面进入真正动手的部分。我把这套代码按“页面骨架—游戏逻辑—完整实现—自定义调整”的顺序讲最后给出一份可以直接复制保存的完整版本。4.1 先搭页面骨架和样式页面结构不需要多复杂核心是一个画布加一个操作面板。画布负责渲染游戏棋盘操作面板放“下一个方块预览”、得分、等级以及暂停和重新开始两个按钮。样式上我用了深色背景方便让彩色方块跳出来。棋盘是一个200×400的Canvas对应10列×20行、每格20像素。页面居中显示主容器用了flex布局面板固定在棋盘右侧。div classwrap canvas idboard width200 height400/canvas div classside div classnext-wrap h3下一个/h3 canvas idnext width100 height100/canvas /div div classinfo h3得分/h3 p idscore0/p h3等级/h3 p idlevel1/p /div div button classbtn onclicktogglePause()暂停/继续/button button classbtn onclickresetGame()重新开始/button /div /div /div样式方面有几个细节值得注意按钮要给出明显的点击反馈我用的是:active时降低透明度棋盘画布加了一个深色边框让棋盘边缘清晰可见下一个预览方块的小画布放在上方玩家扫一眼就知道接下来要出什么。4.2 游戏状态管理一局游戏就是一个状态机写俄罗斯方块之前我习惯先把状态列出来。整个游戏需要维护的全局变量其实就这些棋盘数组、当前方块、下一个方块、当前坐标、得分、等级、下落间隔、暂停状态、结束状态。初始化流程是创建新棋盘、清空分数和等级、随机生成一个方块作为当前方块再随机生成一个作为下一个方块然后启动游戏循环。游戏循环用requestAnimationFrame驱动每一帧都检查时间差超过下落间隔就执行一次下落。选择requestAnimationFrame而不是setInterval是因为前者在页面切走时会自动暂停不会积累一堆无用的定时回调而且它绑定显示刷新率动画更跟手。对游戏手感有明显提升。4.3 完整代码直接复制保存后浏览器打开就能玩下面这份代码就是交付版本为了贴出来方便大家直接抄作业我做了一点精简去掉了注释里的大段说明但功能完整。你把它另存为tetris.html用浏览器打开就能直接玩。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title俄罗斯方块小游戏/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1a1a2e; color: #eee; font-family: Microsoft YaHei, Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .wrap { display: flex; gap: 16px; padding: 16px; background: #16213e; border-radius: 12px; } #board { border: 2px solid #0f3460; background: #0f3460; display: block; } .side { width: 140px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; } .side h3 { font-size: 13px; color: #5c8fc2; margin-bottom: 4px; } .next-wrap { background: #0f3460; border-radius: 8px; padding: 10px; text-align: center; } #next { display: block; margin: 0 auto; } .info p { font-size: 20px; margin: 0 0 10px 0; } .btn { width: 100%; padding: 10px; border: 0; border-radius: 6px; background: #e94560; color: #fff; font-size: 14px; cursor: pointer; margin-top: 10px; } .btn:active { opacity: 0.8; } /style /head body div classwrap canvas idboard width200 height400/canvas div classside div classnext-wrap h3下一个/h3 canvas idnext width100 height100/canvas /div div classinfo h3得分/h3 p idscore0/p h3等级/h3 p idlevel1/p /div div button classbtn onclicktogglePause()暂停/继续/button button classbtn onclickresetGame()重新开始/button /div /div /div script const canvas document.getElementById(board); const ctx canvas.getContext(2d); const nextCanvas document.getElementById(next); const nextCtx nextCanvas.getContext(2d); const CELL 20; const COLS 10; const ROWS 20; const SHAPES [ { matrix: [[1,1,1,1]], color: #00f0f0 }, { matrix: [[1,1],[1,1]], color: #f0f000 }, { matrix: [[0,1,0],[1,1,1]], color: #a000f0 }, { matrix: [[0,1,1],[1,1,0]], color: #00f000 }, { matrix: [[1,1,0],[0,1,1]], color: #f00000 }, { matrix: [[1,0,0],[1,1,1]], color: #0000f0 }, { matrix: [[0,0,1],[1,1,1]], color: #f0a000 } ]; let board, current, next, score, level, dropInterval, paused, gameOver, animationId, lastDrop; function createBoard() { board Array.from({ length: ROWS }, () Array(COLS).fill(0)); } function randomPiece() { return JSON.parse(JSON.stringify(SHAPES[Math.floor(Math.random() * SHAPES.length)])); } function spawnPiece() { if (next) { current next; } else { current randomPiece(); } current.x Math.floor((COLS - current.matrix[0].length) / 2); current.y 0; next randomPiece(); if (!isValid(current.matrix, current.x, current.y)) { gameOver true; } } function rotateMatrix(matrix) { const rows matrix.length; const cols matrix[0].length; const result Array.from({ length: cols }, () Array(rows).fill(0)); for (let r 0; r rows; r) { for (let c 0; c cols; c) { result[c][rows - 1 - r] matrix[r][c]; } } return result; } function isValid(matrix, x, y) { const rows matrix.length; const cols matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (matrix[r][c]) { const nx x c; const ny y r; if (nx 0 || nx COLS || ny ROWS) return false; if (ny 0 board[ny][nx]) return false; } } } return true; } function mergePiece() { const rows current.matrix.length; const cols current.matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (current.matrix[r][c]) { const ny current.y r; const nx current.x c; if (ny 0) board[ny][nx] current.color; } } } } function clearRows() { let cleared 0; for (let y ROWS - 1; y 0; ) { if (board[y].every(cell cell)) { board.splice(y, 1); board.unshift(Array(COLS).fill(0)); cleared; } else { y--; } } if (cleared 0) { const points [0, 100, 300, 500, 800][cleared]; score points; level Math.floor(score / 1000) 1; dropInterval Math.max(150, 1000 - (level - 1) * 80); updateInfo(); } } function moveLeft() { if (!gameOver !paused isValid(current.matrix, current.x - 1, current.y)) { current.x--; } } function moveRight() { if (!gameOver !paused isValid(current.matrix, current.x 1, current.y)) { current.x; } } function moveDown() { if (gameOver || paused) return; if (isValid(current.matrix, current.x, current.y 1)) { current.y; } else { mergePiece(); clearRows(); spawnPiece(); if (gameOver) { draw(); alert(游戏结束得分 score); } } } function hardDrop() { if (gameOver || paused) return; while (isValid(current.matrix, current.x, current.y 1)) { current.y; } moveDown(); } function rotate() { if (gameOver || paused) return; const rotated rotateMatrix(current.matrix); const oriX current.x; const kicks [0, -1, 1, -2, 2]; for (const dx of kicks) { current.x oriX dx; if (isValid(rotated, current.x, current.y)) { current.matrix rotated; return; } } current.x oriX; } function updateInfo() { document.getElementById(score).textContent score; document.getElementById(level).textContent level; } function drawCell(c, px, py, size, color) { c.fillStyle color; c.fillRect(px, py, size, size); c.strokeStyle #111; c.strokeRect(px, py, size, size); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y 0; y ROWS; y) { for (let x 0; x COLS; x) { if (board[y][x]) { drawCell(ctx, x * CELL, y * CELL, CELL, board[y][x]); } else { ctx.fillStyle #0a1a30; ctx.fillRect(x * CELL, y * CELL, CELL, CELL); ctx.strokeStyle #09203a; ctx.strokeRect(x * CELL, y * CELL, CELL, CELL); } } } if (current !gameOver) { const rows current.matrix.length; const cols current.matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (current.matrix[r][c]) { drawCell(ctx, (current.x c) * CELL, (current.y r) * CELL, CELL, current.color); } } } } nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height); if (next) { const rows next.matrix.length; const cols next.matrix[0].length; const cell 20; const offsetX (nextCanvas.width - cols * cell) / 2; const offsetY (nextCanvas.height - rows * cell) / 2; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (next.matrix[r][c]) { drawCell(nextCtx, offsetX c * cell, offsetY r * cell, cell, next.color); } } } } } function loop(time) { if (!paused !gameOver) { if (time - lastDrop dropInterval) { moveDown(); lastDrop time; } } draw(); animationId requestAnimationFrame(loop); } function togglePause() { if (gameOver) return; paused !paused; if (!paused) lastDrop performance.now(); } function resetGame() { cancelAnimationFrame(animationId); createBoard(); score 0; level 1; dropInterval 1000; paused false; gameOver false; current null; next null; spawnPiece(); updateInfo(); lastDrop performance.now(); requestAnimationFrame(loop); } document.addEventListener(keydown, function (e) { const keys [ArrowLeft, ArrowRight, ArrowDown, ArrowUp, ]; if (keys.indexOf(e.key) ! -1) e.preventDefault(); if (gameOver) return; switch (e.key) { case ArrowLeft: moveLeft(); break; case ArrowRight: moveRight(); break; case ArrowDown: moveDown(); break; case ArrowUp: rotate(); break; case : hardDrop(); break; } }); resetGame(); /script /body /html这段代码我实测过保存后用Chrome、Edge、Firefox打开都能直接玩控制台无报错。如果你把它发给需求方记得告诉对方用浏览器打开不是双击之后选择记事本。4.4 交付前值得做的四个自定义调整点复制完代码只是一个开始真正交付前我建议你做几处调整让成品更符合买家的实际场景。第一改标题。代码里的title目前是“俄罗斯方块小游戏”。如果需求方要放在心理测试页里可以考虑改成“解压小游戏”之类更贴合页面的名字。第二调配色。深色背景下方块用的是经典亮色。如果需求方网站是浅色主题可以把背景色和棋子颜色整体调整白色背景下建议给方块加浅色边框否则边界不明显。第三定调整初始速度。代码里dropInterval 1000表示每1000毫秒下落一格。如果买家是新手或者主打休闲解压可以把初始间隔调到1200毫秒体验更慢更友好如果想要挑战感更强可以降到700毫秒。第四考虑加分音效。这个我一般不在默认交付中做如果需求方主动要再加。加音效最轻量的方式是使用Web Audio API生成简单Beep音不引入外部音频文件保持单文件交付。5. 实测排雷交付前自己踩过的坑和修正代码写完不等于能交付。我自己在测试过程中踩了几个坑这里全部列出来帮你省掉排查时间。5.1 旋转越界不加踢墙直接穿墙初版旋转逻辑只做了一件事把当前矩阵旋转90度然后判断新矩阵在原坐标是否合法。实测发现当I型方块靠在左边界时一旋转新矩阵的一部分跑出画面外直接消失。俄罗斯方块的常规做法是加“踢墙”旋转的时候如果原始坐标不合法就尝试把方块左移一格、右移一格、左移两格、右移两格找到一个能放下的位置就落位。这就是我在代码里写的kicks数组const kicks [0, -1, 1, -2, 2];顺序很重要。0对应原地旋转如果原地不行优先小距离偏移再尝试大距离偏移。这套简化版踢墙基本覆盖90%的场景够用了。如果你想让旋转手感更丝滑可以考虑参考更完整的SRS标准那个会针对每种方块、每次旋转方向定义不同的偏移表但对50块的单子来说这个简化版完全够。5.2 键盘事件和页面滚动冲突空格键在浏览器里默认有“滚动当前页面”的行为方向键也一样。如果游戏里按空格做硬降不阻止默认事件玩家每按一次整个页面就会上下抖动一次。玩起来非常难受。解决方案是在键盘监听器里先判断按键类型属于游戏操作键就立即preventDefault()然后再执行游戏逻辑const keys [ArrowLeft, ArrowRight, ArrowDown, ArrowUp, ]; if (keys.indexOf(e.key) ! -1) e.preventDefault();这里还有个顺序细节preventDefault要在判断gameOver之前就执行。如果游戏结束了按方向键应该让页面停止滚动而不是让页面跟着滚所以我把它放到了最前面。5.3 移动端没有触控按钮等于没有移动端我交第一版的时候只做了键盘控制心里想的是需求方肯定在电脑上玩。结果需求方问了一句“手机能访问吗”我瞬间意识到单文件方案的优势——他可以直接把这个html传到服务器上手机浏览器打开。但手机没有键盘所以默认版本在手机上只能看不能玩。为了应对这个潜在要求我加上了一行移动端操作按钮的说明方案在wrap下方加一排按钮分别绑定向右、向左、旋转、软降、硬降点击事件直接调用对应的函数。由于游戏逻辑本身和输入层是分开的加按钮不需要改动任何核心代码只需要在HTML里加节点在CSS里加布局样式再给每个onclick绑定游戏函数即可。如果你在交付时不确定需求方会不会在手机上用我建议直接把这套按钮做进去。加不了几行代码但在对方那里的体验评价完全不一样。5.4 字体和页面缩放问题俄罗斯方块本身不需要很多文字但哪怕只有“得分”“等级”两个词字体的显示差异也会影响整体质感。Windows和macOS的中文默认字体不一样不设置字体栈的话在Linux设备上可能会显示成很难看的黑体。我在样式里加了font-family: Microsoft YaHei, Arial, sans-serif保底用系统无衬线字体观感基本稳定。页面缩放方面固定200×400的画布在小屏手机上可能会超出可视区域。我给.wrap做了居中处理并且在body上用了overflow: hidden避免小屏设备出现横向滚动条。如果你想要更彻底的移动端适配可以借CSS transform按屏幕宽度等比缩放整个游戏容器但这属于后话对大多数交付场景来说现阶段方案够了。6. 低价小单的交付心法50块也要有交付清单很多人觉得50块的活不值得认真交付这个想法恰恰是副业里最容易踩的坑。价格低不等于可以敷衍因为你要的不是这一单的50块而是后续可能出现的500块、5000块。6.1 需求确认阶段问清楚的三件事接单价越低的需求文字描述往往越含糊。“做一个俄罗斯方块”听起来明确但其中藏着大量未定问题有没有下一个方块预览有没有硬降有没有计分和等级颜色风格有没有偏好要中文界面还是英文界面我在动手前会把这些问题整理成一份简单的确认消息发给需求方让他选或者补充。这样做有两个好处第一避免开发到一半对方突然说“我想要尼克那个方块带音效”然后你只能返工第二让对方感觉到你是个靠谱的人而不仅仅是个写代码的。对低价单来说靠谱的感知价值往往比代码本身还重要。6.2 交付时多做一步之后单子自然来交付时我习惯做一个压缩包里面放两个文件游戏本体和一份极简使用说明。说明不写废话只交代三件事怎么打开、怎么操作、如果要改配色和速度可以改哪一行。这份说明对程序员来说可能没用但对非技术背景的需求方来说能救命。这单交付之后需求方一周后回来找我问了一次“怎么把游戏嵌到网页中间”那其实只是个iframe引用问题我回了一段三行代码。这种零成本售后换来的是对方把你的联系方式存成了“靠谱的那个做小游戏的”。低价单最大的价值往往不在第一单本身而在于是不是能借着一单建立信任为后面的需求做铺垫。6.3 低价单不是终点是可复用的起点做完这个俄罗斯方块我手里留下了一个经过实测、可复用的HTML模板。以后再遇到类似的经典小游戏需求——贪吃蛇、2048、扫雷——核心代码骨架都是一套思路二维数组状态、游戏循环、输入事件、画布渲染。只要拿到需求直接改方块定义和逻辑判断就行。我个人接单后的体会是低价单最值得做的不是那个价格而是通过一次真实的交付流程逼你把“不会的查会、不清楚的弄懂、偷懒的补上”。如果你也想接副业练手我建议别一上来就接复杂的交互项目先找个类似俄罗斯方块这样需求明确、逻辑经典、交付边界清晰的小单子跑一遍。做完之后你自然会知道下一单报价往哪儿定。 50块俄罗斯方块单子：纯HTML+JS实现经典小游戏全流程
前阵子接了个小单子报价50块做一个经典俄罗斯方块小游戏。说实话看到需求的那一刻我第一反应是这种东西网上随便搜搜就是一大把怎么会有人愿意花钱买。等真做完一整个流程我才慢慢回过味来这种报价50的小单在副业里恰恰是很好的练手项目——需求明确、交付周期短、试错成本低而且能让你完整走一遍“接单—实现—交付—收款”的闭环。这篇文章就把这单从需求沟通到技术实现的过程摊开聊聊适合刚开始接副业、手头正缺小项目练手的朋友也适合想快速搭出一个可交付版本俄罗斯方块的人参考。1. 报价50的俄罗斯方块单子先算清楚这笔账接单之前先把这笔账算明白才不会在开发中途觉得亏。50块这个价格放在外包市场上属于典型低价单但它并不是一无是处关键在于你怎么用它。1.1 这种需求从哪来谁会花50块买个经典小游戏接单渠道不同需求的画风完全不一样。我这次遇到的需求方是要做一个个人网站的心理测试页想放一个小游戏当“彩蛋”引流。他不需要多复杂的功能只要打开能玩、界面不丑、别一卡一卡就行。这也是低价俄罗斯方块单最常见的来源个人站长、学生课程作业、朋友的朋友想做表白页面、小公司想测试外包方的沟通和交付水平。这类需求有个共同点对方不是真缺一个小游戏而是缺一个“能快速拿到手、还不贵”的成品。对他来说50块买的是省时间不是买多厉害的技术。所以需求描述往往很模糊可能就几句话“做一个俄罗斯方块能玩就行。”这种单子最大的风险不是技术要求高而是需求边界不清。如果你不问清楚后面加个音效、加个手机适配、改个配色都可能变成口头扯皮。我的做法是接单前先确认三件套运行环境电脑还是手机、界面语言中文还是英文、有没有自定义要求改颜色、加分、加音效。问完这三个需求方大概率会觉得自己花50块买到的是一个“认真对待”的服务。后面交付验收也会顺很多。1.2 时间成本拆解50块不是单价是入场券接这个单我实际花的时间大致是这样的需求沟通和确认约30分钟核心逻辑开发和调试约3小时样式美化加移动端适配约1.5小时打包、写说明、交付和售后答疑约1小时合计约6小时。按50块来算时薪不到10块确实不好看。但换个角度看这6小时的产出不只是50块。俄罗斯方块虽然是个经典老游戏但它的核心逻辑包含几个通用基础功二维数组状态管理、矩阵旋转、碰撞检测、基于时间的游戏循环。这些点在整个游戏开发里都属于高频通用技能你自己平时很难为了练一个碰撞检测专门搭个项目但接了这一单就被需求推着把整条链路完整走了一遍。做完了你手里还多一个可以直接复用的模板以后再接同类单子报价翻倍是正常操作开发时间反而能压到两三个小时。这就是低价单的底层价值它不是时薪换算而是用一次低成本实战换一套以后能反复出手的技能包和模板。第一笔副业收入更多是买一次实弹演练。2. 技术方案选型为什么坚持HTMLJS单文件交付技术选型没有想象中复杂我对这个项目的核心要求只有一个交付后对方拿到就能玩。有了这个前提方案基本就锁定在纯HTMLJavaScript做单文件交付。2.1 交付硬指标双击就能玩需求方不是程序员他不会配环境不熟悉Node更不可能打开命令行去装依赖。如果他拿到的是一个需要npm install、再npm run dev才能跑的项目那这个单子就不可能验收通过。所以“双击打开浏览器就能玩”是硬指标。这个硬指标直接把所有需要构建步骤的方案排除了。React、Vue这类框架当然也能做俄罗斯方块但为了一个50块的小游戏去引入构建工具链显然不合理文件多了、依赖多了、部署复杂了任何一个环节出错都要你来解释和背锅。选HTMLJS单文件还有一个隐性收益对方拿到的是一个干干净净的tetris.html他放进自己的网站、发给朋友、存到U盘里都不会出问题。交付物越简单售后的坑越少。2.2 单文件方案的边界在哪里单文件不是万能的它的边界必须提前知道不方便做成后台动态资源不适合塞大量图片和外部库也不适合需求方要求“接入某某平台API”的情况下直接套用。但就俄罗斯方块这个需求来说单文件完全够用。我实际交付时压缩包里只有两个文件tetris.html和使用说明.txt。说明里写清楚了三件事怎么打开游戏、键盘怎么操作、如果想改界面配色或方块速度可以改哪几行。需求方看完没有追问说明交付物完全在他的预期之内。2.3 渲染棋盘用Canvas还是DOM网格实现俄罗斯方块渲染层有两个常见选择一种是搞一个20行10列的CSS网格把每个格子渲染成一个div节点方块移动时改节点的背景色另一种是用Canvas画布在每一帧里把整个棋盘画出来。我选了Canvas。原因很简单俄罗斯方块的核心是“用二维数组描述状态”Canvas只需要把这个数组按格子画进画布移动和消除时不用操作一堆DOM节点逻辑更集中性能也更稳。纯DOM做法最大问题是200个格子节点全挂上去之后页面结构很啰嗦样式代码多改起来麻烦。Canvas还有一个好处是绘制预览下一个方块时很方便新建一个小的画布用同一个方块数据画一遍就行。代码不用维护两套渲染方式。3. 俄罗斯方块核心逻辑拆解方块、旋转和碰撞在动手写代码之前我建议先把几个核心概念理清楚。俄罗斯方块看着简单但逻辑拆开无非四件事棋盘怎么表示、方块怎么定义、旋转怎么计算、碰撞怎么判断。这四个点想明白了后面的代码就是一马平川。3.1 10×20棋盘和二维数组游戏世界的坐标系俄罗斯方块的棋盘是一个10列、20行的网格。代码里我用一个二维数组来表示它const COLS 10; const ROWS 20; let board Array.from({ length: ROWS }, () Array(COLS).fill(0));这里有个特别容易踩的坑数组的第一维是行第二维是列。也就是说访问第3行第5列时要写board[3][5]不是board[5][3]。我第一次顺手写反过一次结果所有移动和旋转都像照了镜子一样反着来找问题找了快半小时。后面我养成了一个习惯凡是涉及二维数组都先在本子上画一个10×20的格子图标好行号和列号再写代码。棋盘里每个格子只有两种状态空或者有颜色。空用0表示有颜色就存颜色字符串。用truthy/falsy判断时0是false颜色字符串是true这个特性后面在碰撞检测里会很方便。3.2 七种方块与用矩阵表示的旋转俄罗斯方块有7种标准方块每种都可以用一个或几个小矩阵定义。矩阵里1表示有方块0表示空const SHAPES [ { matrix: [[1,1,1,1]], color: #00f0f0 }, // I { matrix: [[1,1],[1,1]], color: #f0f000 }, // O { matrix: [[0,1,0],[1,1,1]], color: #a000f0 }, // T { matrix: [[0,1,1],[1,1,0]], color: #00f000 }, // S { matrix: [[1,1,0],[0,1,1]], color: #f00000 }, // Z { matrix: [[1,0,0],[1,1,1]], color: #0000f0 }, // J { matrix: [[0,0,1],[1,1,1]], color: #f0a000 } // L ];旋转的计算是一个经典的矩阵操作先转置再把每一行倒过来。写成代码是这样的function rotateMatrix(matrix) { const rows matrix.length; const cols matrix[0].length; const result Array.from({ length: cols }, () Array(rows).fill(0)); for (let r 0; r rows; r) { for (let c 0; c cols; c) { result[c][rows - 1 - r] matrix[r][c]; } } return result; }这里最大的坑也在行列数互换上一个2行3列的矩阵旋转后会变成3行2列很多人没注意导致旋转完成之后循环越界或者直接渲染错乱。记得要把旋转结果的行列长度当成变量而不是写死原矩阵的尺寸。3.3 碰撞检测与消行全游戏最容易写错的两个点碰撞检测的逻辑说穿了就是一句话先假设移动再看目标位置能不能站住。具体来说每次尝试向左、向右、向下移动或者旋转之前都用当前方块的矩阵加上目标坐标去和棋盘数组对一遍只要发现有任何一个格子越界或者和棋盘上已有方块重叠就判定为不合法。function isValid(matrix, x, y) { const rows matrix.length; const cols matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (matrix[r][c]) { const nx x c; const ny y r; if (nx 0 || nx COLS || ny ROWS) return false; if (ny 0 board[ny][nx]) return false; } } } return true; }注意那个ny 0的判断。方块刚生成时可能有一部分在棋盘顶部的可见区域之上这个判断允许负坐标出现否则新方块还没落进来就被误判成撞顶了。这个问题我在初版代码里漏了结果方块消失不见还以为是生成逻辑错了。消行是另一个容易出问题的地方。正确做法是从棋盘底部往上扫描发现满行就删掉这一行再在顶部补一个空行function clearRows() { let cleared 0; for (let y ROWS - 1; y 0; ) { if (board[y].every(cell cell)) { board.splice(y, 1); board.unshift(Array(COLS).fill(0)); cleared; } else { y--; } } ... }这里有个细节很多人栽过splice删除一行之后原来在同一位置上面的行会掉下来所以此时我们的y不能自减而是要继续检查同一个索引因为那里已经是新的一行了。只有当这一行不满才把y往上挪。作者当初第一次写的时候直接放了个for循环自增结果一次消一行没问题一次消两行就总有一行消不掉。4. 实操环节直接复制这套代码保存为tetris.html就能跑理论基础说完了下面进入真正动手的部分。我把这套代码按“页面骨架—游戏逻辑—完整实现—自定义调整”的顺序讲最后给出一份可以直接复制保存的完整版本。4.1 先搭页面骨架和样式页面结构不需要多复杂核心是一个画布加一个操作面板。画布负责渲染游戏棋盘操作面板放“下一个方块预览”、得分、等级以及暂停和重新开始两个按钮。样式上我用了深色背景方便让彩色方块跳出来。棋盘是一个200×400的Canvas对应10列×20行、每格20像素。页面居中显示主容器用了flex布局面板固定在棋盘右侧。div classwrap canvas idboard width200 height400/canvas div classside div classnext-wrap h3下一个/h3 canvas idnext width100 height100/canvas /div div classinfo h3得分/h3 p idscore0/p h3等级/h3 p idlevel1/p /div div button classbtn onclicktogglePause()暂停/继续/button button classbtn onclickresetGame()重新开始/button /div /div /div样式方面有几个细节值得注意按钮要给出明显的点击反馈我用的是:active时降低透明度棋盘画布加了一个深色边框让棋盘边缘清晰可见下一个预览方块的小画布放在上方玩家扫一眼就知道接下来要出什么。4.2 游戏状态管理一局游戏就是一个状态机写俄罗斯方块之前我习惯先把状态列出来。整个游戏需要维护的全局变量其实就这些棋盘数组、当前方块、下一个方块、当前坐标、得分、等级、下落间隔、暂停状态、结束状态。初始化流程是创建新棋盘、清空分数和等级、随机生成一个方块作为当前方块再随机生成一个作为下一个方块然后启动游戏循环。游戏循环用requestAnimationFrame驱动每一帧都检查时间差超过下落间隔就执行一次下落。选择requestAnimationFrame而不是setInterval是因为前者在页面切走时会自动暂停不会积累一堆无用的定时回调而且它绑定显示刷新率动画更跟手。对游戏手感有明显提升。4.3 完整代码直接复制保存后浏览器打开就能玩下面这份代码就是交付版本为了贴出来方便大家直接抄作业我做了一点精简去掉了注释里的大段说明但功能完整。你把它另存为tetris.html用浏览器打开就能直接玩。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title俄罗斯方块小游戏/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #1a1a2e; color: #eee; font-family: Microsoft YaHei, Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .wrap { display: flex; gap: 16px; padding: 16px; background: #16213e; border-radius: 12px; } #board { border: 2px solid #0f3460; background: #0f3460; display: block; } .side { width: 140px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; } .side h3 { font-size: 13px; color: #5c8fc2; margin-bottom: 4px; } .next-wrap { background: #0f3460; border-radius: 8px; padding: 10px; text-align: center; } #next { display: block; margin: 0 auto; } .info p { font-size: 20px; margin: 0 0 10px 0; } .btn { width: 100%; padding: 10px; border: 0; border-radius: 6px; background: #e94560; color: #fff; font-size: 14px; cursor: pointer; margin-top: 10px; } .btn:active { opacity: 0.8; } /style /head body div classwrap canvas idboard width200 height400/canvas div classside div classnext-wrap h3下一个/h3 canvas idnext width100 height100/canvas /div div classinfo h3得分/h3 p idscore0/p h3等级/h3 p idlevel1/p /div div button classbtn onclicktogglePause()暂停/继续/button button classbtn onclickresetGame()重新开始/button /div /div /div script const canvas document.getElementById(board); const ctx canvas.getContext(2d); const nextCanvas document.getElementById(next); const nextCtx nextCanvas.getContext(2d); const CELL 20; const COLS 10; const ROWS 20; const SHAPES [ { matrix: [[1,1,1,1]], color: #00f0f0 }, { matrix: [[1,1],[1,1]], color: #f0f000 }, { matrix: [[0,1,0],[1,1,1]], color: #a000f0 }, { matrix: [[0,1,1],[1,1,0]], color: #00f000 }, { matrix: [[1,1,0],[0,1,1]], color: #f00000 }, { matrix: [[1,0,0],[1,1,1]], color: #0000f0 }, { matrix: [[0,0,1],[1,1,1]], color: #f0a000 } ]; let board, current, next, score, level, dropInterval, paused, gameOver, animationId, lastDrop; function createBoard() { board Array.from({ length: ROWS }, () Array(COLS).fill(0)); } function randomPiece() { return JSON.parse(JSON.stringify(SHAPES[Math.floor(Math.random() * SHAPES.length)])); } function spawnPiece() { if (next) { current next; } else { current randomPiece(); } current.x Math.floor((COLS - current.matrix[0].length) / 2); current.y 0; next randomPiece(); if (!isValid(current.matrix, current.x, current.y)) { gameOver true; } } function rotateMatrix(matrix) { const rows matrix.length; const cols matrix[0].length; const result Array.from({ length: cols }, () Array(rows).fill(0)); for (let r 0; r rows; r) { for (let c 0; c cols; c) { result[c][rows - 1 - r] matrix[r][c]; } } return result; } function isValid(matrix, x, y) { const rows matrix.length; const cols matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (matrix[r][c]) { const nx x c; const ny y r; if (nx 0 || nx COLS || ny ROWS) return false; if (ny 0 board[ny][nx]) return false; } } } return true; } function mergePiece() { const rows current.matrix.length; const cols current.matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (current.matrix[r][c]) { const ny current.y r; const nx current.x c; if (ny 0) board[ny][nx] current.color; } } } } function clearRows() { let cleared 0; for (let y ROWS - 1; y 0; ) { if (board[y].every(cell cell)) { board.splice(y, 1); board.unshift(Array(COLS).fill(0)); cleared; } else { y--; } } if (cleared 0) { const points [0, 100, 300, 500, 800][cleared]; score points; level Math.floor(score / 1000) 1; dropInterval Math.max(150, 1000 - (level - 1) * 80); updateInfo(); } } function moveLeft() { if (!gameOver !paused isValid(current.matrix, current.x - 1, current.y)) { current.x--; } } function moveRight() { if (!gameOver !paused isValid(current.matrix, current.x 1, current.y)) { current.x; } } function moveDown() { if (gameOver || paused) return; if (isValid(current.matrix, current.x, current.y 1)) { current.y; } else { mergePiece(); clearRows(); spawnPiece(); if (gameOver) { draw(); alert(游戏结束得分 score); } } } function hardDrop() { if (gameOver || paused) return; while (isValid(current.matrix, current.x, current.y 1)) { current.y; } moveDown(); } function rotate() { if (gameOver || paused) return; const rotated rotateMatrix(current.matrix); const oriX current.x; const kicks [0, -1, 1, -2, 2]; for (const dx of kicks) { current.x oriX dx; if (isValid(rotated, current.x, current.y)) { current.matrix rotated; return; } } current.x oriX; } function updateInfo() { document.getElementById(score).textContent score; document.getElementById(level).textContent level; } function drawCell(c, px, py, size, color) { c.fillStyle color; c.fillRect(px, py, size, size); c.strokeStyle #111; c.strokeRect(px, py, size, size); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y 0; y ROWS; y) { for (let x 0; x COLS; x) { if (board[y][x]) { drawCell(ctx, x * CELL, y * CELL, CELL, board[y][x]); } else { ctx.fillStyle #0a1a30; ctx.fillRect(x * CELL, y * CELL, CELL, CELL); ctx.strokeStyle #09203a; ctx.strokeRect(x * CELL, y * CELL, CELL, CELL); } } } if (current !gameOver) { const rows current.matrix.length; const cols current.matrix[0].length; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (current.matrix[r][c]) { drawCell(ctx, (current.x c) * CELL, (current.y r) * CELL, CELL, current.color); } } } } nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height); if (next) { const rows next.matrix.length; const cols next.matrix[0].length; const cell 20; const offsetX (nextCanvas.width - cols * cell) / 2; const offsetY (nextCanvas.height - rows * cell) / 2; for (let r 0; r rows; r) { for (let c 0; c cols; c) { if (next.matrix[r][c]) { drawCell(nextCtx, offsetX c * cell, offsetY r * cell, cell, next.color); } } } } } function loop(time) { if (!paused !gameOver) { if (time - lastDrop dropInterval) { moveDown(); lastDrop time; } } draw(); animationId requestAnimationFrame(loop); } function togglePause() { if (gameOver) return; paused !paused; if (!paused) lastDrop performance.now(); } function resetGame() { cancelAnimationFrame(animationId); createBoard(); score 0; level 1; dropInterval 1000; paused false; gameOver false; current null; next null; spawnPiece(); updateInfo(); lastDrop performance.now(); requestAnimationFrame(loop); } document.addEventListener(keydown, function (e) { const keys [ArrowLeft, ArrowRight, ArrowDown, ArrowUp, ]; if (keys.indexOf(e.key) ! -1) e.preventDefault(); if (gameOver) return; switch (e.key) { case ArrowLeft: moveLeft(); break; case ArrowRight: moveRight(); break; case ArrowDown: moveDown(); break; case ArrowUp: rotate(); break; case : hardDrop(); break; } }); resetGame(); /script /body /html这段代码我实测过保存后用Chrome、Edge、Firefox打开都能直接玩控制台无报错。如果你把它发给需求方记得告诉对方用浏览器打开不是双击之后选择记事本。4.4 交付前值得做的四个自定义调整点复制完代码只是一个开始真正交付前我建议你做几处调整让成品更符合买家的实际场景。第一改标题。代码里的title目前是“俄罗斯方块小游戏”。如果需求方要放在心理测试页里可以考虑改成“解压小游戏”之类更贴合页面的名字。第二调配色。深色背景下方块用的是经典亮色。如果需求方网站是浅色主题可以把背景色和棋子颜色整体调整白色背景下建议给方块加浅色边框否则边界不明显。第三定调整初始速度。代码里dropInterval 1000表示每1000毫秒下落一格。如果买家是新手或者主打休闲解压可以把初始间隔调到1200毫秒体验更慢更友好如果想要挑战感更强可以降到700毫秒。第四考虑加分音效。这个我一般不在默认交付中做如果需求方主动要再加。加音效最轻量的方式是使用Web Audio API生成简单Beep音不引入外部音频文件保持单文件交付。5. 实测排雷交付前自己踩过的坑和修正代码写完不等于能交付。我自己在测试过程中踩了几个坑这里全部列出来帮你省掉排查时间。5.1 旋转越界不加踢墙直接穿墙初版旋转逻辑只做了一件事把当前矩阵旋转90度然后判断新矩阵在原坐标是否合法。实测发现当I型方块靠在左边界时一旋转新矩阵的一部分跑出画面外直接消失。俄罗斯方块的常规做法是加“踢墙”旋转的时候如果原始坐标不合法就尝试把方块左移一格、右移一格、左移两格、右移两格找到一个能放下的位置就落位。这就是我在代码里写的kicks数组const kicks [0, -1, 1, -2, 2];顺序很重要。0对应原地旋转如果原地不行优先小距离偏移再尝试大距离偏移。这套简化版踢墙基本覆盖90%的场景够用了。如果你想让旋转手感更丝滑可以考虑参考更完整的SRS标准那个会针对每种方块、每次旋转方向定义不同的偏移表但对50块的单子来说这个简化版完全够。5.2 键盘事件和页面滚动冲突空格键在浏览器里默认有“滚动当前页面”的行为方向键也一样。如果游戏里按空格做硬降不阻止默认事件玩家每按一次整个页面就会上下抖动一次。玩起来非常难受。解决方案是在键盘监听器里先判断按键类型属于游戏操作键就立即preventDefault()然后再执行游戏逻辑const keys [ArrowLeft, ArrowRight, ArrowDown, ArrowUp, ]; if (keys.indexOf(e.key) ! -1) e.preventDefault();这里还有个顺序细节preventDefault要在判断gameOver之前就执行。如果游戏结束了按方向键应该让页面停止滚动而不是让页面跟着滚所以我把它放到了最前面。5.3 移动端没有触控按钮等于没有移动端我交第一版的时候只做了键盘控制心里想的是需求方肯定在电脑上玩。结果需求方问了一句“手机能访问吗”我瞬间意识到单文件方案的优势——他可以直接把这个html传到服务器上手机浏览器打开。但手机没有键盘所以默认版本在手机上只能看不能玩。为了应对这个潜在要求我加上了一行移动端操作按钮的说明方案在wrap下方加一排按钮分别绑定向右、向左、旋转、软降、硬降点击事件直接调用对应的函数。由于游戏逻辑本身和输入层是分开的加按钮不需要改动任何核心代码只需要在HTML里加节点在CSS里加布局样式再给每个onclick绑定游戏函数即可。如果你在交付时不确定需求方会不会在手机上用我建议直接把这套按钮做进去。加不了几行代码但在对方那里的体验评价完全不一样。5.4 字体和页面缩放问题俄罗斯方块本身不需要很多文字但哪怕只有“得分”“等级”两个词字体的显示差异也会影响整体质感。Windows和macOS的中文默认字体不一样不设置字体栈的话在Linux设备上可能会显示成很难看的黑体。我在样式里加了font-family: Microsoft YaHei, Arial, sans-serif保底用系统无衬线字体观感基本稳定。页面缩放方面固定200×400的画布在小屏手机上可能会超出可视区域。我给.wrap做了居中处理并且在body上用了overflow: hidden避免小屏设备出现横向滚动条。如果你想要更彻底的移动端适配可以借CSS transform按屏幕宽度等比缩放整个游戏容器但这属于后话对大多数交付场景来说现阶段方案够了。6. 低价小单的交付心法50块也要有交付清单很多人觉得50块的活不值得认真交付这个想法恰恰是副业里最容易踩的坑。价格低不等于可以敷衍因为你要的不是这一单的50块而是后续可能出现的500块、5000块。6.1 需求确认阶段问清楚的三件事接单价越低的需求文字描述往往越含糊。“做一个俄罗斯方块”听起来明确但其中藏着大量未定问题有没有下一个方块预览有没有硬降有没有计分和等级颜色风格有没有偏好要中文界面还是英文界面我在动手前会把这些问题整理成一份简单的确认消息发给需求方让他选或者补充。这样做有两个好处第一避免开发到一半对方突然说“我想要尼克那个方块带音效”然后你只能返工第二让对方感觉到你是个靠谱的人而不仅仅是个写代码的。对低价单来说靠谱的感知价值往往比代码本身还重要。6.2 交付时多做一步之后单子自然来交付时我习惯做一个压缩包里面放两个文件游戏本体和一份极简使用说明。说明不写废话只交代三件事怎么打开、怎么操作、如果要改配色和速度可以改哪一行。这份说明对程序员来说可能没用但对非技术背景的需求方来说能救命。这单交付之后需求方一周后回来找我问了一次“怎么把游戏嵌到网页中间”那其实只是个iframe引用问题我回了一段三行代码。这种零成本售后换来的是对方把你的联系方式存成了“靠谱的那个做小游戏的”。低价单最大的价值往往不在第一单本身而在于是不是能借着一单建立信任为后面的需求做铺垫。6.3 低价单不是终点是可复用的起点做完这个俄罗斯方块我手里留下了一个经过实测、可复用的HTML模板。以后再遇到类似的经典小游戏需求——贪吃蛇、2048、扫雷——核心代码骨架都是一套思路二维数组状态、游戏循环、输入事件、画布渲染。只要拿到需求直接改方块定义和逻辑判断就行。我个人接单后的体会是低价单最值得做的不是那个价格而是通过一次真实的交付流程逼你把“不会的查会、不清楚的弄懂、偷懒的补上”。如果你也想接副业练手我建议别一上来就接复杂的交互项目先找个类似俄罗斯方块这样需求明确、逻辑经典、交付边界清晰的小单子跑一遍。做完之后你自然会知道下一单报价往哪儿定。