简介一份基于 HTML5 Canvas 与 JavaScript 实现的仿微信跳一跳小游戏源码包面向 Web 前端初学者与 H5 游戏开发爱好者完整复刻了角色跳跃、计分和障碍物交互等核心玩法可在浏览器环境直接运行体验。压缩包共 46 个文件约 557KB以 27 个 JS 逻辑脚本、7 个 PNG 图片素材和 5 个 MP3 音效为主并包含 HTML、CSS、JSON 配置及 README 说明目录结构清晰。目前已有 1201 人学习下载源码按游戏场景、逻辑、音频等模块划分便于对照阅读。通过分析代码可掌握 Canvas 绘图、重力与碰撞检测、得分计算、游戏状态管理以及 requestAnimationFrame 动画循环等关键实现也能了解音频管理和响应式适配思路。适合用于 H5 小游戏开发入门练习或在此基础上扩展关卡设计、角色动画和特效表现。1. H5版仿制微信跳一跳小游戏不靠引擎也能还原核心跳跃手感如果你玩过微信跳一跳一定记得那个小棋子在方块间“砰”地弹跳的感觉——按住屏幕蓄力松手起跳落点决定下一步生死。这套玩法的技术门槛其实不高用原生 Canvas 就能在网页里复刻出八成体验。市面上流传的 H5版仿制微信跳一跳小游戏源码大多也确实是几百行 JavaScript 一个 canvas 标签撑起来的没有引入重型游戏引擎却能把按压蓄力、抛物线跳跃、方块生成、失败判定这些基本核心功能跑通。这篇文章会拆开这类源码的骨架讲清楚跳跃手感是怎么算出来的、方块是怎么“长”出来的、碰撞判定放在哪一步最可靠然后给你一套可以在本地直接跑起来的最小实现。适合三类人想拿这个小游戏练手的前端初学者、需要在 H5 活动页里塞一个轻量交互小游戏的运营开发以及好奇“跳一跳物理逻辑”到底玄学在哪的技术爱好者。跟着做完你会得到一份能玩、能调、能扩展的网页版源码而不是一个只能看不能改的黑匣子。2. 跳一跳的物理与视角先搞懂空中轨迹和伪 3D 坐标映射2.1 跳跃本质初速度、重力与命中判定的三角关系跳一跳的核心动作是“棋子从当前方块顶面以一定初速度飞出受重力影响落到下一个方块上”。在 H5 实现里我们不能用真 3D 物理引擎但可以用最简单的匀变速公式模拟跳跃轨迹水平位移x vx * t垂直位移y -vy * t 0.5 * gravity * t * t屏幕 y 轴向下所以向上跳跃时先取负这里的vx和vy都由按压蓄力时间决定。蓄力越长初速度越大水平飞得越远同时跳得也越高——微信原版就是这样力度和时间成正比。用一个power值0 到 100作为中间量然后const maxPower 100; const speedX power * 0.08; // 水平速度映射可调 const speedY power * 0.12; // 垂直速度映射可调 const gravity 0.8;这段代码的用意是把“蓄力条”转化为物理参数。speedX决定棋子能飞几个方块间距speedY决定跳跃曲线最高点。新手最常见翻车是两轴系数不匹配要么飞得离谱跳得却低棋子直直撞向下一块边缘要么跳得很高却落不远。调试时先固定gravity再调speedX和speedY的比值直到跳跃幅度接近微信原版那种“轻快”感觉。跳跃过程中每一帧更新坐标// 在 requestAnimationFrame 循环中 player.x vx; player.y startY - vy * t 0.5 * gravity * t * t; vy gravity * dt;这里的vx保持恒定vy每帧叠加重力。到vy 0且player.y回到方块顶面高度时落地判定开始。此时需要记录落地点的 x 坐标和下一个方块的 x 范围做比较。参数说明gravity越大跳跃曲线越“重”手感越钝gravity越小空中时间越长玩家会觉得“飘”。我通常从0.6起步逐 0.05 调整。另外注意dt只能用requestAnimationFrame回调里的时间差不能按帧数固定值算不然高刷新率屏幕上棋子会飞得更远。2.2 伪 3D 视角把三维方块压成 Canvas 上的斜向四边形微信跳一跳的画面是等距视角类似《纪念碑谷》看起来方块有立体感但 H5 仿制版大多用一张“俯视斜 45 度”的 2.5D 贴图方案。具体做法是先在逻辑坐标里用平面 2D 位置block.x,block.z表示方块在“地面”上的位置绘制时再用下面的映射投影到屏幕function project(x, z) { const screenX centerX (x - z) * scale; const screenY centerY (x z) * scale * 0.5; return { x: screenX, y: screenY }; }这是等距投影的标准公式x 轴和 z 轴分别方向不同scale 控制缩放。方块顶面变成一个菱形再往下画几条边形成厚度视觉上就是方块。棋子建模可以更偷懒直接用一个小圆形身体 一个半圆头画在一个静态的“胶底”上。绘制顺序必须是“先远后近”第一块方块、棋子、第二块方块……其实只要每次新生成的方块都在同一投影平面上按数组顺序绘制即可不需要深度排序。2.3 方块生成规则距离差和尺寸差才是游戏难度跳一跳的“下一个方块”不是在正前方等距出现而是随机偏移在左右和前后的组合斜角上。常见做法是维护一个blocks数组每块记录x、z、width边长。生成下一块时function generateBlock() { const last blocks[blocks.length - 1]; const side Math.random() 0.5 ? 1 : -1; // 左右方向 const offset 60 Math.random() * 80; // 中心距离差单位像素 const next { x: last.x side * offset, z: last.z (1 - side) * offset * 0.6, width: 60 Math.random() * 40, color: randomColor() }; blocks.push(next); }这里的side决定方块往“左前”还是“右前”偏offset是两方块中心之间的平面距离。为什么offset要加一个随机范围而不是固定值因为完全固定间距会让玩家建立肌肉记忆失去挑战性。同时width也要随机变小否则跳跃难度不会上升。注意这里的 x 和 z 是逻辑坐标不是屏幕上直接可用的坐标。玩家看到的跳跃方向永远是“右上到左下”或“左上到右下”的斜向其实是这个公式的作用。验证方式很简单打印project(x, z)的屏幕坐标观察新方块总是出现在前一方的左上或右上。2.4 棋子跳跃动画与落地回弹跳跃不只是位置变化还要有“压扁-拉伸-回弹”的动画才有橡皮质感。做法是记录一个jumpScale变量在跳跃开始前先缩小身体高度起跳瞬间拉长落地时再压扁一下。代码示例if (state jump) { const progress t / duration; player.scaleY 1 - 0.2 * Math.sin(progress * Math.PI); // 起跳拉长落地压扁 }这个 0.2 的幅度是调出来的。太大会像果冻太小又没有弹性。配合上跳跃曲线“啪”地落地再弹一点手感就出来了。3. 做一个能玩的网页版跳一跳Canvas 迷你项目的完整实现3.1 搭 HTML 骨架和画布初始化首先你需要一个非常简单的 HTML 页面。整个游戏只依赖一个canvas外加一个script标签。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno titleH5仿跳一跳/title style body { margin: 0; overflow: hidden; background: #f5f5f5; } canvas { display: block; } #tip { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); font: 20px sans-serif; color: #333; } /style /head body canvas idgameCanvas/canvas div idtip按住屏幕蓄力松开跳/div script srcgame.js/script /body /html注意user-scalableno是为了防止手机浏览器双击缩放干扰按压操作。桌面端点击mousedown/mouseup和移动端触摸touchstart/touchend需要统一处理。初始化画布时要把设备像素比纳入考虑否则手机上会模糊const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); const dpr window.devicePixelRatio || 1; canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; ctx.scale(dpr, dpr);3.2 用 classes 管理游戏对象接下来定义方块和棋子。不引入框架就用两个构造函数class Block { constructor(x, z, width, color) { this.x x; this.z z; this.width width; this.color color; } // 用等距投影得到屏幕坐标 screenCenter() { const s project(this.x, this.z); return s; } } class Player { constructor(x, z) { this.x x; this.z z; this.standingOn 0; // 当前站立的方块索引 } }方块不直接存屏幕坐标而是每次绘制时动态投影。好处是视角缩放、画布大小调整时不用重建数据。project函数放到公共区域接受逻辑坐标返回屏幕坐标。3.3 方块绘制顶面 两个侧面 底部阴影一个方块在 Canvas 里可以画成三个四边形顶面菱形、左侧面、右侧面。顶面颜色最亮侧面颜色依次变暗能立刻产生立体感。绘制函数function drawBlock(block) { const p project(block.x, block.z); const w block.width * scale; // 顶面四个顶点 const topLeft { x: p.x - w / 2, y: p.y - w / 2 * 0.3 }; const topRight { x: p.x w / 2, y: p.y - w / 2 * 0.3 }; const bottomRight { x: p.x w / 2, y: p.y w / 2 * 0.3 }; const bottomLeft { x: p.x - w / 2, y: p.y w / 2 * 0.3 }; // 顶面 ctx.fillStyle block.color; ctx.beginPath(); ctx.moveTo(topLeft.x, topLeft.y); ctx.lineTo(topRight.x, topRight.y); ctx.lineTo(bottomRight.x, bottomRight.y); ctx.lineTo(bottomLeft.x, bottomLeft.y); ctx.closePath(); ctx.fill(); // 侧面简化左右两个三角形/梯形 }这里scale是一个全局变量控制整个场景大小。真正完整的代码里侧面要按投影方向偏移但最小 demo 可以只画顶面加一条底边足够看出立体感。3.4 蓄力与跳跃交互Mouse/Touch 的按下、松开事件跳一跳的蓄力不是越久越好而是有一个上限并且要在 UI 显示一个蓄力条。事件处理如下let pressing false; let power 0; let pressStartTime 0; canvas.addEventListener(mousedown, (e) { pressing true; pressStartTime Date.now(); power 0; }); canvas.addEventListener(mouseup, (e) { if (!pressing) return; pressing false; const elapsed Date.now() - pressStartTime; power Math.min(elapsed / 20, 100); // 50ms 到 100 力度可调 jump(power); }); // 触摸事件映射到相同逻辑 canvas.addEventListener(touchstart, (e) { e.preventDefault(); pressing true; pressStartTime Date.now(); power 0; }); canvas.addEventListener(touchend, (e) { e.preventDefault(); if (!pressing) return; pressing false; const elapsed Date.now() - pressStartTime; power Math.min(elapsed / 20, 100); jump(power); });参数说明elapsed / 20意味着按住 2 秒满力。实际调试时可以改成 15 或 25按得短一点就满力。这个值直接决定游戏难度建议先设 25 给新手再收紧到 18。3.5 跳动核心函数 update()跳到中间的物理实现不放在事件回调里而是放进一个游戏主循环。jump(power)只是设置目标速度和状态真正的坐标变化在update()里每帧计算let state stand; // stand | fly | finish let vx 0, vy 0; let startX 0, startZ 0, startY 0; let t 0; function jump(power) { if (state ! stand) return; startX player.x; startZ player.z; startY 0; // 方块顶面的 y逻辑坐标 0 vx power * 0.08; // 这里 0.08 还是需要根据 distance 调 vy power * 0.12; state fly; t 0; } function update(dt) { if (state ! fly) return; t dt; player.x startX vx * t; const zOffset t * vx * 0.5; // 注意我们如何让玩家在 z 方向也前进 player.z startZ zOffset; const y startY (-vy * t 0.5 * gravity * t * t); player.y y; if (y 0) { // 落地 player.y 0; state finish; checkLanding(); } }这里有一个坑跳一跳是“斜向前跳”也就是说玩家不仅在 x 方向移动也在 z 方向移动。如果只给vx而 z 方向不变化棋子只能横着跳视角就歪了。常见做法是让 z 方向速度和 x 方向绑定一个比例例如vz vx * 0.5并且vz的正负由跳跃方向决定。更好的方式是在跳跃前根据下一个方块相对当前方块的方向计算vx和vz的分量const dx nextBlock.x - player.x; const dz nextBlock.z - player.z; const distance Math.sqrt(dx * dx dz * dz); const dirX dx / distance; const dirZ dz / distance; vx dirX * power * speedFactor; vz dirZ * power * speedFactor;这样玩家朝目标方块的直线方向跳泛用性最强。代码里把vz加进 update 的player.z更新即可。3.6 失败判定逻辑落在方块边缘内才算成功落地后不能只判断“有没有碰到方块”因为跳太远超出方块也是失败。准确判定检查玩家的落点坐标也就是(player.x, player.z)是否落在目标方块的正方形范围内在方块坐标系的边长为block.width的方形区域。由于方块在逻辑坐标里是正方形判定非常简单function checkLanding() { const target blocks[player.standingOn 1]; if (!target) { gameOver(win); return; } const half target.width / 2; if (Math.abs(player.x - target.x) half Math.abs(player.z - target.z) half) { // 成功玩家站上目标方块 player.standingOn; state stand; score; generateBlock(); // 生成下一个 } else { // 落空或落在边缘外 state dead; drawGameOver(); } }注意如果你的跳跃方向使用了dirX、dirZ且是按中心点瞄准那判定条件就是鼻尖到方块中心距离小于半边长。边缘判定误差要保留 2~3 像素的“安全缓冲”否则视觉上踩到边缘也会判失败玩家会骂游戏“判定太严格”。3.7 分数和重新开始分数只是计数器每次成功落地加一分。重新开始要重置所有全局变量和方块数组并重新生成前两块。这里给一个最小的 resetfunction resetGame() { blocks []; score 0; state stand; generateBlock(); generateBlock(); player.x blocks[0].x; player.z blocks[0].z; player.standingOn 0; }注意初始玩家要站在第一块方块中心而不是 (0,0)否则画面上棋子会飘在外面。4. 手感调优四个必调参数和它们的影响边界4.1 力度系数 speedFactor决定手游感的生死线前面代码里power * speedFactor中的speedFactor是最关键的参数。它表示“满蓄力时棋子能飞多远”。假设方块间距的平均值是 100玩家蓄满力需要 2 秒那么speedFactor可以这么估算const averageDistance 100; const averagePower 50; speedFactor averageDistance / averagePower; // 约 2但实际还要把跳跃时间和重力加进来所以更稳的方式是按“目标距离”反向调参先固定gravity 0.8然后走测试跳打印出实际飞行距离调speedFactor直到满力能跳过 1.5 个平均间距。我一般把满力最大距离设为平均间距的 1.8 倍这样玩家即使按过头一点也还有救但不会完全失控。给出一个可运行的调试函数function debugJumpDistance() { const power 100; // 用空中总时间算水平距离t_max 2 * vy / gravity const vy power * 0.12; const tMax 2 * vy / gravity; const distance power * speedFactor * tMax / 10; // 粗略估算 console.log(理论距离:, distance); }这里的/10是单位缩放示例具体要跟你的坐标尺度一致。不要迷信公式打印实测值调。4.2 方块宽度、间距与蓄力满值的联动关系当方块开始随机变窄跳跃难度不能只靠玩家控制精度。好的源码会让“下一个方块的中心距离”和“该方块宽度”相关如果宽度变小那么距离也小一点否则小窄方块永远跳不过。你的生成规则可以写成const widthFactor 0.8 Math.random() * 0.4; // 0.8~1.2 const nextWidth baseWidth * widthFactor; const minDistance nextWidth * 0.7 30; const maxDistance nextWidth * 1.3 50; const offsetDistance minDistance Math.random() * (maxDistance - minDistance);这样窄方块出现在较近处宽方块允许更远。这个规则能明显降低“随机卡死进度”的概率。4.3 蓄力条速度和颜色的视觉反馈蓄力过程必须可视化否则玩家不知道按了多久。常见做法是画一个屏幕底部的能量条或者在棋子脚下画一条上升的竖线。能量条进度power/100颜色从绿色渐变到红色代码function drawPowerBar() { if (power 0) return; const w 100; const h 10; const x canvas.width / 2 - w / 2; const y canvas.height - 50; ctx.fillStyle hsl(${120 - power * 1.2}, 70%, 50%); ctx.fillRect(x, y, w * power / 100, h); }这里的hsl色相从 120绿随 power 降到 0红直观提示力度。手快玩家靠余光就能控制。4.4 视角缩放和相机跟随当玩家跳到很远的方块上如果不移动镜头画面会跑出视野。H5 跳一跳源码有两种做法一种是让方块阵列始终居中整个世界跟随玩家移动另一种是相机逐渐跟随。最简单的是“世界平移”计算所有方块的屏幕坐标时减去一个偏移量让当前玩家所在方块保持在屏幕中心偏下位置。function project(x, z) { const screenX centerX (x - z) * scale - cameraOffsetX; const screenY centerY (x z) * scale * 0.5 - cameraOffsetY; return { x: screenX, y: screenY }; }每一帧把cameraOffsetX/cameraOffsetY平滑地向玩家目标位置移动cameraOffsetX (playerScreenX - cameraOffsetX) * 0.05; cameraOffsetY (playerScreenY - cameraOffsetY) * 0.05;注意这里跟踪的是玩家屏幕位置与相机中心位置的差。0.05 是平滑系数越小越缓0.1 会有点跟手。不要让相机硬跳观感很差。4.5 移动端 vs 桌面端的输入差异处理桌面端mousedown和移动端touchstart行为不一样移动端触摸时会触发浏览器的滚动和缩放所以必须preventDefault。还要防止触摸结束事件被系统夺走建议把监听绑定到canvas而不是window。另一个坑是当你把页面嵌入到 App 的 WebView 时触摸事件可能被客户端拦截你可以加一个兜底监听touchcancel视为松开避免玩家按住不放时跳到失败。5. 避坑与常见问题跳一跳源码里的四个翻车点5.1 玩家跳起来后画面中棋子“钻”进方块里现象棋子在空中正常但下落时直接穿过方块或者落在方块侧面外。原因把方块画成了伪 3D 四边形但跳跃物理里的y坐标和屏幕坐标y混淆了。你的物理逻辑可能只在逻辑层用player.y表示高度但绘制时把该值直接加到了屏幕 y 坐标上导致看起来像斜着飞。实际上逻辑高度 y 应该映射到屏幕 y 的减法方向屏幕 y 越小表示画面越高而逻辑 y 越大表示越高所以绘制时screenY baseScreenY - player.y * scale。解决统一用一个logicToScreen函数把逻辑 x、z、y 都传入返回屏幕坐标function project(x, z, y 0) { const screenX centerX (x - z) * scale - camX; const screenY centerY (x z) * scale * 0.5 - camY - y * scale; return { x: screenX, y: screenY }; }然后高度方向额外乘一个比例。如果跳跃高度比较大可能需要缩小yScale否则飞起来会出画。5.2 高刷屏120Hz上跳得比电脑上远现象同一力度在 144Hz 显示器上跳得比 60Hz 屏远游戏难度不一致。原因主循环使用了固定的帧间隔计算位移比如speedX * 1但真实帧率更高时每帧更新的次数变多累积位移自然变大。正确做法是用requestAnimationFrame的时间戳差值dt毫秒来乘速度let lastTime 0; function gameLoop(timestamp) { const dt (timestamp - lastTime) / 16.7; // 归一化到 60fps lastTime timestamp; update(dt); }dt在 120Hz 屏上大约是 0.560Hz 是 1。所有位移、重力更新都要乘这个dt否则物理在不同设备上不一致。5.3 方块生成到镜头之外跳跃时画面一片空白现象新方块生成在很远的位置玩家蓄力到最大也跳不过去好像关卡断了。原因offsetDistance的随机范围上限太大或者没有根据power最大距离做约束。当你使用随机宽度时可能会生成一个 extreme case下一块方块中心距离 300但满力只能跳 250必然跳不过去。解决每次生成下一个方块时计算最大可跳距离并把距离上限限制在这个值的 90% 以内const maxJumpDistance maxPower * speedFactor * 1.2; const maxOffset maxJumpDistance * 0.9 - blockWidth / 2 - last.width / 2; const actualOffset Math.min(randomOffset, maxOffset);这样保证理论上一定可以跳到具体靠玩家操作精度。当然如果你故意想做“无解”关卡可以把上限放宽一点但默认不要。5.4 点击屏幕会把页面上的按钮也触发了现象在嵌到 H5 活动页里时玩家点击游戏区域时还会触发页面底下其他元素的点击。原因游戏画布没有阻止事件冒泡也没有把底层 DOM 的 pointer 事件隔离。虽然你给 canvas 绑了事件但手指在 canvas 上滑动时页面其他区域的click事件依然会冒泡。解决在 canvas 的touchstart和mousedown回调里主动e.stopPropagation()另外把 canvas 的样式层级设置为高于页面其他元素position: fixed; z-index: 10。如果游戏是全屏沉浸式还要给 body 加touch-action: none阻止浏览器的默认滚动手势。5.5 蓄力期间手指滑动导致蓄力中断现象玩家按住的时候如果手指轻微移动蓄力条突然清零跳跃没触发。原因某些浏览器对touchmove会取消touchstart的连续状态或者你的代码在touchmove里误处理了松手事件。跳一跳要求按住期间不响应移动。解决在touchmove里不要做任何取消处理并且加上一句event.preventDefault()防止页面滚动。如果是多指触控还要记录touches[0].identifier只监听第一根手指直到它抬起。6. 进阶技巧让 H5 跳一跳从“能玩”到“好玩”如果你已经跑通了上面这套核心逻辑接下来可以花 30 分钟加三个小功能把源码和市面上的普通 demo 拉开差距。第一个是“跳跃前画出虚拟轨迹预测”。做法的核心是在蓄力期间不直接把棋子推出去而是用power实时计算一条抛物线用一组小圆点画出来。轨迹点计算公式和物理逻辑一致从当前坐标出发每隔固定时间采样位置。这样玩家能看到落点大致在哪判断会更准。实现时注意只显示水平距离不要画到 z 方向的侧面否则轨迹会变成一条斜线干扰判断。轨迹点的半透明画法function drawTrajectory(power) { const vx power * speedFactor * dirX; const vz power * speedFactor * dirZ; const vyy power * speedY; for (let i 1; i 20; i) { const t i * 0.05; const px player.x vx * t; const pz player.z vz * t; const lh -vyy * t 0.5 * gravity * t * t; if (lh 0) break; const p project(px, pz, lh); ctx.beginPath(); ctx.arc(p.x, p.y, 4 - i * 0.1, 0, Math.PI * 2); ctx.fillStyle rgba(255,255,255,0.7); ctx.fill(); } }这里的lh是逻辑高度预测点只在lh 0时画。这个功能对新手非常友好但也会降低游戏难度我一般只在调试模式或活动页里用最终版会关掉。第二个是“连续跳跃连击加成”。当玩家落地后 2 秒内再次点击起跳并且这次跳跃也成功则额外加 30% 分数用一个小动画显示在头顶。实现的难点在于落地后要开一个短暂的“连击窗口”窗口内蓄力颜色变成金色。这个功能本质上是给核心循环加一个状态机可以加深你对游戏状态管理的理解。第三个是“最高分本地存储”。不需要后端用localStorage保存最高分每次游戏结束更新并展示在开始层。注意要在游戏结束前存入不能在生成新方块后存否则最高分刷新时机不对。最后说一个我自己的习惯每次调整参数我都会写一个“自动跳跃测试模式”。按空格键脚本会用随机 power 朝正确方向跳 20 次统计成功率。如果成功率低于 40%说明当前物理参数太难需要回调如果高于 90%说明太简单。用这个方式我五分钟左右就能把一套新尺寸的方块调到合理区间而不是全靠人肉试玩去猜。希望这篇笔记能帮你绕过我在仿制跳一跳时踩过的那些坑。每个人对“手感”的偏好不同最后还是得回到你自己的游戏里去调那几根参数。祝做了个好玩的 H5 小游戏希望帮到你。本文还有配套的精品资源点击获取