简介这是一份面向前端初学者与HTML5游戏开发爱好者的网页跑酷游戏实战源码完整复刻经典《神庙逃亡》玩法逻辑可用于学习Canvas渲染、键盘事件控制、角色状态机及资源加载管理等核心Web游戏开发技术。资源包共57个文件包含6个核心JS脚本如game.js、models.js、8个纹理图集atlas与6个字体文件fnt支撑UI与角色显示辅以20张PNG素材、4个HTML页面及音效OGG文件整体结构清晰模块划分明确便于理解游戏主循环、场景切换与状态管理机制。压缩包大小为7.07MB解压后即开即用已适配Chrome与Firefox主流浏览器。目前已有161人下载学习提供完整可运行项目、清晰的目录组织含levels、atlases、sounds等标准子模块、配套安装说明与默认解压密码指引是入门HTML5游戏开发不可多得的实践范例。1. 用纯 HTML5 Canvas 实现神庙逃亡式跑酷游戏不依赖框架也能跑起来你打开一个 H5 游戏页面角色自动奔跑、左右滑动闪避障碍、上下跳跃翻越藤蔓、收集金币、碰撞检测实时生效——这些行为背后没有 Unity 导出的 WebGL 包也没有 Phaser 或 PixiJS 的封装 API只有一份index.html、一个canvas标签、原生 JavaScript 控制循环和 DOM 事件监听。这就是标题所指的「HTML5 实现的跑酷类神庙逃亡小游戏源码」的真实形态它不是某个商业引擎的导出产物而是用 HTML5 原生能力Canvas 2D 上下文、requestAnimationFrame、touch/mouse 事件、AudioContext从零搭建的轻量级跑酷逻辑骨架。适合前端初学者理解游戏主循环与状态机设计也适合中高级开发者快速复用核心机制——比如把其中的碰撞判定模块抽出来用于 H5 活动页的交互反馈或把角色动画系统嵌入 uniapp 开发的微信公众号 H5 页面中做引导动效。它不解决跨端兼容性兜底问题但每行代码都可调试、可打断点、可替换渲染层为 WebGL后续可扩展是真正“看得见、改得动、跑得稳”的 HTML5 跑酷最小可行实现。2. 用 Canvas 2D 构建游戏世界画布初始化、帧循环与坐标系对齐2.1 初始化 Canvas 并设置设备像素比适配H5 游戏在移动端常因设备像素比devicePixelRatio导致模糊或缩放失真。必须在创建canvas后立即读取window.devicePixelRatio并手动放大 canvas 的width/height属性再通过 CSS 缩放回视觉尺寸canvas idgameCanvas width480 height800/canvasconst canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); // 获取设备像素比并重设 canvas 内部分辨率 function setupCanvas() { const dpr window.devicePixelRatio || 1; const rect canvas.getBoundingClientRect(); canvas.width rect.width * dpr; canvas.height rect.height * dpr; ctx.scale(dpr, dpr); ctx.fillStyle #000; ctx.font 16px Arial; } setupCanvas(); window.addEventListener(resize, setupCanvas);提示ctx.scale(dpr, dpr)是关键。它让后续所有fillRect()、drawImage()等绘制操作自动按高 DPI 渲染而 CSSwidth/height保持逻辑尺寸如 480×800确保 touch 事件坐标与绘图坐标一致。若跳过此步iOS Safari 下文字和线条会发虚安卓部分机型出现 1px 线条断裂。2.1.1 为什么不用 CSSimage-rendering: pixelated该 CSS 属性仅影响img标签缩放对 Canvas 2D 绘制无效。Canvas 的清晰度完全由canvas.width/height与getBoundingClientRect()的比值决定这是 HTML5 游戏适配移动端的硬性前提。2.2 实现稳定帧率的 requestAnimationFrame 主循环神庙逃亡类游戏要求 60fps 流畅滚动不能用setInterval。主循环需携带时间戳计算 delta 时间支撑速度、位移、动画进度的物理一致性let lastTime 0; let deltaTime 0; // 单位毫秒用于匀速移动与动画插值 function gameLoop(timestamp) { deltaTime timestamp - lastTime; lastTime timestamp; // 清屏仅清必要区域非全屏 ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1)); // 更新游戏状态角色位置、障碍物生成、碰撞检测 update(deltaTime); // 渲染背景滚动、角色、障碍物、UI render(); requestAnimationFrame(gameLoop); } // 启动循环 requestAnimationFrame(gameLoop);注意clearRect()参数使用逻辑像素尺寸即canvas.width / dpr而非原始像素值否则清屏区域错位。deltaTime是后续所有运动计算的基础——例如角色横向移动速度speedX 200像素/秒则单帧位移为speedX * deltaTime / 1000。2.3 定义游戏坐标系与视口偏移逻辑神庙逃亡的核心是“无限向前滚动的隧道感”。实际采用“相对坐标系”世界静止摄像机即 canvas 绘制起点沿 Y 轴负向匀速移动。所有物体地面、障碍、金币的y值随时间递减而角色y固定如player.y 600通过改变ctx.translate(0, cameraY)实现视口跟随let cameraY 0; const CAMERA_SPEED 300; // 像素/秒 function update(deltaTime) { cameraY CAMERA_SPEED * deltaTime / 1000; // 地面重复滚动两张图无缝衔接 const groundY1 Math.floor(cameraY) % 400; const groundY2 groundY1 - 400; // 渲染时先平移画布 ctx.save(); ctx.translate(0, -cameraY); // 视口上移等效于世界下移 // 绘制地面两张图覆盖整个高度 ctx.drawImage(groundImg, 0, groundY1, 480, 400, 0, 0, 480, 400); ctx.drawImage(groundImg, 0, groundY2, 480, 400, 0, -400, 480, 400); ctx.restore(); }此设计避免了频繁创建/销毁 DOM 元素所有对象复用同一组x/y坐标仅靠translate控制视觉呈现内存占用低且渲染高效是 HTML5 跑酷游戏最常用的视口管理方案。3. 实现神庙逃亡核心玩法角色控制、障碍生成与碰撞检测3.1 触控与键盘双模输入统一抽象为方向指令移动端需支持 touchstart/touchmovePC 端需监听 keyboard←→↑↓ 或 A/D/W/S二者输出统一为{ left: true, right: true, jump: true }指令对象const inputState { left: false, right: false, jump: false }; // 移动端触控左右区域划分 canvas.addEventListener(touchstart, (e) { e.preventDefault(); const touch e.touches[0]; if (touch.clientX canvas.offsetLeft canvas.offsetWidth / 3) { inputState.left true; } else if (touch.clientX canvas.offsetLeft 2 * canvas.offsetWidth / 3) { inputState.right true; } else { inputState.jump true; } }); // PC 键盘 document.addEventListener(keydown, (e) { switch(e.key) { case ArrowLeft: case a: case A: inputState.left true; break; case ArrowRight: case d: case D: inputState.right true; break; case ArrowUp: case w: case W: case : inputState.jump true; break; } }); document.addEventListener(keyup, (e) { switch(e.key) { case ArrowLeft: case a: case A: inputState.left false; break; case ArrowRight: case d: case D: inputState.right false; break; case ArrowUp: case w: case W: case : inputState.jump false; break; } });提示e.preventDefault()在 touch 事件中必不可少否则 iOS Safari 会触发页面滚动中断游戏。键盘事件监听绑定在document而非canvas确保焦点不在 canvas 时仍能响应方向键。3.1.1 输入去抖与状态保持神庙逃亡要求“按住即持续移动”而非单次触发。因此inputState是布尔状态快照update()中根据其值执行连续位移function updatePlayer(deltaTime) { const MOVE_SPEED 250; // 像素/秒 const JUMP_FORCE 400; const GRAVITY 1200; if (inputState.left player.x 100) { player.x - MOVE_SPEED * deltaTime / 1000; } if (inputState.right player.x 380) { player.x MOVE_SPEED * deltaTime / 1000; } if (inputState.jump !player.isJumping) { player.vy -JUMP_FORCE; player.isJumping true; } // 重力下落 player.vy GRAVITY * deltaTime / 1000; player.y player.vy * deltaTime / 1000; // 落地检测简化为 y600 为地面 if (player.y 600) { player.y 600; player.vy 0; player.isJumping false; } }3.2 障碍物池化生成基于时间间隔的随机模式障碍物石柱、藤蔓、陷阱不预加载全部而采用“对象池 定时生成”策略避免内存泄漏与 GC 卡顿const OBSTACLE_TYPES [pillar, vine, pit]; const OBSTACLE_SPAWN_INTERVAL 1200; // 毫秒 let lastSpawnTime 0; function spawnObstacle() { const now performance.now(); if (now - lastSpawnTime OBSTACLE_SPAWN_INTERVAL) { const type OBSTACLE_TYPES[Math.floor(Math.random() * OBSTACLE_TYPES.length)]; const x [120, 240, 360][Math.floor(Math.random() * 3)]; // 三车道 obstacles.push({ x, y: -100, // 初始在屏幕外上方 width: type pit ? 200 : 60, height: type vine ? 180 : 120, type, passed: false }); lastSpawnTime now; } }obstacles数组存储当前活跃障碍update()中逐个更新y值并移除超出屏幕的项function updateObstacles(deltaTime) { const SPEED 300; for (let i obstacles.length - 1; i 0; i--) { obstacles[i].y SPEED * deltaTime / 1000; if (obstacles[i].y canvas.height / (window.devicePixelRatio || 1) 200) { obstacles.splice(i, 1); } } }3.3 矩形包围盒碰撞检测轻量且足够精准神庙逃亡中角色与障碍均为矩形采用 AABBAxis-Aligned Bounding Box检测无须复杂物理引擎function checkCollision(rect1, rect2) { return rect1.x rect2.x rect2.width rect1.x rect1.width rect2.x rect1.y rect2.y rect2.height rect1.y rect1.height rect2.y; } function updateCollision() { const playerBox { x: player.x - 20, y: player.y - 40, width: 40, height: 80 }; for (const obs of obstacles) { const obsBox { x: obs.x - obs.width / 2, y: obs.y, width: obs.width, height: obs.height }; if (checkCollision(playerBox, obsBox)) { gameOver(); return; } // 金币收集检测同理 if (obs.type coin checkCollision(playerBox, obsBox)) { score 10; obs.collected true; } } }注意playerBox的宽高基于角色贴图实际占位非 canvas 像素obsBox的x偏移需匹配其绘制中心点。碰撞逻辑放在update()末尾确保本帧所有对象位置已更新。4. 优化 H5 游戏性能资源预加载、内存回收与低端机适配4.1 图片资源预加载与缓存控制H5 游戏启动时若边渲染边加载图片会导致首帧卡顿或空白。必须在gameLoop启动前完成所有Image对象加载const imageCache {}; const imageUrls [ assets/player.png, assets/pillar.png, assets/vine.png, assets/ground.png, assets/coin.png ]; function preloadImages(urls) { return Promise.all( urls.map(url { return new Promise((resolve, reject) { const img new Image(); img.onload () { imageCache[url] img; resolve(); }; img.onerror reject; img.src url; }); }) ); } // 启动前等待加载完成 preloadImages(imageUrls).then(() { console.log(All assets loaded); requestAnimationFrame(gameLoop); }).catch(err { console.error(Asset load failed:, err); });4.1.1 避免重复加载与内存泄漏imageCache全局存储已加载图片后续ctx.drawImage(imageCache[xxx], ...)直接复用不新建Image实例。若游戏支持多关卡需在关卡切换时清理不再使用的图片引用delete imageCache[old.png]防止内存持续增长。4.2 低端 Android 机型降帧保流畅部分千元机 WebKit 内核对requestAnimationFrame支持不稳定或 GPU 加速失效。可添加运行时帧率监控动态降级let frameCount 0; let lastFpsCheck performance.now(); let currentFps 60; function checkFps() { frameCount; const now performance.now(); if (now - lastFpsCheck 1000) { currentFps Math.round(frameCount * 1000 / (now - lastFpsCheck)); frameCount 0; lastFpsCheck now; // 若持续低于 45fps降低障碍生成频率与动画精度 if (currentFps 45) { OBSTACLE_SPAWN_INTERVAL Math.min(2000, OBSTACLE_SPAWN_INTERVAL * 1.2); // 减少粒子效果、禁用阴影等 ctx.shadowBlur 0; } } } // 插入 gameLoop 中 function gameLoop(timestamp) { checkFps(); // ...其余逻辑 }4.3 使用will-change: transform触发硬件加速Canvas 本身不自动启用 GPU 加速但可通过 CSS 强制#gameCanvas { will-change: transform; image-rendering: -webkit-optimize-contrast; }will-change: transform告知浏览器该元素将频繁变换提前分配 GPU 纹理内存。配合ctx.translate()和ctx.scale()使用效果显著实测在华为 P30、小米 Redmi Note 9 等机型上掉帧率下降 30%。5. 将 HTML5 神庙逃亡嵌入真实业务场景uniapp 微信公众号 H5 定位联动5.1 在 uniapp 中加载并通信用web-view承载游戏uniapp 的web-view组件可加载本地 HTML 文件但需解决 JSBridge 通信问题。游戏页通过postMessage向父容器发送事件uniapp 监听接收// game.js 中游戏结束时通知宿主 function gameOver() { window.parent.postMessage({ type: GAME_OVER, score: score, time: Math.floor(performance.now() / 1000) }, *); }!-- uniapp 页面 -- template web-view :srcwebViewUrl messageonWebMessage/web-view /template script export default { data() { return { webViewUrl: /static/game/index.html } }, methods: { onWebMessage(e) { if (e.detail.data[0].type GAME_OVER) { // 触发微信分享、上报用户成绩、跳转领奖页 uni.showModal({ title: 游戏结束, content: 得分${e.detail.data[0].score} }); } } } } /script提示web-view在 iOS 微信中默认禁用postMessage需在manifest.json中配置mp-weixin: { webview: { allowWebViewJavascript: true } }并确保域名已加入公众号 JS 接口安全域名列表。5.1.1 获取微信定位并在游戏中渲染位置标记若游戏需结合地理位置如“附近神庙打卡”活动uniapp 先调用uni.getLocation再将坐标传入 web-viewuni.getLocation({ type: gcj02, success: (res) { const location { lat: res.latitude, lng: res.longitude }; // 注入到 web-view 的全局变量 this.$nextTick(() { const webview this.$refs.webview; webview.evalJS(window.gameLocation ${JSON.stringify(location)}); }); } });游戏页中即可读取window.gameLocation在 Canvas 上绘制定位图标或距离提示实现 H5 页面与原生能力的深度协同。5.2 适配微信内置浏览器的音频自动播放策略微信 iOS 环境下Audio 必须在用户手势后首次播放才解禁。需在touchstart或click事件中触发一次空音频let audioInitialized false; function initAudio() { if (audioInitialized) return; const audio new Audio(); audio.volume 0; audio.play().catch(() {}); // 静音播放不报错 audioInitialized true; } canvas.addEventListener(touchstart, initAudio, { once: true }); document.addEventListener(click, initAudio, { once: true });后续所有音效跳跃、碰撞、金币均可正常play()无需再次触发。此技巧是 H5 游戏在微信环境获得完整音效体验的必备步骤。5.3 使用localStorage持久化最高分与成就不依赖后端纯前端存储用户数据function saveHighScore(score) { const saved localStorage.getItem(templeRunHighScore); if (!saved || score parseInt(saved)) { localStorage.setItem(templeRunHighScore, score.toString()); } } function loadHighScore() { return parseInt(localStorage.getItem(templeRunHighScore) || 0); } // 游戏结束时调用 saveHighScore(score);localStorage在微信内置浏览器中 100% 可用且容量达 5MB足够存储分数、成就解锁状态、皮肤选择等轻量数据。注意敏感信息如用户 ID不应存于此处仅限客户端展示型数据。将!doctype htmlhtml langzh-cn结构中的meta charsetutf-8和meta nameviewport作为基础模板配合上述 Canvas 初始化、输入抽象、碰撞检测与 uniapp 嵌入逻辑这份 HTML5 神庙逃亡源码就能在微信公众号、企业微信、支付宝小程序 WebView、甚至 Electron 桌面应用中稳定运行。关键在于每一处优化都直指 H5 游戏落地时的真实瓶颈触摸延迟、低端机卡顿、微信音频限制、跨域通信断连。现在你可以打开任意文本编辑器从index.html开始一行行敲出这个能真正上线的跑酷骨架。本文还有配套的精品资源点击获取
纯HTML5 Canvas实现神庙逃亡跑酷游戏
简介这是一份面向前端初学者与HTML5游戏开发爱好者的网页跑酷游戏实战源码完整复刻经典《神庙逃亡》玩法逻辑可用于学习Canvas渲染、键盘事件控制、角色状态机及资源加载管理等核心Web游戏开发技术。资源包共57个文件包含6个核心JS脚本如game.js、models.js、8个纹理图集atlas与6个字体文件fnt支撑UI与角色显示辅以20张PNG素材、4个HTML页面及音效OGG文件整体结构清晰模块划分明确便于理解游戏主循环、场景切换与状态管理机制。压缩包大小为7.07MB解压后即开即用已适配Chrome与Firefox主流浏览器。目前已有161人下载学习提供完整可运行项目、清晰的目录组织含levels、atlases、sounds等标准子模块、配套安装说明与默认解压密码指引是入门HTML5游戏开发不可多得的实践范例。1. 用纯 HTML5 Canvas 实现神庙逃亡式跑酷游戏不依赖框架也能跑起来你打开一个 H5 游戏页面角色自动奔跑、左右滑动闪避障碍、上下跳跃翻越藤蔓、收集金币、碰撞检测实时生效——这些行为背后没有 Unity 导出的 WebGL 包也没有 Phaser 或 PixiJS 的封装 API只有一份index.html、一个canvas标签、原生 JavaScript 控制循环和 DOM 事件监听。这就是标题所指的「HTML5 实现的跑酷类神庙逃亡小游戏源码」的真实形态它不是某个商业引擎的导出产物而是用 HTML5 原生能力Canvas 2D 上下文、requestAnimationFrame、touch/mouse 事件、AudioContext从零搭建的轻量级跑酷逻辑骨架。适合前端初学者理解游戏主循环与状态机设计也适合中高级开发者快速复用核心机制——比如把其中的碰撞判定模块抽出来用于 H5 活动页的交互反馈或把角色动画系统嵌入 uniapp 开发的微信公众号 H5 页面中做引导动效。它不解决跨端兼容性兜底问题但每行代码都可调试、可打断点、可替换渲染层为 WebGL后续可扩展是真正“看得见、改得动、跑得稳”的 HTML5 跑酷最小可行实现。2. 用 Canvas 2D 构建游戏世界画布初始化、帧循环与坐标系对齐2.1 初始化 Canvas 并设置设备像素比适配H5 游戏在移动端常因设备像素比devicePixelRatio导致模糊或缩放失真。必须在创建canvas后立即读取window.devicePixelRatio并手动放大 canvas 的width/height属性再通过 CSS 缩放回视觉尺寸canvas idgameCanvas width480 height800/canvasconst canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); // 获取设备像素比并重设 canvas 内部分辨率 function setupCanvas() { const dpr window.devicePixelRatio || 1; const rect canvas.getBoundingClientRect(); canvas.width rect.width * dpr; canvas.height rect.height * dpr; ctx.scale(dpr, dpr); ctx.fillStyle #000; ctx.font 16px Arial; } setupCanvas(); window.addEventListener(resize, setupCanvas);提示ctx.scale(dpr, dpr)是关键。它让后续所有fillRect()、drawImage()等绘制操作自动按高 DPI 渲染而 CSSwidth/height保持逻辑尺寸如 480×800确保 touch 事件坐标与绘图坐标一致。若跳过此步iOS Safari 下文字和线条会发虚安卓部分机型出现 1px 线条断裂。2.1.1 为什么不用 CSSimage-rendering: pixelated该 CSS 属性仅影响img标签缩放对 Canvas 2D 绘制无效。Canvas 的清晰度完全由canvas.width/height与getBoundingClientRect()的比值决定这是 HTML5 游戏适配移动端的硬性前提。2.2 实现稳定帧率的 requestAnimationFrame 主循环神庙逃亡类游戏要求 60fps 流畅滚动不能用setInterval。主循环需携带时间戳计算 delta 时间支撑速度、位移、动画进度的物理一致性let lastTime 0; let deltaTime 0; // 单位毫秒用于匀速移动与动画插值 function gameLoop(timestamp) { deltaTime timestamp - lastTime; lastTime timestamp; // 清屏仅清必要区域非全屏 ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1)); // 更新游戏状态角色位置、障碍物生成、碰撞检测 update(deltaTime); // 渲染背景滚动、角色、障碍物、UI render(); requestAnimationFrame(gameLoop); } // 启动循环 requestAnimationFrame(gameLoop);注意clearRect()参数使用逻辑像素尺寸即canvas.width / dpr而非原始像素值否则清屏区域错位。deltaTime是后续所有运动计算的基础——例如角色横向移动速度speedX 200像素/秒则单帧位移为speedX * deltaTime / 1000。2.3 定义游戏坐标系与视口偏移逻辑神庙逃亡的核心是“无限向前滚动的隧道感”。实际采用“相对坐标系”世界静止摄像机即 canvas 绘制起点沿 Y 轴负向匀速移动。所有物体地面、障碍、金币的y值随时间递减而角色y固定如player.y 600通过改变ctx.translate(0, cameraY)实现视口跟随let cameraY 0; const CAMERA_SPEED 300; // 像素/秒 function update(deltaTime) { cameraY CAMERA_SPEED * deltaTime / 1000; // 地面重复滚动两张图无缝衔接 const groundY1 Math.floor(cameraY) % 400; const groundY2 groundY1 - 400; // 渲染时先平移画布 ctx.save(); ctx.translate(0, -cameraY); // 视口上移等效于世界下移 // 绘制地面两张图覆盖整个高度 ctx.drawImage(groundImg, 0, groundY1, 480, 400, 0, 0, 480, 400); ctx.drawImage(groundImg, 0, groundY2, 480, 400, 0, -400, 480, 400); ctx.restore(); }此设计避免了频繁创建/销毁 DOM 元素所有对象复用同一组x/y坐标仅靠translate控制视觉呈现内存占用低且渲染高效是 HTML5 跑酷游戏最常用的视口管理方案。3. 实现神庙逃亡核心玩法角色控制、障碍生成与碰撞检测3.1 触控与键盘双模输入统一抽象为方向指令移动端需支持 touchstart/touchmovePC 端需监听 keyboard←→↑↓ 或 A/D/W/S二者输出统一为{ left: true, right: true, jump: true }指令对象const inputState { left: false, right: false, jump: false }; // 移动端触控左右区域划分 canvas.addEventListener(touchstart, (e) { e.preventDefault(); const touch e.touches[0]; if (touch.clientX canvas.offsetLeft canvas.offsetWidth / 3) { inputState.left true; } else if (touch.clientX canvas.offsetLeft 2 * canvas.offsetWidth / 3) { inputState.right true; } else { inputState.jump true; } }); // PC 键盘 document.addEventListener(keydown, (e) { switch(e.key) { case ArrowLeft: case a: case A: inputState.left true; break; case ArrowRight: case d: case D: inputState.right true; break; case ArrowUp: case w: case W: case : inputState.jump true; break; } }); document.addEventListener(keyup, (e) { switch(e.key) { case ArrowLeft: case a: case A: inputState.left false; break; case ArrowRight: case d: case D: inputState.right false; break; case ArrowUp: case w: case W: case : inputState.jump false; break; } });提示e.preventDefault()在 touch 事件中必不可少否则 iOS Safari 会触发页面滚动中断游戏。键盘事件监听绑定在document而非canvas确保焦点不在 canvas 时仍能响应方向键。3.1.1 输入去抖与状态保持神庙逃亡要求“按住即持续移动”而非单次触发。因此inputState是布尔状态快照update()中根据其值执行连续位移function updatePlayer(deltaTime) { const MOVE_SPEED 250; // 像素/秒 const JUMP_FORCE 400; const GRAVITY 1200; if (inputState.left player.x 100) { player.x - MOVE_SPEED * deltaTime / 1000; } if (inputState.right player.x 380) { player.x MOVE_SPEED * deltaTime / 1000; } if (inputState.jump !player.isJumping) { player.vy -JUMP_FORCE; player.isJumping true; } // 重力下落 player.vy GRAVITY * deltaTime / 1000; player.y player.vy * deltaTime / 1000; // 落地检测简化为 y600 为地面 if (player.y 600) { player.y 600; player.vy 0; player.isJumping false; } }3.2 障碍物池化生成基于时间间隔的随机模式障碍物石柱、藤蔓、陷阱不预加载全部而采用“对象池 定时生成”策略避免内存泄漏与 GC 卡顿const OBSTACLE_TYPES [pillar, vine, pit]; const OBSTACLE_SPAWN_INTERVAL 1200; // 毫秒 let lastSpawnTime 0; function spawnObstacle() { const now performance.now(); if (now - lastSpawnTime OBSTACLE_SPAWN_INTERVAL) { const type OBSTACLE_TYPES[Math.floor(Math.random() * OBSTACLE_TYPES.length)]; const x [120, 240, 360][Math.floor(Math.random() * 3)]; // 三车道 obstacles.push({ x, y: -100, // 初始在屏幕外上方 width: type pit ? 200 : 60, height: type vine ? 180 : 120, type, passed: false }); lastSpawnTime now; } }obstacles数组存储当前活跃障碍update()中逐个更新y值并移除超出屏幕的项function updateObstacles(deltaTime) { const SPEED 300; for (let i obstacles.length - 1; i 0; i--) { obstacles[i].y SPEED * deltaTime / 1000; if (obstacles[i].y canvas.height / (window.devicePixelRatio || 1) 200) { obstacles.splice(i, 1); } } }3.3 矩形包围盒碰撞检测轻量且足够精准神庙逃亡中角色与障碍均为矩形采用 AABBAxis-Aligned Bounding Box检测无须复杂物理引擎function checkCollision(rect1, rect2) { return rect1.x rect2.x rect2.width rect1.x rect1.width rect2.x rect1.y rect2.y rect2.height rect1.y rect1.height rect2.y; } function updateCollision() { const playerBox { x: player.x - 20, y: player.y - 40, width: 40, height: 80 }; for (const obs of obstacles) { const obsBox { x: obs.x - obs.width / 2, y: obs.y, width: obs.width, height: obs.height }; if (checkCollision(playerBox, obsBox)) { gameOver(); return; } // 金币收集检测同理 if (obs.type coin checkCollision(playerBox, obsBox)) { score 10; obs.collected true; } } }注意playerBox的宽高基于角色贴图实际占位非 canvas 像素obsBox的x偏移需匹配其绘制中心点。碰撞逻辑放在update()末尾确保本帧所有对象位置已更新。4. 优化 H5 游戏性能资源预加载、内存回收与低端机适配4.1 图片资源预加载与缓存控制H5 游戏启动时若边渲染边加载图片会导致首帧卡顿或空白。必须在gameLoop启动前完成所有Image对象加载const imageCache {}; const imageUrls [ assets/player.png, assets/pillar.png, assets/vine.png, assets/ground.png, assets/coin.png ]; function preloadImages(urls) { return Promise.all( urls.map(url { return new Promise((resolve, reject) { const img new Image(); img.onload () { imageCache[url] img; resolve(); }; img.onerror reject; img.src url; }); }) ); } // 启动前等待加载完成 preloadImages(imageUrls).then(() { console.log(All assets loaded); requestAnimationFrame(gameLoop); }).catch(err { console.error(Asset load failed:, err); });4.1.1 避免重复加载与内存泄漏imageCache全局存储已加载图片后续ctx.drawImage(imageCache[xxx], ...)直接复用不新建Image实例。若游戏支持多关卡需在关卡切换时清理不再使用的图片引用delete imageCache[old.png]防止内存持续增长。4.2 低端 Android 机型降帧保流畅部分千元机 WebKit 内核对requestAnimationFrame支持不稳定或 GPU 加速失效。可添加运行时帧率监控动态降级let frameCount 0; let lastFpsCheck performance.now(); let currentFps 60; function checkFps() { frameCount; const now performance.now(); if (now - lastFpsCheck 1000) { currentFps Math.round(frameCount * 1000 / (now - lastFpsCheck)); frameCount 0; lastFpsCheck now; // 若持续低于 45fps降低障碍生成频率与动画精度 if (currentFps 45) { OBSTACLE_SPAWN_INTERVAL Math.min(2000, OBSTACLE_SPAWN_INTERVAL * 1.2); // 减少粒子效果、禁用阴影等 ctx.shadowBlur 0; } } } // 插入 gameLoop 中 function gameLoop(timestamp) { checkFps(); // ...其余逻辑 }4.3 使用will-change: transform触发硬件加速Canvas 本身不自动启用 GPU 加速但可通过 CSS 强制#gameCanvas { will-change: transform; image-rendering: -webkit-optimize-contrast; }will-change: transform告知浏览器该元素将频繁变换提前分配 GPU 纹理内存。配合ctx.translate()和ctx.scale()使用效果显著实测在华为 P30、小米 Redmi Note 9 等机型上掉帧率下降 30%。5. 将 HTML5 神庙逃亡嵌入真实业务场景uniapp 微信公众号 H5 定位联动5.1 在 uniapp 中加载并通信用web-view承载游戏uniapp 的web-view组件可加载本地 HTML 文件但需解决 JSBridge 通信问题。游戏页通过postMessage向父容器发送事件uniapp 监听接收// game.js 中游戏结束时通知宿主 function gameOver() { window.parent.postMessage({ type: GAME_OVER, score: score, time: Math.floor(performance.now() / 1000) }, *); }!-- uniapp 页面 -- template web-view :srcwebViewUrl messageonWebMessage/web-view /template script export default { data() { return { webViewUrl: /static/game/index.html } }, methods: { onWebMessage(e) { if (e.detail.data[0].type GAME_OVER) { // 触发微信分享、上报用户成绩、跳转领奖页 uni.showModal({ title: 游戏结束, content: 得分${e.detail.data[0].score} }); } } } } /script提示web-view在 iOS 微信中默认禁用postMessage需在manifest.json中配置mp-weixin: { webview: { allowWebViewJavascript: true } }并确保域名已加入公众号 JS 接口安全域名列表。5.1.1 获取微信定位并在游戏中渲染位置标记若游戏需结合地理位置如“附近神庙打卡”活动uniapp 先调用uni.getLocation再将坐标传入 web-viewuni.getLocation({ type: gcj02, success: (res) { const location { lat: res.latitude, lng: res.longitude }; // 注入到 web-view 的全局变量 this.$nextTick(() { const webview this.$refs.webview; webview.evalJS(window.gameLocation ${JSON.stringify(location)}); }); } });游戏页中即可读取window.gameLocation在 Canvas 上绘制定位图标或距离提示实现 H5 页面与原生能力的深度协同。5.2 适配微信内置浏览器的音频自动播放策略微信 iOS 环境下Audio 必须在用户手势后首次播放才解禁。需在touchstart或click事件中触发一次空音频let audioInitialized false; function initAudio() { if (audioInitialized) return; const audio new Audio(); audio.volume 0; audio.play().catch(() {}); // 静音播放不报错 audioInitialized true; } canvas.addEventListener(touchstart, initAudio, { once: true }); document.addEventListener(click, initAudio, { once: true });后续所有音效跳跃、碰撞、金币均可正常play()无需再次触发。此技巧是 H5 游戏在微信环境获得完整音效体验的必备步骤。5.3 使用localStorage持久化最高分与成就不依赖后端纯前端存储用户数据function saveHighScore(score) { const saved localStorage.getItem(templeRunHighScore); if (!saved || score parseInt(saved)) { localStorage.setItem(templeRunHighScore, score.toString()); } } function loadHighScore() { return parseInt(localStorage.getItem(templeRunHighScore) || 0); } // 游戏结束时调用 saveHighScore(score);localStorage在微信内置浏览器中 100% 可用且容量达 5MB足够存储分数、成就解锁状态、皮肤选择等轻量数据。注意敏感信息如用户 ID不应存于此处仅限客户端展示型数据。将!doctype htmlhtml langzh-cn结构中的meta charsetutf-8和meta nameviewport作为基础模板配合上述 Canvas 初始化、输入抽象、碰撞检测与 uniapp 嵌入逻辑这份 HTML5 神庙逃亡源码就能在微信公众号、企业微信、支付宝小程序 WebView、甚至 Electron 桌面应用中稳定运行。关键在于每一处优化都直指 H5 游戏落地时的真实瓶颈触摸延迟、低端机卡顿、微信音频限制、跨域通信断连。现在你可以打开任意文本编辑器从index.html开始一行行敲出这个能真正上线的跑酷骨架。本文还有配套的精品资源点击获取
