简介这是一份专为JavaScript初学者与游戏开发爱好者准备的多实例源码合集汇集了字母华容道、打蜜蜂、俄罗斯方块、拼图游戏、推箱子、五子棋等经典小游戏用于通过完整可运行代码理解JS交互逻辑、DOM操作与Canvas绘图等核心技能。压缩包共60个文件以htm、txt、ini居多辅以少量css、gif和db整体仅78KB下载快、便于逐个阅读每份游戏均能独立运行在浏览器中打开htm即可体验降低了学习门槛。已有868人学习适合边玩边学、对照修改从简单到复杂体会游戏开发思路。文件中既有游戏逻辑实现也包含得分系统、碰撞检测、定时器动画、事件处理、本地存储等知识点的具体应用甚至可看到使用requestAnimationFrame进行性能优化的示例同时不少游戏附有对应txt说明目录按游戏名称独立组织方便按需查阅通过阅读源码可以直观了解游戏状态管理、按键监听、胜负判定等常见设计也能在此基础上二次改造生成自己的小游戏。对于想从零上手JS游戏开发或准备课程设计的读者来说是一份很有参考价值的素材。1. JS游戏源代码先让它跑起来再谈看懂它下载过「js游戏源代码」的人十有八九吃过这个亏压缩包解压出来目录里一堆.html、.js、.png双击index.html却只看到一个空白页或者一片黑然后就开始怀疑人生觉得自己连别人写好的代码都跑不起来更别提改。我的习惯是反着来——先让游戏能玩再谈读懂。这套 JS 小游戏源代码合集就是照着「能运行 能读懂 能改」的顺序设计的里面是完整的、原生 JavaScript 写的游戏页面没有框架依赖没有打包构建步骤适合刚学完 HTML/CSS 想找 JS 练手的人也适合课设或毕设想用小游戏做载体的人。你要做的第一件事不是读源码而是把整个目录原样放进本地服务器里跑通然后再拆。2. 源码包结构与选型为什么原生 JS 比框架更适合做游戏源码包2.1 目录里通常有什么入口、资源与脚本的分工解开压缩包后不要急着双击任何文件先对照目录看一遍结构。一套正经的 JS 游戏源码包通常长这样js-game-src/ ├── index.html ├── css/ │ ├── ui.css │ └── game.css ├── js/ │ ├── main.js │ ├── input.js │ ├── scenes/ │ │ ├── menu.js │ │ ├── play.js │ │ └── gameover.js │ └── utils/ │ ├── collision.js │ └── math.js └── assets/ ├── images/ └── sounds/这个分层不是随手分的。index.html是唯一入口负责创建 canvas 和挂载 UIcss管页面布局和菜单样式js/main.js管初始化与游戏主循环js/scenes/把菜单、游戏中和结束画面拆成独立文件避免所有逻辑堆在一个文件里js/utils/放的是与业务无关的通用函数assets只放图片和音频。这么分的核心原因只有一个出问题时你能在五分钟内定位到文件而不是在一个两千行的 JS 文件里来回滚动找 bug。文件/目录职责你改它的频率index.html页面入口、canvas 创建、脚本引入低css/UI 样式、布局、菜单动画中js/main.js初始化、游戏循环、全局状态中js/scenes/各游戏阶段的业务逻辑高js/utils/collision.js碰撞检测等纯函数低assets/图片、音频等静态资源看你美术需求提示如果你下载的包只有一个.html文件、里面把所有 JS 都写在script里也不用嫌弃适合做原型和单页小游戏但一旦游戏逻辑超过三百行我建议你自己动手按上面的目录拆开后面的维护成本会低非常多。2.2 入口页的标准写法script 放哪决定了你会不会白屏很多人在浏览器里打开index.html结果一片白最常见的原因不是代码写错而是script放在了head里。浏览器解析 HTML 时遇到脚本会停下来执行此时 body 里的 canvas 还没生成JS 去getElementById(gameCanvas)只能拿到null后续全部报错页面当然是白的。一个稳的入口页骨架是这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小游戏合集/title link relstylesheet hrefcss/ui.css /head body canvas idgameCanvas/canvas script srcjs/main.js/script /body /html这段代码的关键在两个地方viewport元信息保证移动端打开时不默认缩放script放在 body 最底部保证执行时 DOM 已经全部就绪不需要再写DOMContentLoaded之类的监听器。如果你下载的源码里 script 在 head 中优先把它移到 body 末尾再试一次大部分白屏问题这样就好了。2.3 游戏循环的选型requestAnimationFrame 与 setInterval 的差距比你想的大游戏区别于普通网页应用的核心是它有一个每帧都执行的循环更新逻辑、渲染画面、等待下一帧。很多人初学者抄到的第一版循环是setInterval(update, 16)写起来简单但两个问题很致命一是浏览器切后台后setInterval仍可能继续执行导致 CPU 空转二是它不关心屏幕刷新率在 144Hz 显示器上游戏会明显加速在 60Hz 屏上又可能出现卡顿不均。我一般建议用requestAnimationFrame配合deltaTime两帧间隔秒数来控制游戏速度// js/main.js 核心循环片段 let lastTime 0; function gameLoop(timestamp) { const delta Math.min((timestamp - lastTime) / 1000, 0.05); lastTime timestamp; update(delta); render(); requestAnimationFrame(gameLoop); } requestAnimationFrame(gameLoop);逻辑说明timestamp是浏览器每帧传给回调的高精度时间戳单位毫秒delta是这一帧相对上一帧经过的秒数用来让所有速度值都以「每秒多少像素」来定义。Math.min(..., 0.05)是个保护当浏览器切后台再切回来时timestamp的差值可能高达好几秒如果不加限制游戏角色会瞬间瞬移一大段距离加了这行后最多只按 0.05 秒计算。update里所有移动量写成speed * delta而不是speed这是「能不能拿到 120Hz 屏上跑出一样手感」的分水岭。注意别再在循环里写const now new Date().getTime()来算时间差Date会被系统时间影响而且每帧创建对象会产生 GC 压力timestamp已经够用。3. 核心玩法拆解状态机、输入与碰撞检测的落地写法3.1 游戏状态机菜单、运行、暂停、结束之间的切换大多数小游戏跑起来后背后都是由一个状态驱动现在该显示菜单、该正常游戏、该暂停还是该出结束画面。很多新手会把isGameOver、isPaused这类布尔变量散落在代码各处最后出现「暂停时碰撞检测还在跑」这种诡异 bug。正确做法是集中用一个状态机管理const GameState { MENU: menu, PLAYING: playing, PAUSED: paused, GAMEOVER: gameover }; let state GameState.MENU; let stateEnterTime 0; function changeState(next) { state next; stateEnterTime performance.now(); } function update(delta) { switch (state) { case GameState.MENU: menuUpdate(delta); break; case GameState.PLAYING: playUpdate(delta); break; case GameState.PAUSED: // 暂停时不需要更新任何逻辑 break; case GameState.GAMEOVER: gameOverUpdate(delta); break; } }逻辑说明每个状态对应一个独立的更新函数互不污染。stateEnterTime记录状态进入时刻很多效果会用到比如「进入无敌状态 2 秒」「结束动画播放 1 秒后响应点击」数值由减法得到而不是再拿一个布尔变量去开关。pause 状态单独空着是有意义的明确表示「此刻什么都不更新」比到处加if (!isPaused)干净得多。参数说明performance.now()返回从页面打开到现在的毫秒数比Date.now()更精确且不受系统时间调整影响。如果你想做「游戏中按 P 暂停」的逻辑只需要在键盘监听里判断当前 state是 PLAYING 就切 PAUSED是 PAUSED 再切回 PLAYING几行代码完事。3.2 碰撞检测矩形、圆形与网格三种写法的选型游戏里碰撞检测是最容易出现玄学问题的模块。先说结论用不到像素级碰撞绝大多数 2D 游戏用矩形和圆形碰撞就够了。// js/utils/collision.js // AABB 矩形碰撞适合角色、砖块、弹幕 function hitRect(a, b) { return a.x b.x b.w a.x a.w b.x a.y b.y b.h a.y a.h b.y; } // 圆形碰撞适合子弹、球体、爆炸范围 function hitCircle(a, b) { const dx a.x - b.x; const dy a.y - b.y; const r a.r b.r; return dx * dx dy * dy r * r; }逻辑说明矩形碰撞比较的是四个边界是否重叠注意这里用的是和不是和否则两个刚接触的矩形会被判定为碰撞视觉上就是「还没碰到就掉血」。圆形碰撞比较两个圆心距离是否小于半径之和这里用平方距离dx * dx dy * dy省去开方运算性能更好。参数说明a.w、a.h是矩形宽高a.r是圆半径调用前确保对象上已经挂好这些字段。还有一种情况棋盘类游戏、五子棋、三消这类根本不需要像素碰撞用格子的行号和列号做判断反而是最稳的。我在做这种玩法时习惯把row和col当作对象的唯一定位字段点击时把 canvas 坐标除格子大小取整得到格子位置再去查二维数组绕开碰撞检测这一层配合hitRect做边缘点击容错体验会好很多。3.3 键盘与触摸输入映射桌面实验室能玩手机端也能玩很多源码包桌面端一切正常一放手机上就废了原因多半是只监听了键盘事件没有处理触摸。最省事的方案不是各写一套逻辑而是把两种输入统一映射到一个「按键状态表」里// js/input.js const keys {}; window.addEventListener(keydown, (event) { keys[event.code] true; event.preventDefault(); // 防止空格、方向键触发页面滚动 }); window.addEventListener(keyup, (event) { keys[event.code] false; }); // 移动端把触摸映射到方向键 let touchDir ; canvas.addEventListener(touchstart, (event) { const rect canvas.getBoundingClientRect(); const x event.touches[0].clientX - rect.left; const y event.touches[0].clientY - rect.top; touchDir x rect.width / 2 ? left : right; event.preventDefault(); }, { passive: false });代码说明event.code是物理按键标识比如ArrowLeft、Space、KeyW它不受输入法影响也不会因为你切换键盘布局而改变比keyCode数字可靠得多。keys对象把按键按下状态存成布尔值update 循环里直接判断if (keys[ArrowLeft] || touchDir left)就能同时响应键盘和触摸。{ passive: false }是为了让preventDefault()生效否则移动端滑动页面时触摸事件会先被浏览器吃掉。这里顺便说一句监听click做游戏操作是有延迟的因为浏览器要等你手指抬起并判断是不是滚动动作类游戏一定要用touchstart这个差别在手机上非常明显。4. 把模板改成你自己的玩法参数、关卡与难度曲线4.1 可调参数统一收口所有常量从 config 对象里读拿到手的源码包默认玩法跑通后下一步自然是改。新手最容易翻车的地方是把速度、生命值、生成间隔这些数字散落在各个函数里改一个参数要全局搜索替换。正确做法是开场就建一个配置对象// js/config.js const CONFIG { logicWidth: 800, // 逻辑分辨率宽 logicHeight: 450, // 逻辑分辨率高 playerSpeed: 240, // 玩家移动速度像素/秒 enemySpawnInterval: 1.2,// 敌人生成间隔秒 enemySpeed: 120, // 敌人移动速度像素/秒 maxEnemies: 8, // 同屏敌人上限 playerLives: 3, // 玩家生命数 invincibleTime: 2.0 // 受伤后无敌时间秒 };参数说明logicWidth和logicHeight是内部逻辑分辨率和 canvas 实际显示尺寸分开管理这样在不同屏幕下游戏物体的相对位置不会乱。enemySpawnInterval的单位是秒实际生成时用计时器累加delta累加到大于等于该值就生成一个敌人并清零计时器。invincibleTime是受伤后不可再次受伤的窗口期避免多段碰撞在一帧内触发导致血量瞬间清零。参数名建议取值范围调太大/太小的后果playerSpeed150~350太小操作笨重太大会穿墙enemySpawnInterval0.4~3.0太小同屏爆炸太大无聊enemySpeed80~200太大平均存活时间不足一秒maxEnemies5~20超出设备绘制性能上限会卡4.2 关卡递进用一次函数计算每关数值而不是写死很多模板游戏只有一关你把它复制十份改数字做成十个函数是最差的趟法。正确姿势是让关卡数值由关卡号计算出来// js/level.js function getLevelConfig(level) { return { spawnInterval: Math.max(0.35, CONFIG.enemySpawnInterval - level * 0.1), enemySpeed: CONFIG.enemySpeed level * 22, maxEnemies: Math.min(20, CONFIG.maxEnemies level * 2) }; }这些代码的意思是每过一关敌人生成间隔减 0.1 秒速度加 22 像素/秒同屏上限加 2。关键在于用Math.max和Math.min做钳位——生成间隔不会无限变小跌破 0.35 秒否则第十关以后直接变成不可能通关的弹幕游戏同屏敌人有上限也能保证低端手机不至于被大量对象拖垮。如果你想让关卡难度更长尾可以把线性函数换成speed base * Math.pow(1.15, level)指数曲线更陡。4.3 替换素材与音效路径、格式与缓存三个坑游戏逻辑改完下一步大概率是换图片和音效。最省事且回调风险最低的做法是直接替换同名文件前提是保持原路径不变这样代码里所有loadImage(assets/images/player.png)都不用动。换音频时注意.wav文件体积大是必然的网页里常用.mp3、.ogg和.m4a做兼容编码格式不对时浏览器会报错但不影响主线程表现是「游戏正常但没声音」。// 加载音效并检测失败 function loadSound(src) { return new Promise((resolve, reject) { const audio new Audio(src); audio.addEventListener(canplaythrough, () resolve(audio), { once: true }); audio.addEventListener(error, () reject(new Error(音频加载失败检查编码与路径)), { once: true }); }); }这段代码把音频加载包装成 Promise可以配合Promise.all在游戏开始前一次性加载所有音效任何一个出问题时能及时在控制台看到具体是哪个文件挂了。canplaythrough事件表示浏览器已缓冲足够的数据可以播放完整个音频。遇到加载失败时先检查路径是不是包含大写字母、文件名是否和代码里一模一样再检查音频编码是否为浏览器支持的格式我排查时常用includes快速判断路径里是否包含预期文件名比如src.toLowerCase().includes(shoot)能在秒级定位是路径还是资源问题。4.4 增加游戏特效粒子不是必须的但要有克制模板里的「游戏特效」通常只是移动的矩形你可能会想加爆炸粒子效果。我的建议是粒子系统可以做但一定要设上限而且不要在每次碰撞时都生成五十个粒子移动端会直接卡死。常见做法是维护一个对象池粒子死亡后回收复用避免频繁创建销毁对象造成 GC 停顿。如果你只需要简单爆炸用 8~12 个透明矩形加随机速度就够了视觉效果已经能唬住大多数人。5. 避坑清单JS 游戏移植里最常见的六个翻车点5.1 页面空白 / 黑屏script 加载时机害人最深现象打开index.html后页面是白的控制台报错Cannot read property getContext of null。原因script放在head里执行时 body 未解析完canvas 元素还不存在。解决把脚本移到/body前如无法改位置就给脚本加defer属性。另一个隐蔽原因是你直接双击打开index.html用file://协议部分浏览器对本地文件的模块加载和跨域策略很严格优先用本地服务器方式打开。5.2 点击无响应canvas 坐标没有做换算现象桌面端点击正常移动端点了按钮没反应或点击位置明显偏移。原因canvas 显示尺寸被 CSS 拉伸到屏幕宽度而逻辑坐标还是原始像素值鼠标/触摸坐标直接拿来用自然对不上。解决用getBoundingClientRect把屏幕坐标换算回逻辑坐标function getCanvasPos(event) { const rect canvas.getBoundingClientRect(); return { x: (event.clientX - rect.left) * (canvas.width / rect.width), y: (event.clientY - rect.top) * (canvas.height / rect.height) }; }这段代码里canvas.width / rect.width是逻辑坐标与显示尺寸的倍率乘回去后点击区域就和画面完全重合了。5.3 手机上掉帧卡成 PPT循环用的 setInterval现象桌面端 60 帧流畅同一套代码放到手机上几分钟后越来越卡切后台再回来直接卡死。原因setInterval(fn, 16)是固定间隔执行不考虑刷新率也不管任务是否执行完切后台后它还在后台堆积任务回来时一次性补执行。解决全部换成requestAnimationFrame并按delta计算时间参考 2.3 节。如果还是卡看 5.2 的getContext之外再检查update里是否每帧都重复创建新对象比如array.forEach里new一个临时对象这在移动端是性能杀手改用对象池。5.4 键盘事件不触发焦点与 event.code 的配合现象页面打开后按方向键、空格完全没反应鼠标点了 canvas 之后才恢复。原因页面加载后焦点在 body 上而很多模板把键盘监听绑在 canvas 上另外keypress事件对方向键和部分按键根本不触发。解决把keydown/keyup绑在window上使用event.code判断按键如果游戏嵌在 iframe 里需要先点击 iframe 内部区域才能让焦点进入。若你写的判断是if (event.key )注意空格键的key就是空白字符串别写成space这是最容易看半天找不到原因的小坑。5.5 图片/音频加载失败file:// 与跨域策略现象双击 html 图片能显示但音频没声音或 JS 里用fetch读取 JSON 配置时报跨域错误。原因现代浏览器对file://协议下的本地文件访问有严格限制把 HTML、图片、音频当作不同源资源处理。解决本地开发时起一个实验室级别的静态服务器目录指向源码包根目录浏览器打开http://localhost:8000即可。常见做法是用python3 -m http.server 8000或 VS Code 的 Live Server 插件之后所有资源加载路径不变。5.6 文件名大小写引发的迷之 404现象所有代码路径报错仔细核对文件确实存在路径也看不出问题但 404 不断。原因Windows 和 macOS 本地文件系统不区分大小写一旦部署到 Linux 服务器或部分同学把包发给别人文件名大小写对不上就立刻失效。解决统一下的规范和做法是资产文件全部小写加连字符比如player.png、bg-music.mp3改完大小写后清理一遍浏览器缓存因为 304 缓存可能让你看到旧文件的假象。6. 性能验证与收尾技巧用 FPS 数值给游戏做体检游戏改完既不是直接收工也不是凭感觉说「好像挺流畅」。我现在每次拿到源码包改完必做的一件事是让 FPS 数值说话因为它能直接暴露 update 或 render 里的性能瓶颈。// 简易 FPS 计数器放在 main.js 的循环里 let frames 0; let lastFpsTime 0; let fps 0; function updateFps(timestamp) { frames; if (timestamp - lastFpsTime 1000) { fps frames; frames 0; lastFpsTime timestamp; console.log(FPS:, fps); } }这段计数器的逻辑很简单frames每帧加一当两次执行间隔超过一秒时把当前帧数写入fps并清零重新计数。你还可以用同样思路做每帧耗时分析把delta大于 1000/30 的帧打点输出定位到具体是第几秒出现掉帧。跑完 FPS 再看两个关键点一是在 Chrome DevTools 的 Performance 面板录制 30 秒看 Main 线程任务里消耗时间最长的函数如果是某个绘制函数的fillRect或图片绘制占比过高优先检查是否绘制了超出版视口范围的元素二是 canvas 在高 DPI 屏幕下会模糊解决方法是乘上devicePixelRatioconst dpr window.devicePixelRatio || 1; canvas.width rect.width * dpr; canvas.height rect.height * dpr; ctx.scale(dpr, dpr);这里有价值的一个点是ctx.scale(dpr, dpr)之后所有逻辑坐标不用改因为 ctx 内部已经帮你把坐标系放大省去在每个绘制函数里乘系数的麻烦。这套 JS 小游戏源代码包下载后我建议你按最快生效的顺序走一遍先起本地服务器跑通原始版开 Performance 面板看一分钟 FPS 曲线再按第四章改参数和关卡最后用第五章清单逐项排雷。从那以后我每次拿到新的源码第一件事永远是起服务器、跑 FPS、看曲线再谈改代码——很多看起来像玄学的卡顿和点击失灵最后都落到循环和坐标换算这两件事上。希望这篇拆解对你有用省下你对照文档反复试错的时间。本文还有配套的精品资源点击获取