用HTML+CSS+JS实现推箱子：数据驱动渲染与碰撞检测全解析-北京尧图网络

最近手痒又动手把推箱子这个经典小游戏完整写了一遍用的技术栈非常朴素HTML CSS JavaScript一个单文件搞定不需要构建工具也不需要装任何依赖。很多人觉得推箱子看起来就是个“把箱子推到指定位置”的小玩意但真正动手写的时候才发现它把前端入门阶段最常踩的几个硬骨头全占齐了地图这种二维数据怎么建模、数据怎么变成页面上的格子、键盘操作怎么跟游戏逻辑同步、碰撞之后怎么处理还有最终怎么判断胜负。这篇文章就按我的实现顺序把每个关键决策背后的原因一起讲清楚。整个项目从思路上拆成三层数据层、渲染层、逻辑层每层都有明确的职责。提供的完整代码可以直接复制到一个 HTML 文件里跑起来游戏内置了两关关卡适合刚学完基础语法、想完整走一遍前端小项目的同学也适合想回头补一补“数据驱动渲染”这种思维的开发者。1. 推箱子项目整体设计与架构思路1.1 为什么选推箱子当练手项目推箱子是那种“看起来简单写起来有内容”的项目。它的规则只有一条玩家在地图中移动把箱子推到目标点所有箱子到位就过关。但这一条规则背后至少牵扯到四件事二维数组的地图建模、DOM的渲染方案、键盘事件的捕获与处理、移动/碰撞/胜负的算法判断。我见过不少初学者一上来就想着写俄罗斯方块或者打飞机结果死在“下落检测”“碰撞矩形”这些更复杂的问题上。推箱子的难度梯度刚好合适比静态页面复杂又没到需要引入物理引擎的程度。用 DOM 加 CSS 就能把画面画出来核心逻辑集中在几个函数里非常适合第一次尝试“数据与表现分离”的写法。做完这个项目之后再去接触类似的地图类小游戏比如贪吃蛇、走迷宫会发现很多东西都是通用的。二维数组怎么存、坐标怎么算、事件怎么绑踩过一次坑就记住了。1.2 数据驱动渲染别把逻辑写死在 DOM 里我最初写推箱子的时候犯过一个典型错误每走一步直接去操作页面上某个格子的 class。比如按下方向键先找到当前玩家对应的那个 div把它身上的“player”样式移除再给目标格子加上。这么写有两个问题第一代码越写越乱因为每个格子什么状态得靠人脑子去记第二一旦游戏里同时存在箱子、目标点、玩家各种状态叠加稍微一复杂就出错。这次我换了一个思路数据是唯一的真相页面只是数据的“照片”。具体来说我把地图、箱子列表、目标点列表、玩家坐标都存成纯 JavaScript 数据。每次操作只修改这些数据然后调用 render()让 render 根据最新数据把整个画面重绘一遍。逻辑和表现彻底分离逻辑层不用关心页面长什么样渲染层也不用关心游戏规则。这样做的最大好处是调试方便。游戏状态不对的时候直接在控制台打印数据看看箱子坐标、玩家坐标是不是预期的问题立刻就能定位。2. 地图数据结构与关卡设计2.1 用数字矩阵表示地图像填 Excel 表格一样建模地图的本质是一张二维网格最自然的建模方式就是二维数组。我用不同的数字代表不同元素0 表示空地1 表示墙2 表示箱子3 表示目标点4 表示玩家。举个例子我之前设计的第一关长这样const LEVELS [ [ [1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1], [1, 0, 2, 0, 0, 1], [1, 0, 0, 0, 0, 1], [1, 0, 0, 3, 0, 1], [1, 0, 0, 4, 0, 1], [1, 1, 1, 1, 1, 1] ], [ [1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1], [1, 0, 0, 2, 0, 1], [1, 0, 0, 0, 0, 1], [1, 0, 3, 0, 0, 1], [1, 0, 4, 0, 0, 1], [1, 1, 1, 1, 1, 1] ] ];每个数字都对应地图上的一个格子数组的行数就是地图的高度每行的元素个数就是宽度。这个结构非常直观有点像一个 Excel 表格每个单元格里填一个数字。后续要扩展地图只要照着这个格式加数据就行。墙为什么一定要围一圈因为推箱子游戏里玩家不能走出地图边界。把边界都设为 1 之后碰撞检测只需要判断“下一个位置是不是 1”不需要额外写越界判断。这个小细节能省掉很多边界条件。2.2 目标点、箱子、玩家拆成三份独立数据二维数组这个方案本身逻辑上没问题但有一个麻烦一个格子上可能同时存在“目标点”和“箱子”。如果我直接在地图数组里用 2 表示“箱子的初始位置”那箱子被推走之后这个格子到底是回到空地还是恢复成目标点这会引发一连串状态维护的问题。我的做法是地图数组里只保留墙和空地原始数据里的 2、3、4 在初始化时全部提取出来分别存到三个独立的数据结构中。目标点存成数组里面是一组坐标对象箱子也存成一个数组元素同样是一组坐标对象玩家存成一个单独的坐标对象。这样判断“箱子放到目标点上”就变得非常简单查一下目标点数组里的某个坐标是不是同时出现在箱子数组里。画面渲染的时候也是先画地图再叠加目标点、箱子和玩家各管各的互不干扰。这种“一份数据负责一个维度的状态”的思路在游戏开发里很常用。后续要扩展什么功能都可以沿着这个思路加。3. 页面渲染CSS Grid 方案的实际选择3.1 为什么不选 Canvas而用 CSS Grid推箱子的画面是一格一格的棋盘每个格子的状态都很简单我用 CSS Grid 加一堆 div 就足够了。有朋友问为什么不直接用 Canvas我觉得要看场景Canvas 更适合画大量动态图形比如粒子效果、逐帧动画、地图缩放的编辑工具而推箱子这种格子游戏地图通常不超过几万个格子用 DOM 渲染性能完全没压力而且样式更好控制。用 CSS Grid 还有一个隐藏好处浏览器会自动帮我们把格子排列成网格。我只需要设置grid-template-columns: repeat(6, 60px)然后按行、列的顺序把 div 塞进容器它们就会自动对齐。有点像是往办公室里摆工位划定好一排几个座位然后按顺序坐人不需要每个人报告自己的坐标。如果换成绝对定位方案我还得手动计算每个格子的 left 和 top既啰嗦又容易算错。3.2 一个格子一个 div状态靠 CSS 类叠加渲染的核心思想很简单遍历地图数组每拿到一个坐标就创建一个 div根据这个位置上的状态加上对应的 CSS 类。墙加 wall目标点加 target箱子加 box玩家加 player。同一个格子可以叠加多个类比如箱子正好停在目标点上的时候这个 div 既有 target 又有 box样式上就会显示成“绿色的箱子”。function render() { game.style.gridTemplateColumns repeat(${map[0].length}, 60px); game.innerHTML ; for (let y 0; y map.length; y) { for (let x 0; x map[y].length; x) { const cell document.createElement(div); cell.classList.add(cell); if (map[y][x] 1) cell.classList.add(wall); if (targets.some(t t.x x t.y y)) cell.classList.add(target); if (boxes.some(b b.x x b.y y)) cell.classList.add(box); if (player.x x player.y y) cell.classList.add(player); game.appendChild(cell); } } }每次移动后直接调用 render()把整个容器清空重绘。对于推箱子这种小尺寸地图这一步的性能开销完全可以忽略。真要优化也可以只更新位置变化的格子但对于新手项目来说全量重绘反而更容易理解。4. 移动与推箱子逻辑核心算法一步一步拆4.1 键盘监听与方向键的防滚动处理玩家操作游戏靠的是键盘方向键。这里有一个非常坑的细节浏览器默认把方向键当作页面滚动键如果不拦截按下方向键时页面会跟着滚。解决办法是在 keydown 事件里调用e.preventDefault()让浏览器不要执行默认行为。事件绑定方式document.addEventListener(keydown, e { const dirs { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }; if (!dirs[e.key]) return; e.preventDefault(); // 执行移动逻辑... });这里我直接用e.key来判断按键值分别是ArrowUp、ArrowDown、ArrowLeft、ArrowRight。不要再用keyCode那是已经废弃的接口虚拟键盘或者 Mac 的某些键盘布局下容易出问题。按键事件有个特点按住不松手会连续触发 keydown。推箱子这个游戏里连续触发其实体验还不错但如果间隔太短玩家可能还没反应过来箱子已经被推了好几格。所以我在事件处理里加了一个锁移动后 100 毫秒内不允许再次移动。这个时间是一个手感上的平衡点太长会显得迟钝太短就起不到锁的效果。4.2 移动判定的完整流程撞墙、碰箱、推动玩家按一次方向键程序要做的事情可以拆成三步计算玩家下一步要去的坐标。判断这个坐标是不是墙。如果是墙直接结束玩家不动。如果这个坐标上正好有箱子那就要判断箱子能不能被推动。箱子前方如果是墙或者另一个箱子那就推不动玩家也不能走否则箱子往前挪一格玩家占据箱子原来的位置。这段逻辑有点像一个生活场景你在超市推购物车。你往前走如果购物车前面是墙或者另一辆购物车你是不可能把它推过去的。但是注意一个区别人可以走到空地上箱子也会被推过去但如果前面被堵住人和箱子都停在原地。核心移动函数function move(dx, dy) { const nx player.x dx; const ny player.y dy; // 1. 撞墙检测 if (map[ny][nx] 1) return; // 2. 判断玩家目标位置是否有箱子 const boxIndex boxes.findIndex(b b.x nx b.y ny); if (boxIndex ! -1) { const bx nx dx; const by ny dy; // 3. 箱子前方是墙或者另一个箱子推不动 if (map[by][bx] 1 || boxes.some(b b.x bx b.y by)) return; // 箱子可以被推动更新箱子坐标 boxes[boxIndex] { x: bx, y: by }; } // 玩家移动 player { x: nx, y: ny }; steps; render(); checkWin(); }这段代码里boxes.some(...)用得特别关键它用来判断箱子前方是否还有箱子。如果我用一个普通数组但没有做这个检查可能会出现两个箱子叠在一起的画面错误。逻辑上必须做到玩家前面有箱子时只允许推一个箱子不能推一排。4.3 推箱子里的边界情况目标点本身就是个“空地”很多新手写推箱子会在“目标点”这个状态上翻车。因为目标点在逻辑上是可以站的玩家可以从目标点上走过去箱子也可以停在目标点上。如果我把目标点当成一个“实体物体”那移动就会被错误地挡住。在数据层的设计上目标点其实只是一种“地面标记”它不是一个碰撞实体。所以我的移动逻辑只关心墙和箱子至于那个格子是不是目标点完全不影响“能不能走”的判断。第二个边界情况是箱子被推到目标点之后玩家又要把这个箱子推走。这种情况下目标点还在原地箱子去了新位置画面会显示目标点重新露出来。因为我的 target 和 box 是完全独立的数组只要箱子坐标从目标点移走下一个渲染里目标点会自动恢复显示不需要额外写“把目标点变回来”的代码。5. 胜负判定、步数统计与关卡切换5.1 胜负判定的正确写法目标点集合与箱子集合求交集判断过关的方法有很多种最简单的算法是遍历所有目标点检查每一个目标点坐标是否都存在于箱子数组中。全部存在说明所有箱子都归位了。function checkWin() { return targets.every(t boxes.some(b b.x t.x b.y t.y)); }这段代码的写法我一直觉得特别优雅every表示“每一个目标点都要满足条件”some表示“箱子里存在这么一个坐标”。中文翻译过来就是每一个目标点上都有箱子。两个数组一比对结果就出来。对于推箱子这个场景目标点一般就几个到几十个这种双重循环的性能完全不用担心。除非你做了几百个箱子的超级关卡才需要考虑用 Set 来优化查找否则完全没必要。5.2 通关后的自动切关与重新开始每次实现一个游戏我都习惯把“通关动画”做成 setTimeout 延迟一下避免画面“啪”地一下就切走玩家还没看清。我的逻辑是这样如果 checkWin() 返回 true先展示过关提示100 毫秒后自动加载下一关。如果已经是最后一关就提示全部通关。重新开始功能也是一个按钮触发重新调用一次初始化函数。初始化函数会从 LEVELS 里取当前关卡的数据重新生成箱子、目标点、玩家的初始位置步数清零画面重新渲染。这里我也清空了 isLocked 的状态。如果不清空重新开始后玩家可能还处于“锁住”状态按键没反应那体验就很诡异了。6. 完整可运行代码前面把逻辑拆开讲了很多但只看零碎段落肯定不够。这一段我把完整的代码贴出来就是一个独立 HTML 文件。把下面的内容保存成 index.html双击打开就能玩。代码里包含了两关关卡支持方向键移动、步数统计、过关自动进入下一关、重新开始。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title推箱子游戏/title style body { font-family: Arial, sans-serif; background: #f5f5f5; text-align: center; padding: 20px; } h2 { margin-bottom: 10px; } #info { font-size: 18px; margin-bottom: 15px; color: #333; } #game { display: grid; width: 360px; margin: 0 auto; background: #d9d9d9; border: 2px solid #555; } .cell { width: 60px; height: 60px; box-sizing: border-box; position: relative; } .wall { background: #4a4a4a; } .target::after { content: ; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; background: #ffb366; border-radius: 50%; transform: translate(-50%, -50%); } .box { background: #c97c2d; border: 3px solid #8b4a13; border-radius: 6px; } .box.target { background: #4caf50; border-color: #2e7d32; } .player { position: absolute; left: 8px; top: 8px; width: 44px; height: 44px; background: #2d6ae0; border-radius: 50%; } button { padding: 8px 20px; font-size: 16px; margin-top: 15px; cursor: pointer; } /style /head body h2推箱子/h2 div idinfo/div div idgame/div button onclickrestart()重新开始/button script const LEVELS [ [ [1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1], [1, 0, 2, 0, 0, 1], [1, 0, 0, 0, 0, 1], [1, 0, 0, 3, 0, 1], [1, 0, 0, 4, 0, 1], [1, 1, 1, 1, 1, 1] ], [ [1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1], [1, 0, 0, 2, 0, 1], [1, 0, 0, 0, 0, 1], [1, 0, 3, 0, 0, 1], [1, 0, 4, 0, 0, 1], [1, 1, 1, 1, 1, 1] ] ]; const game document.getElementById(game); const info document.getElementById(info); let currentLevel 0; let map []; let boxes []; let targets []; let player { x: 0, y: 0 }; let steps 0; let isLocked false; function initLevel() { const original LEVELS[currentLevel]; // 拷贝二维数组避免修改原始关卡数据 map original.map(row row.slice()); boxes []; targets []; player { x: 0, y: 0 }; for (let y 0; y map.length; y) { for (let x 0; x map[y].length; x) { if (map[y][x] 2) { boxes.push({ x, y }); } else if (map[y][x] 3) { targets.push({ x, y }); } else if (map[y][x] 4) { player { x, y }; } // 把箱子、目标点、玩家标记都重置为空地只保留墙 if (map[y][x] ! 1) { map[y][x] 0; } } } steps 0; isLocked false; updateInfo(); render(); } function render() { game.style.gridTemplateColumns repeat(${map[0].length}, 60px); game.innerHTML ; for (let y 0; y map.length; y) { for (let x 0; x map[y].length; x) { const cell document.createElement(div); cell.classList.add(cell); if (map[y][x] 1) { cell.classList.add(wall); } if (targets.some(t t.x x t.y y)) { cell.classList.add(target); } if (boxes.some(b b.x x b.y y)) { cell.classList.add(box); } if (player.x x player.y y) { cell.classList.add(player); } game.appendChild(cell); } } } function move(dx, dy) { const nx player.x dx; const ny player.y dy; if (map[ny][nx] 1) return; const boxIndex boxes.findIndex(b b.x nx b.y ny); if (boxIndex ! -1) { const bx nx dx; const by ny dy; if (map[by][bx] 1 || boxes.some(b b.x bx b.y by)) return; boxes[boxIndex] { x: bx, y: by }; } player { x: nx, y: ny }; steps; updateInfo(); render(); if (checkWin()) { handleWin(); } } function checkWin() { return targets.every(t boxes.some(b b.x t.x b.y t.y)); } function handleWin() { setTimeout(() { if (currentLevel LEVELS.length - 1) { alert(过关); currentLevel; initLevel(); } else { alert(恭喜全部通关); } }, 100); } function updateInfo() { info.textContent 第 ${currentLevel 1} / ${LEVELS.length} 关 | 步数${steps}; } function restart() { initLevel(); } document.addEventListener(keydown, e { const dirs { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }; if (!dirs[e.key]) return; e.preventDefault(); if (isLocked) return; isLocked true; move(dirs[e.key][0], dirs[e.key][1]); setTimeout(() { isLocked false; }, 100); }); initLevel(); /script /body /html代码里几个地方值得说明一下。map original.map(row row.slice())是做二维数组的深拷贝如果少了这步重新开始时会修改到原始的 LEVELS 数据导致第二次进入关卡时地图全乱了。另外移动逻辑里boxes[boxIndex] { x: bx, y: by }直接替换数组里的对象而不是用 splice 删掉再加这样后续其它逻辑可以继续用这个坐标对象。还有.player的定位用了绝对定位是因为玩家绘制成圆形用 margin 处理块级元素的内边距会出现盒模型对不齐的问题。绝对定位到格子内部大小固定视觉上更稳。7. 常见问题与调试心得7.1 方向键把页面滚走了这是最多人遇到的第一道坎。按下方向键游戏没反应页面先上下滚动。原因是浏览器的默认行为在抢事件。解决办法就是在 keydown 事件处理函数里调用e.preventDefault()。有一点要注意必须在判断出“这是方向键”之后再调用不要在事件函数的开头无条件调用否则会影响其它按键的正常使用。7.2 按住方向键不松手角色“瞬移”这个问题的本质是 keydown 的自动重复触发。我用的锁方案很简单加一个 isLocked 变量每次移动后设为 true100 毫秒后解除。这样即使键盘疯狂触发游戏中每 100 毫秒最多走一步。如果你希望手感更顺滑可以把时间调到 80 毫秒如果发现误触频繁就调到 150 毫秒。这个值没有标准答案全凭个人手感。如果想要更精确的控制可以监听 keydown 和 keyup用一个数组记录“当前按下了哪些键”每次去扫一遍。这种方案适合要用“按住方向键连续移动”的游戏比如贪吃蛇。推箱子这种回合式移动锁方案更干脆。7.3 箱子推进死角关卡直接变成死局推箱子很容易把箱子推到墙角或者贴墙边上导致它再也推不回来。这个问题不是 bug而是玩法设计本身的一部分。玩家遇到这种局面只能点“重新开始”。如果你要做关卡编辑器有一个可以改进的点在初始化时跑一遍可解性检测如果箱子初始位置在角落且无法移出这个关卡就不应该通过。不过对当前这个练手项目来说检测逻辑会大幅增加复杂度可以先留着等以后做随机关卡的时候再处理。7.4 重新开始时地图“越玩越乱”位置对不上这个 bug 十有八九是修改了原始关卡数据造成的。如果initLevel里直接用const map LEVELS[currentLevel]然后在移动逻辑里改 map 数组就会把LEVELS里的原始数据一起改掉。第二次进入同一关时箱子和玩家的初始位置就已经乱了。解决办法就是我代码里的那句map original.map(row row.slice())。这步本质是给后续的逻辑操作准备一份独立副本。二维数组不能只用original.slice()拷贝因为外层 slice 只会复制第一层引用内层数组还是共享的。必须对每一行都 slice 一次。7.5 调试小技巧控制台打印数据比看页面更快我在开发过程中最大的体会就是不要盯着页面猜 bug。游戏状态对不上直接到控制台执行console.log(boxes)、console.log(targets)、console.log(player)一眼就能看出坐标系是不是写反了箱子是不是跑到地图外面了。还有一种常用的调试方法是把移动逻辑单独抽出来不依赖键盘和渲染在控制台手动调用move(0, 1)验证逻辑是否正确。这其实也是“数据与表现分离”带来的好处——如果逻辑和渲染耦合在一起想单独测逻辑就特别费劲。8. 一些后续扩展的方向这个基础版本做完可以往好几个方向扩展。加上撤销功能是一个很自然的下一步做法是维护一个历史操作栈每次移动前把 players、boxes、steps 的旧状态推进栈里需要撤销的时候弹出来重新渲染。关卡编辑器也可以做直接在地图上点击把当前格子改造成墙或者目标点然后导出一份数组。再加上关卡切换按钮、计时器、最少步数记录一个小而完整的推箱子游戏就成型了。我个人在这个项目的实际体会是推箱子虽然是个简单游戏但它恰好能把“数据建模—状态更新—渲染刷新”这条链路完整地走一遍。只要这一条链路想明白了后面写其它前端游戏比如拼图、扫雷、迷宫都会顺手很多。如果你还在纠结怎么练手不妨花一个晚上把这个小项目从头写一遍会比看十篇教程都管用。

用HTML+CSS+JS实现推箱子：数据驱动渲染与碰撞检测全解析

相关推荐

PHP性能分析与调优实战：从定位瓶颈到QPS提升的完整方法

基于统一求解法的交直流混合配电网潮流计算与Matlab实现

AI 时代，技术人靠什么赢？从“写好代码”到“做成事情”的范式转移

更多资讯

DistServe解耦架构实战：Prefill与Decode分离如何让首字延迟骤降80%

AI编程三重奏：Spec、契约与TDD实战指南

Claude Code 精通：命令行AI编程助手实战指南

身体调理手法怎么选？从技术原理到鉴别流程的实用指南

Ponytail插件：轻量级前端交互技能单元实战指南

服务管理前端开发实战：从列表页到表单联调的后台系统基本功

今日更新

小波包能量谱原理与MATLAB实现：从频带分解到故障特征提取

基于LSTM的网易云音乐评论情感分析：数据清洗与模型调优实战

Alpha-Beta剪枝与极大极小值算法：博弈树搜索原理与实战优化

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？