HTML5游戏开发实战：从零实现拉杆子过关小游戏

简介这是一份面向前端初学者与网页小游戏爱好者的HTML5拉杆子过关小游戏源码基于HTML、CSS与JavaScript实现可直接嵌入个人网站、游戏站或教学演示页面帮助读者理解轻量级网页游戏的交互逻辑与关卡设计思路。压缩包共3个文件包含1个html入口页面、1个js脚本文件与1个css样式文件分别承担页面结构、游戏逻辑与视觉呈现整体仅6KB体积极小、结构清晰便于快速阅读与二次修改。目前已有511人学习下载说明其在入门练手与素材复用方面具有一定参考价值。读者可从中获取完整的游戏运行代码、关卡判定与拉杆交互的实现方式并借助清晰的目录组织快速定位核心逻辑适合作为前端小游戏练手项目或网站趣味模块的现成素材。1. 拉杆子过关小游戏为什么它成了 HTML5 练手的第一块试金石很多人第一次接触 HTML5 游戏开发都是从“拉杆子过关”这类小游戏开始的。它规则简单——玩家拖动一根杆子把小球弹到目标位置或者用杆子搭桥让角色通过——但麻雀虽小五脏俱全Canvas 渲染、物理碰撞、鼠标/触摸事件、关卡数据管理、动画循环一个都不少。相比打砖块、贪吃蛇拉杆子过关多了一层“物理直觉”的考验玩家要判断角度、力度、时机开发者则要处理碰撞检测的精度和响应手感。这个标题对应的完整源码通常是一个单 HTML 文件就能跑起来的 Demo适合想从“会写 JS”跨到“能做游戏”的开发者。你不需要引擎不需要构建工具打开浏览器就能调试改一行代码就能看到效果这种即时反馈对建立游戏开发的手感特别重要。接下来我会把这个小游戏的实现拆成可复现的步骤从 Canvas 初始化到关卡数据设计再到碰撞检测的坑全部讲清楚。2. 从零搭出可运行的拉杆子核心循环2.1 为什么选 Canvas 2D 而不是 DOM 或 WebGL拉杆子过关小游戏的画面元素不多背景、杆子、小球、目标区域、可能还有障碍物。用 DOM 加 CSS 也能做但拖动杆子时频繁改left/top会触发重排重绘手感发涩WebGL 又太重写个 shader 的时间够你把整个游戏逻辑写两遍。Canvas 2D 是甜点区requestAnimationFrame驱动每帧清屏重绘坐标系统一碰撞检测直接算矩形或圆形相交代码量可控。常见做法是建一个canvas标签拿到2d上下文然后所有绘制都走ctx的 API。下面是最小骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno title拉杆子过关/title style html, body { margin: 0; padding: 0; background: #1a1a2e; overflow: hidden; } canvas { display: block; margin: 0 auto; touch-action: none; } /style /head body canvas idgameCanvas/canvas script const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); // 逻辑分辨率固定适配交给 CSS 缩放 const LOGIC_W 800; const LOGIC_H 600; canvas.width LOGIC_W; canvas.height LOGIC_H; // 自适应保持宽高比居中显示 function resize() { const scale Math.min(window.innerWidth / LOGIC_W, window.innerHeight / LOGIC_H); canvas.style.width LOGIC_W * scale px; canvas.style.height LOGIC_H * scale px; } window.addEventListener(resize, resize); resize(); // 游戏主循环 let lastTime 0; function gameLoop(timestamp) { const deltaTime Math.min(timestamp - lastTime, 50); // 防止切页后跳帧 lastTime timestamp; update(deltaTime); render(); requestAnimationFrame(gameLoop); } function update(dt) { // 后续在这里更新杆子、小球、碰撞 } function render() { ctx.clearRect(0, 0, LOGIC_W, LOGIC_H); // 后续在这里绘制 } requestAnimationFrame(gameLoop); /script /body /html这段代码做了三件事固定逻辑分辨率 800×600用 CSS 缩放适配不同屏幕用deltaTime控制更新节奏避免不同刷新率下速度不一致把update和render分开逻辑和绘制不混在一起。参数上LOGIC_W和LOGIC_H建议选 16:9 或 4:3 的整数方便后续算坐标。deltaTime上限设 50ms 是为了防止用户切到其他标签页再切回来时一帧跳太大导致物理穿透。2.2 杆子的拖拽交互鼠标和触摸怎么统一处理拉杆子的核心交互是“按住杆子一端拖动另一端固定或跟随”。这里最容易翻车的地方是鼠标和触摸事件混用导致移动端拖不动或者拖拽位置偏移。统一做法是监听pointerdown、pointermove、pointerupPointer Events 在主流浏览器上已经覆盖了鼠标、触摸、触控笔。关键是要把屏幕坐标转成 Canvas 逻辑坐标因为 Canvas 可能被 CSS 缩放过。// 杆子对象一端固定另一端可拖拽 const rod { anchorX: 400, // 固定端 X anchorY: 500, // 固定端 Y tipX: 400, // 可拖拽端 X tipY: 300, // 可拖拽端 Y maxLength: 250, // 杆子最大长度 minLength: 60, // 杆子最小长度 isDragging: false }; // 屏幕坐标 → Canvas 逻辑坐标 function getCanvasPos(e) { const rect canvas.getBoundingClientRect(); const scaleX LOGIC_W / rect.width; const scaleY LOGIC_H / rect.height; return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY }; } // 判断点是否在杆子可拖拽端附近半径 30 以内 function isNearTip(pos) { const dx pos.x - rod.tipX; const dy pos.y - rod.tipY; return Math.sqrt(dx * dx dy * dy) 30; } canvas.addEventListener(pointerdown, (e) { const pos getCanvasPos(e); if (isNearTip(pos)) { rod.isDragging true; canvas.setPointerCapture(e.pointerId); // 捕获指针移出画布也能继续拖 } }); canvas.addEventListener(pointermove, (e) { if (!rod.isDragging) return; const pos getCanvasPos(e); // 限制杆子长度在 minLength 和 maxLength 之间 let dx pos.x - rod.anchorX; let dy pos.y - rod.anchorY; let dist Math.sqrt(dx * dx dy * dy); if (dist rod.maxLength) { dx dx / dist * rod.maxLength; dy dy / dist * rod.maxLength; } else if (dist rod.minLength) { dx dx / dist * rod.minLength; dy dy / dist * rod.minLength; } rod.tipX rod.anchorX dx; rod.tipY rod.anchorY dy; }); canvas.addEventListener(pointerup, (e) { rod.isDragging false; canvas.releasePointerCapture(e.pointerId); });这里有几个参数值得注意maxLength和minLength决定了杆子的活动范围太小了玩家觉得没手感太大了容易把球弹飞。isNearTip的判定半径 30 是经验值太小了手指点不中太大了会误触。setPointerCapture是移动端拖拽不丢的关键没有它手指滑出 Canvas 区域拖拽就断了。另外touch-action: none的 CSS 必须加否则移动端浏览器会把手势解释成滚动页面。2.3 小球物理重力、弹力和碰撞响应小球是拉杆子游戏里的“子弹”它的运动要看起来自然。最简单的做法是给小球一个速度向量每帧施加重力碰到杆子时根据杆子的角度和相对速度反弹。这里不需要完整的刚体物理引擎用简化的冲量法就够了。const ball { x: 400, y: 200, vx: 0, vy: 0, radius: 12, gravity: 0.4, // 每帧重力加速度 bounce: 0.7, // 弹性系数 friction: 0.99 // 空气阻力 }; function updateBall(dt) { // 重力 ball.vy ball.gravity * (dt / 16.67); // 以 60fps 为基准 // 空气阻力 ball.vx * ball.friction; ball.vy * ball.friction; // 位置更新 ball.x ball.vx * (dt / 16.67); ball.y ball.vy * (dt / 16.67); // 边界碰撞左右和顶部 if (ball.x - ball.radius 0) { ball.x ball.radius; ball.vx -ball.vx * ball.bounce; } if (ball.x ball.radius LOGIC_W) { ball.x LOGIC_W - ball.radius; ball.vx -ball.vx * ball.bounce; } if (ball.y - ball.radius 0) { ball.y ball.radius; ball.vy -ball.vy * ball.bounce; } // 底部掉落重置或扣命 if (ball.y - ball.radius LOGIC_H) { resetBall(); } // 与杆子的碰撞检测 checkBallRodCollision(); } function checkBallRodCollision() { // 把杆子看作线段求球心到线段的最短距离 const ax rod.anchorX, ay rod.anchorY; const bx rod.tipX, by rod.tipY; const abx bx - ax; const aby by - ay; const apx ball.x - ax; const apy ball.y - ay; const abLenSq abx * abx aby * aby; let t (apx * abx apy * aby) / abLenSq; t Math.max(0, Math.min(1, t)); // 投影参数限制在线段内 const closestX ax abx * t; const closestY ay aby * t; const dx ball.x - closestX; const dy ball.y - closestY; const dist Math.sqrt(dx * dx dy * dy); if (dist ball.radius 4) { // 杆子粗细按 4 算 // 计算法线方向 const nx dx / dist; const ny dy / dist; // 把球推出去防止卡在杆子里 const overlap ball.radius 4 - dist; ball.x nx * overlap; ball.y ny * overlap; // 速度沿法线反射 const dot ball.vx * nx ball.vy * ny; ball.vx (ball.vx - 2 * dot * nx) * ball.bounce; ball.vy (ball.vy - 2 * dot * ny) * ball.bounce; // 如果杆子正在被拖动给球一个额外的推力 if (rod.isDragging) { ball.vx nx * 2; ball.vy ny * 2; } } }这段碰撞检测用的是“点到线段最短距离”法比矩形碰撞更贴合杆子的实际形状。t参数把投影点限制在线段范围内避免球在杆子延长线上被误判。overlap推出操作是防止球陷入杆子后反复触发碰撞导致抖动。bounce设 0.7 左右手感比较弹设 1.0 会永远不衰减设太低球就弹不起来了。gravity0.4 是以 60fps 为基准的每帧增量实际用dt/16.67做了时间归一化。3. 关卡数据怎么组织才能方便扩展3.1 用 JSON 数组描述每一关的杆子、球和目标关卡数据如果硬编码在逻辑里加一关就要改代码后期维护很痛苦。常见做法是把每关的初始状态抽成 JSON 对象游戏启动时读第一关过关后加载下一关。一个关卡包含杆子的固定端位置、可拖拽端初始位置、球的初始位置和速度、目标区域的位置和大小、可能还有静态障碍物。const levels [ { id: 1, rod: { anchorX: 400, anchorY: 550, tipX: 400, tipY: 350 }, ball: { x: 400, y: 150, vx: 0, vy: 0 }, goal: { x: 650, y: 100, w: 80, h: 80 }, obstacles: [] }, { id: 2, rod: { anchorX: 200, anchorY: 500, tipX: 200, tipY: 300 }, ball: { x: 200, y: 100, vx: 2, vy: 0 }, goal: { x: 600, y: 400, w: 80, h: 80 }, obstacles: [ { x: 350, y: 200, w: 30, h: 200 } ] }, { id: 3, rod: { anchorX: 600, anchorY: 500, tipX: 600, tipY: 300 }, ball: { x: 600, y: 100, vx: -1, vy: 0 }, goal: { x: 150, y: 150, w: 80, h: 80 }, obstacles: [ { x: 300, y: 300, w: 200, h: 30 }, { x: 500, y: 150, w: 30, h: 150 } ] } ]; let currentLevelIndex 0; function loadLevel(index) { const level levels[index]; if (!level) { // 全部通关 alert(恭喜通关); return; } rod.anchorX level.rod.anchorX; rod.anchorY level.rod.anchorY; rod.tipX level.rod.tipX; rod.tipY level.rod.tipY; ball.x level.ball.x; ball.y level.ball.y; ball.vx level.ball.vx; ball.vy level.ball.vy; goal.x level.goal.x; goal.y level.goal.y; goal.w level.goal.w; goal.h level.goal.h; obstacles level.obstacles || []; }这种结构的优点是加关卡就是往数组里 push 一个对象不需要动逻辑代码调试某一关时可以直接改 JSON 里的数值刷新页面就能看到效果。obstacles数组里每个矩形用x, y, w, h描述碰撞检测时遍历判断球是否与矩形相交即可。注意goal的判定不要用球心用球的外接矩形和 goal 矩形做 AABB 相交否则球稍微擦边就算过关玩家会觉得莫名其妙。3.2 过关判定与关卡切换的时机控制过关判定看起来简单但时机不对会出现“球还没进洞就切关了”或者“球在目标区域里弹了好几次才判定”的问题。稳妥做法是每帧检测球与 goal 的相交一旦相交就标记levelComplete true然后等球的速度降到某个阈值以下或者等一个短暂的延迟比如 500ms再切换到下一关。这样玩家能看到球进洞的动画不会觉得突兀。let levelComplete false; let completeTimer 0; function checkGoal() { if (levelComplete) return; // AABB 相交检测 const ballLeft ball.x - ball.radius; const ballRight ball.x ball.radius; const ballTop ball.y - ball.radius; const ballBottom ball.y ball.radius; const goalLeft goal.x; const goalRight goal.x goal.w; const goalTop goal.y; const goalBottom goal.y goal.h; if (ballRight goalLeft ballLeft goalRight ballBottom goalTop ballTop goalBottom) { levelComplete true; completeTimer 0; } } // 在 update 里调用 function update(dt) { if (levelComplete) { completeTimer dt; if (completeTimer 500) { currentLevelIndex; levelComplete false; loadLevel(currentLevelIndex); } return; // 过关动画期间不更新物理 } updateBall(dt); checkGoal(); }completeTimer的 500ms 是经验值太短了玩家没反应过来太长了显得拖沓。levelComplete期间直接 return 不更新物理是为了让球停在目标区域里而不是继续飞出去。如果希望球进洞后有“吸入”效果可以在levelComplete为 true 时让球向 goal 中心插值移动视觉上更舒服。4. 避坑与排查拉杆子游戏最容易翻车的五个地方4.1 球穿过杆子高速下的隧穿效应现象球速很快时明明看到球撞到了杆子却直接穿过去掉到底部。原因每帧只检测一次碰撞如果球在一帧内移动的距离超过杆子的厚度就会从杆子的一侧“跳”到另一侧碰撞检测被跳过。解决两种做法。一是限制球的最大速度比如Math.min(speed, 20)让每帧位移不超过杆子厚度二是做连续碰撞检测把球的移动路径分成若干小段逐段检测。简单场景下限制速度就够了代码里加一行ball.vx Math.max(-20, Math.min(20, ball.vx))即可。4.2 拖拽时杆子抖动或跳变现象拖动杆子时杆子末端突然跳到鼠标位置或者来回抖动。原因pointermove触发频率高于requestAnimationFrame如果直接在事件里改rod.tipX/Y一帧内可能改多次渲染时看到的是最后一次的值但物理更新用的是中间某次的值导致不一致。解决在pointermove里只记录目标位置在update里做平滑插值。比如rod.tipX (targetX - rod.tipX) * 0.3这样杆子跟随更顺滑也避免了事件和渲染帧不同步的问题。4.3 移动端触摸拖拽时页面跟着滚动现象手机上拖杆子页面跟着上下滚动杆子没动。原因浏览器默认把触摸手势解释为页面滚动pointermove被取消。解决Canvas 的 CSS 加touch-action: none并且在pointerdown里调用e.preventDefault()。注意preventDefault要加在pointerdown而不是pointermove否则某些浏览器不生效。另外user-scalableno的 viewport 设置也能减少双指缩放带来的干扰。4.4 关卡切换后球的速度没有重置现象过关后进入下一关球一出来就飞出去或者杆子位置不对。原因loadLevel只重置了位置没有重置速度、拖拽状态、过关标记。解决在loadLevel里把所有动态状态都归零ball.vx 0; ball.vy 0; rod.isDragging false; levelComplete false; completeTimer 0;。血泪经验是任何跨关卡复用的对象都要在加载时显式重置不要依赖上一关的残留值。4.5 高刷新率屏幕下游戏速度变快现象在 120Hz 或 144Hz 屏幕上球飞得比 60Hz 屏幕快一倍。原因物理更新直接用了每帧固定增量没有乘以deltaTime。解决所有速度、加速度相关的更新都要乘以dt / 16.67做归一化。上面代码里的ball.vy ball.gravity * (dt / 16.67)就是这个目的。注意deltaTime要设上限防止切页回来后一帧跳太大导致穿透。5. 进阶技巧用状态机和缓动让手感上一个台阶5.1 把游戏状态抽成有限状态机当游戏逻辑变多——开始界面、游戏中、过关动画、失败重置、暂停——用一堆布尔变量isPlaying、isPaused、isComplete会很快失控。常见做法是引入一个简单的状态机每个状态有enter、update、exit三个钩子。比如const GameState { READY: ready, PLAYING: playing, COMPLETE: complete, GAMEOVER: gameover }; let currentState GameState.READY; const stateHandlers { [GameState.READY]: { enter() { /* 显示开始提示 */ }, update(dt) { /* 等待点击开始 */ }, exit() { /* 隐藏提示 */ } }, [GameState.PLAYING]: { enter() { loadLevel(currentLevelIndex); }, update(dt) { updateBall(dt); checkGoal(); }, exit() { /* 清理 */ } }, [GameState.COMPLETE]: { enter() { completeTimer 0; }, update(dt) { completeTimer dt; if (completeTimer 500) { currentLevelIndex; if (currentLevelIndex levels.length) { switchState(GameState.GAMEOVER); } else { switchState(GameState.PLAYING); } } }, exit() { /* 重置标记 */ } }, [GameState.GAMEOVER]: { enter() { /* 显示通关信息 */ }, update(dt) { /* 等待重新开始 */ }, exit() { /* 重置关卡索引 */ } } }; function switchState(newState) { if (stateHandlers[currentState] stateHandlers[currentState].exit) { stateHandlers[currentState].exit(); } currentState newState; if (stateHandlers[currentState] stateHandlers[currentState].enter) { stateHandlers[currentState].enter(); } }状态机的好处是每个状态的职责清晰加一个“暂停”状态只需要加一个 handler不用在update里写一堆if。switchState里先调exit再调enter保证资源清理和初始化的顺序正确。5.2 用缓动函数优化杆子回弹和球进洞动画拉杆子松开后杆子如果瞬间弹回原位会显得很生硬。用缓动函数做插值手感会柔和很多。常见的缓动有easeOutQuad、easeInOutCubic公式简单不需要引入库。// 缓动函数 function easeOutQuad(t) { return t * (2 - t); } function easeInOutCubic(t) { return t 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t 2, 3) / 2; } // 杆子回弹松开后tip 逐渐回到初始位置 let rodReturning false; let rodReturnProgress 0; const rodReturnDuration 300; // ms function updateRodReturn(dt) { if (!rodReturning) return; rodReturnProgress dt / rodReturnDuration; if (rodReturnProgress 1) { rodReturnProgress 1; rodReturning false; } const t easeOutQuad(rodReturnProgress); rod.tipX rod.tipX (rod.initialTipX - rod.tipX) * t; rod.tipY rod.tipY (rod.initialTipY - rod.tipY) * t; }easeOutQuad的特点是开始快、结尾慢适合杆子回弹这种“先迅速归位、再轻微调整”的场景。easeInOutCubic两头慢中间快适合球进洞时的“吸入”动画。参数上rodReturnDuration设 300ms 左右比较自然太短了像弹簧太长了玩家觉得拖沓。注意缓动函数里的t是 0 到 1 的进度不要直接传毫秒数。5.3 用 localStorage 记录通关进度玩家不想每次刷新都从第一关开始用localStorage存一个最高关卡索引就够了。注意存的时候要 try-catch因为隐私模式下localStorage可能不可用。function saveProgress(levelIndex) { try { localStorage.setItem(rodGame_maxLevel, levelIndex); } catch (e) { // 隐私模式或存储满忽略 } } function loadProgress() { try { const saved localStorage.getItem(rodGame_maxLevel); return saved ? parseInt(saved, 10) : 0; } catch (e) { return 0; } } // 游戏启动时 currentLevelIndex loadProgress(); loadLevel(currentLevelIndex); // 过关时 saveProgress(currentLevelIndex 1);localStorage存的是字符串取出来要parseInt。key 加个前缀rodGame_避免和其他页面冲突。如果存的是关卡索引注意边界最后一关通关后存的是levels.length下次加载时loadLevel发现没有对应关卡应该回到第一关或者显示通关画面。5.4 调试技巧用 URL 参数跳关和显示碰撞盒开发时每次从头玩到某一关很浪费时间。加一个 URL 参数?level3直接跳到第三关再加一个?debug1显示碰撞盒能省很多时间。const urlParams new URLSearchParams(window.location.search); const startLevel parseInt(urlParams.get(level) || 0, 10); const debugMode urlParams.get(debug) 1; currentLevelIndex Math.min(startLevel, levels.length - 1); loadLevel(currentLevelIndex); // 在 render 里 function render() { ctx.clearRect(0, 0, LOGIC_W, LOGIC_H); // 绘制杆子 ctx.beginPath(); ctx.moveTo(rod.anchorX, rod.anchorY); ctx.lineTo(rod.tipX, rod.tipY); ctx.strokeStyle #e94560; ctx.lineWidth 8; ctx.lineCap round; ctx.stroke(); // 绘制球 ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle #0f3460; ctx.fill(); // 绘制目标区域 ctx.fillStyle rgba(255, 215, 0, 0.3); ctx.fillRect(goal.x, goal.y, goal.w, goal.h); // 调试模式显示碰撞盒 if (debugMode) { ctx.strokeStyle lime; ctx.lineWidth 1; ctx.strokeRect(ball.x - ball.radius, ball.y - ball.radius, ball.radius * 2, ball.radius * 2); ctx.strokeRect(goal.x, goal.y, goal.w, goal.h); obstacles.forEach(o { ctx.strokeRect(o.x, o.y, o.w, o.h); }); } }URLSearchParams在现代浏览器里都支持不用自己解析字符串。debugMode下用绿色线框画出碰撞盒能直观看到判定范围和视觉是否一致。我一般会在开发阶段一直开着?debug1上线前再关掉。这个习惯帮我省了很多“看起来撞到了但没判定”的排查时间。5.5 性能注意避免每帧创建新对象在update和render里频繁new Object()或创建数组会加重 GC 负担低端机上可能掉帧。常见做法是把临时变量提到外面复用或者用对象池。比如碰撞检测里的closestX、closestY可以直接用局部变量不用建对象。obstacles.forEach里的回调函数每帧创建一次可以改成for循环。这些微优化在关卡元素少的时候不明显但元素多了之后差距就出来了。希望帮到你。本文还有配套的精品资源点击获取