把真实世界变成游戏地图这种玩法听起来就带感。本篇文章要拆解的 Run With Zombies 正是这种思路下的一个网页游戏用 GPS 锁定玩家在真实街道上的位置然后在周围生成一群僵尸追着你跑坚持时间越久得分越高。整个项目完全运行在浏览器里不需要安装客户端也不需要购买游戏服务器属于典型的 LBSLocation Based Service基于位置的服务小游戏。本文会从零开始带你实现一个可运行的“GPS 僵尸追逐”Demo。你可以把它当成一个独立小项目也可以把它当作学习浏览器定位、地图渲染和游戏逻辑的练习。整个过程会覆盖浏览器 Geolocation API 的用法与定位参数调优经纬度距离计算背后的 Haversine 公式Leaflet 地图渲染与坐标投影玩家位置实时更新、僵尸 AI 追击、碰撞检测常见定位问题的排查思路与工程化建议。适合有一定 HTML/JavaScript 基础、想接触 LBS 和浏览器游戏开发的读者。零基础的同学也不用担心本文会尽量把每个概念都讲清楚代码可以直接复制运行。1. 背景与核心概念1.1 这是一个什么样的游戏Run With Zombies 发布在 Hacker News 的 Show HN 上主打“GPS 僵尸追着你跑”。玩家打开网页后浏览器会申请定位权限拿到你的真实经纬度后地图上会生成玩家蓝点同时在周围一定距离内刷新数个红点僵尸。僵尸会持续朝玩家当前位置移动当两者距离小于某个阈值时游戏结束最终存活时间就是成绩。这种游戏最吸引人的地方在于“真实场景”。你在公园里的每一次移动都会影响到地图上的位置跑步转弯、走进巷子、跑到路对面都会有实际反馈。相比传统纯虚拟地图上的摇杆操作它的沉浸感强很多也更有运动属性。1.2 位置类游戏的技术形态位置类游戏可以按实现复杂度分成几种形态纯前端单机 Demo浏览器获取 GPS本地维护地图和游戏实体。适合小范围活动、技术演示也是本文要实现的版本。客户端上报 服务端广播玩家通过 WebSocket 等通道把位置上传到服务器服务器维护统一游戏状态并广播给其他玩家。适合多人真机游戏。嵌入式设备 Web 平台例如用 STM32 GPS 模块采集位置通过 MQTT 上报服务端再在 Web 端展示和联动。这个方向常用于资产追踪、巡检打卡。本文先走通第一种形态后续扩展再延伸到多人服务端。1.3 为什么值得动手实现浏览器定位相关的知识其实比想象中要多定位精度、坐标系、时序回调、地图投影、性能优化每一个点单独拿出来都能踩不少坑。而“僵尸追你”这个小游戏恰好能把它们串成一条完整链路让你边玩边学。从工程角度来说这套技术也能复用到很多真实业务中比如户外打卡与巡检员工到达指定坐标后自动打卡跑步与骑行记录实时记录轨迹并计算里程景区寻宝与营销活动玩家到达某地点后解锁任务。因此即使你不需要做游戏掌握地理定位与地图渲染的基本流程也是有价值的。2. 环境准备与版本说明2.1 开发环境说明本文示例使用纯 HTML/CSS/JavaScript 实现不需要构建工具。请准备以下环境操作系统Windows、macOS、Linux 均可浏览器Chrome、Edge、Safari 等现代浏览器本地静态服务器VS Code 的 Live Server 插件或 Python 自带的 http.server地图库Leaflet 1.9.4通过 CDN 引入地图瓦片OpenStreetMap 免费瓦片适合开发测试。这里有一个关键前提浏览器 Geolocation API 只在安全上下文HTTPS或 localhost 环境下可用。因此开发时直接通过http://localhost访问即可手机真机测试时需要把页面部署到 HTTPS 地址否则无法调用定位。2.2 项目目录结构为了便于维护我们把代码按职责