简介这份JavaScript游戏源代码合集面向想通过实例入门游戏开发的编程学习者尤其适合已掌握JS基础语法、希望理解交互逻辑如何落地为可运行作品的初中级开发者。压缩包共60个文件、约78KB以htm页面为主体配合txt说明文档、ini配置与gif素材另有少量css样式和db数据文件每个小游戏基本做到页面与说明一一对应便于逐个拆解。内容覆盖字母华容道、打蜜蜂、俄罗斯方块、拼图、推箱子、五子棋、乒乓球、勇闯迷宫、射击、反应速度、模拟抽奖等十余款经典小游戏涉及DOM操作、事件处理、定时器动画、Canvas绘制、碰撞检测、得分统计与本地存储等知识点读者可对照源码理解游戏循环与状态管理并在此基础上修改参数、替换素材、扩展玩法。目前已有868人学习适合作为课程设计参考或自学练手素材。1. 拿到一份 js 游戏源代码先别急着双击 index.html很多 js 游戏源代码压缩包解压后第一眼看到的就是一堆.js、.html、assets文件夹新手最容易犯的错是直接双击index.html结果画面白屏、控制台报一堆CORS或404。我拆过不少这类小游戏源码它们大多不是「打开就能玩」的单文件而是一个需要本地静态服务器才能跑起来的前端工程。这份 js 游戏源代码属于典型的浏览器端小游戏合集技术栈基本围绕原生 JavaScript Canvas HTML5不依赖后端适合想学游戏循环、碰撞检测、精灵动画、状态机这套东西的开发者拿来练手和二次开发。下面按「它是什么 → 怎么跑起来 → 核心代码怎么读 → 怎么改」的顺序把这份源码拆开讲清楚。2. 项目定位与技术栈为什么它不依赖框架也能跑2.1 这份源码到底是个什么东西从目录和文件命名来看这份 js 游戏源代码是一个纯前端的小游戏集合每个游戏一个独立目录共用一套工具函数和资源加载逻辑。它没有用 React、Vue 这类框架也没有 Webpack、Vite 这类构建工具靠的是浏览器原生能力canvas负责渲染requestAnimationFrame负责驱动游戏循环Audio对象负责音效localStorage负责存最高分。这种「零构建」的结构对二次开发其实很友好——你改完一个.js文件刷新浏览器就能看到效果不需要等编译。常见做法是每个游戏目录下有一个index.html作为入口一个game.js或main.js作为主逻辑一个assets/放图片和音频。根目录往往还有一个README或package.json但即便有package.json也多半只是为了起一个本地静态服务器而不是真的要走 npm 构建。判断方法很简单看package.json里有没有scripts.build如果没有基本就是纯静态。2.2 技术栈拆解原生 JS 撑起一个游戏需要哪几块把这类源码的技术点归一下类大概是这么几层层次用到的技术在源码里的体现渲染层Canvas 2D Contextctx.drawImage、ctx.fillRect、ctx.clearRect循环层requestAnimationFrame主循环函数里递归调用自身输入层键盘/鼠标/触摸事件keydown、mousedown、touchstart监听资源层Image / Audio 预加载new Image()、new Audio()加onload计数状态层简单状态机gameState ready / playing / over存储层localStoragelocalStorage.setItem(highScore, ...)这套组合的好处是没有黑盒每一行你都能追到浏览器 API。坏处是代码组织全靠作者自觉有的源码会把所有逻辑塞进一个几千行的game.js读起来比较费劲。我一般会先看文件行数超过 800 行的单文件就先用编辑器折叠函数按「初始化 → 循环 → 输入 → 碰撞 → 渲染」的顺序跳着读。2.3 目录结构长什么样典型的目录大概是这样不同游戏名字会有差异但层级基本一致js-game-source/ ├── index.html # 游戏选择页或直接是某个游戏入口 ├── css/ │ └── style.css # 页面基础样式通常很薄 ├── js/ │ ├── utils.js # 公共工具随机数、碰撞检测、资源加载 │ ├── input.js # 键盘/触摸输入封装 │ └── game.js # 主游戏逻辑 ├── assets/ │ ├── images/ # 精灵图、背景图 │ └── sounds/ # 音效文件 └── package.json # 可选通常只有 start 脚本读源码时先看utils.js因为碰撞检测和资源加载这两个函数几乎每个游戏都会调用看懂它们等于拿到了通用钥匙。input.js次之它决定了你按键后游戏怎么响应。最后再进game.js这时候你已经有上下文了不容易迷路。3. 跑起来本地静态服务器与入口文件排查3.1 为什么不能直接双击打开直接双击index.html时浏览器地址栏是file://协议这时候用new Image()加载本地图片、用fetch读 JSON、甚至某些浏览器的Audio播放都会被安全策略拦掉控制台会出现Access to image at file://... from origin null has been blocked by CORS policy。这不是代码写错了是协议不对。解决办法就是起一个本地静态服务器让页面走http://localhost。最省事的方式是用 Python 自带的服务器不用装任何东西# 在项目根目录执行端口随便选一个没被占用的 python3 -m http.server 8080 # 然后浏览器打开 http://localhost:8080如果你机器上只有 Node也可以用npx serve# npx 会临时下载 serve 并启动不需要全局安装 npx serve . -l 8080两条命令的效果一样把当前目录当成网站根目录index.html自动成为默认页。启动后别急着玩先按 F12 打开控制台看有没有红色报错尤其是404——那说明某个资源路径写错了后面会讲怎么修。3.2 入口文件与资源路径的对应关系起好服务器后第一个要确认的是index.html里引用的脚本路径和实际文件是否对得上。常见写法是!-- index.html 片段 -- canvas idgameCanvas width480 height640/canvas script srcjs/utils.js/script script srcjs/input.js/script script srcjs/game.js/script这里要注意两点一是canvas的width和height是画布的实际像素尺寸不是 CSS 显示尺寸游戏里所有坐标都基于这个值计算二是三个script的加载顺序不能乱game.js依赖前面两个文件里定义的全局函数顺序反了就会报xxx is not defined。如果你把文件挪了位置记得同步改这里的src。资源路径同理。game.js里加载图片通常写成相对路径// 资源路径相对于当前 HTML 页面不是相对于 js 文件 const playerImg new Image(); playerImg.src assets/images/player.png;很多人以为路径是相对game.js所在目录其实浏览器解析的是相对当前页面 URL。所以只要index.html在根目录assets/images/player.png就要从根目录往下找。资源 404 的时候先在浏览器 Network 面板看请求的实际 URL再对照磁盘上的文件位置基本一眼就能定位。3.3 最小可运行验证先让一个方块动起来在正式读游戏逻辑之前我习惯先做一个最小验证确认 Canvas 能渲染、循环能跑。可以在控制台直接执行也可以临时在game.js末尾加几行// 最小验证一个方块从左往右移动 const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); let x 0; function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清屏否则会拖影 ctx.fillStyle #4a90d9; ctx.fillRect(x, 100, 40, 40); // 画方块 x (x 2) % canvas.width; // 到右边界回绕 requestAnimationFrame(loop); // 下一帧继续 } loop();这段代码跑通说明 Canvas 上下文、requestAnimationFrame、画布尺寸都没问题剩下的就是往这个骨架里填游戏逻辑。如果方块不动先看控制台有没有报错再看canvas的id是否和 HTML 里一致——这是最常见的翻车点getElementById拿不到元素时返回null后面getContext直接抛异常。4. 核心模块拆解游戏循环、碰撞检测与状态机4.1 游戏主循环一帧里到底发生了什么所有这类 js 小游戏的骨架都是同一个模式初始化 → 循环更新状态 → 渲染→ 循环。区别只在于更新和渲染里写了多少东西。典型的主循环长这样// game.js 主循环骨架 let lastTime 0; function gameLoop(timestamp) { // 计算两帧之间的时间差单位毫秒 const deltaTime timestamp - lastTime; lastTime timestamp; update(deltaTime); // 更新所有游戏对象的位置、状态 render(); // 把当前状态画到 canvas 上 requestAnimationFrame(gameLoop); // 请求下一帧 } function update(dt) { // dt 用来做「按时间移动」避免不同刷新率下速度不一致 player.x player.speed * (dt / 16.67); } function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(playerImg, player.x, player.y); } requestAnimationFrame(gameLoop); // 启动循环这里的关键参数是deltaTime。很多新手源码直接写player.x 5在 60Hz 屏幕上没问题到了 144Hz 屏幕上角色就跑得飞快这就是没做时间归一化的后果。dt / 16.67的意思是「以 60 帧为基准把这一帧的时间折算成多少帧」这样无论屏幕刷新率多少移动速度都一致。读源码时如果看到update接收了dt却没用那多半是作者留的坑二次开发时可以顺手补上。requestAnimationFrame的回调参数timestamp是浏览器给的高精度时间戳单位毫秒不要自己用Date.now()代替前者和屏幕刷新同步后者精度和时机都不如它。4.2 碰撞检测矩形相交是最常用的那一个小游戏里 90% 的碰撞都是矩形与矩形因为精灵图本身就是矩形用包围盒判断足够快也足够准。utils.js里通常会有这么一个函数// 轴对齐包围盒AABB碰撞检测 function isColliding(a, b) { return a.x b.x b.width a.x a.width b.x a.y b.y b.height a.y a.height b.y; }四个条件分别排除「a 在 b 左边」「a 在 b 右边」「a 在 b 上边」「a 在 b 下边」四种不重叠的情况剩下的就是重叠。参数a和b都是带x、y、width、height的对象注意x、y是左上角坐标不是中心点——如果源码里精灵的坐标存的是中心点调用前要先换算否则会出现「看着没碰到却判定碰撞」的玄学现象。对于圆形物体比如子弹、球源码里可能会用距离判断// 圆形碰撞圆心距离小于半径之和即碰撞 function isCircleColliding(a, b) { const dx a.x - b.x; const dy a.y - b.y; const dist Math.sqrt(dx * dx dy * dy); return dist a.radius b.radius; }Math.sqrt在每帧对大量对象调用时有性能开销优化做法是比较平方值dx*dx dy*dy (a.radius b.radius) ** 2省掉开方。这类小优化在对象少的时候无所谓对象一多就是帧率的分水岭。4.3 状态机ready / playing / gameover 三态切换小游戏不需要复杂的状态管理但一定要有状态否则「开始前」「游戏中」「结束后」的逻辑会搅在一起。常见写法是用一个字符串变量// 游戏状态机 const STATE { READY: ready, PLAYING: playing, GAMEOVER: gameover }; let gameState STATE.READY; function update(dt) { if (gameState STATE.PLAYING) { // 只有游戏中才更新玩家和敌人 updatePlayer(dt); updateEnemies(dt); checkCollisions(); } } function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (gameState STATE.READY) { drawStartScreen(); } else if (gameState STATE.PLAYING) { drawGameScene(); } else { drawGameOverScreen(); } } // 按键或点击时切换状态 function onStart() { if (gameState STATE.READY || gameState STATE.GAMEOVER) { resetGame(); // 重置分数、玩家位置、敌人列表 gameState STATE.PLAYING; } }状态机的价值在于「隔离」update里用状态判断挡住不该跑的逻辑render里用状态决定画哪一屏。二次开发加新状态比如PAUSED时只要在update和render各加一个分支不用动原有逻辑。注意resetGame一定要把上一局残留的数组清空否则重开时敌人会叠在一起——这是我在类似源码里见过最多的 bug。4.4 资源预加载等图片和音频都就绪再开局如果不等资源加载完就开局第一帧会画不出精灵或者音效播不出来。标准做法是维护一个计数器// 资源预加载全部加载完才启动游戏 const assets { player: assets/images/player.png, enemy: assets/images/enemy.png, bgm: assets/sounds/bgm.mp3 }; const loaded {}; let totalCount Object.keys(assets).length; let loadedCount 0; function preload(callback) { for (const key in assets) { const src assets[key]; if (src.endsWith(.png) || src.endsWith(.jpg)) { const img new Image(); img.onload () { loaded[key] img; if (loadedCount totalCount) callback(); }; img.onerror () console.error(图片加载失败:, src); img.src src; } else { const audio new Audio(); audio.oncanplaythrough () { loaded[key] audio; if (loadedCount totalCount) callback(); }; audio.onerror () console.error(音频加载失败:, src); audio.src src; } } } preload(() { gameState STATE.READY; // 资源就绪后再允许开始 });onerror一定要写否则某个资源 404 时计数器永远到不了totalCount游戏就卡在加载界面控制台还不一定有明显报错。oncanplaythrough比onloadeddata更适合音频它表示「可以流畅播放到结束」避免开局时音效卡顿。5. 避坑与排查跑不起来时先看这几处5.1 白屏但控制台无报错现象页面打开一片白控制台干净。原因多半是canvas尺寸为 0或者游戏循环根本没启动。检查index.html里canvas有没有写width和height属性只写 CSS 宽高不算数再确认requestAnimationFrame(gameLoop)这行确实被执行到了有时候它被包在某个if里条件不满足就静默跳过。解决在gameLoop第一行加console.log(frame)看是否持续输出。5.2 图片全部 404现象Network 面板一片红精灵不显示。原因通常是路径基准搞错或者文件名大小写不一致——Linux 和 macOS 默认文件系统对大小写敏感Player.png和player.png是两个文件。解决在 Network 面板点开一个 404 请求看它请求的完整 URL再对照磁盘实际路径逐级修正src。批量排查可以用find . -name *.png列出所有图片和代码里的引用对一遍。5.3 按键没反应现象游戏能显示但按方向键角色不动。原因一般是事件监听绑在了错误的元素上或者keydown里判断的keyCode和实际按键对不上。老源码常用event.keyCode新浏览器更推荐event.key如ArrowLeft。解决在监听函数里先console.log(e.key, e.code)确认拿到的值再改判断条件。另外注意canvas需要tabindex才能聚焦接收键盘事件或者干脆把监听绑到window上。5.4 游戏越玩越卡现象开局流畅玩一两分钟后帧率明显下降。原因通常是数组只增不减——子弹飞出屏幕、敌人被消灭后没有从数组里移除每帧还在遍历和渲染它们。解决在update里对对象数组做过滤bullets bullets.filter(b b.y -50)把出界的清掉。另一个常见原因是每帧new Image()或new Audio()资源要预加载一次复用不能在循环里创建。5.5 音效在部分浏览器不播放现象Chrome 正常某些浏览器静音。原因是自动播放策略没有用户交互前音频播放会被拦截。解决把背景音乐的play()放到第一次点击或按键的回调里触发而不是页面加载时直接播。代码上就是document.addEventListener(click, () bgm.play(), { once: true })once: true保证只绑一次。6. 二次开发从改参数到加一个新玩法6.1 先改「手感参数」再动逻辑拿到源码想快速做出自己的版本最划算的改法是调参数而不是改结构。速度、重力、生成间隔、生命值这些通常集中在文件顶部的常量区// 集中配置改这里就能调手感 const CONFIG { playerSpeed: 5, // 玩家移动速度像素/帧 gravity: 0.4, // 重力加速度跳跃类游戏用 jumpPower: -10, // 跳跃初速度负值向上 enemySpawnInterval: 1200, // 敌人生成间隔毫秒 maxLives: 3 // 初始生命 };把这些散落在各处的魔法数字抽成CONFIG对象是二次开发的第一步也是我最推荐先做的事。改完刷新就能感受到差异不用理解全部逻辑。等手感对了再考虑加新功能。6.2 加一个新敌人类型的完整路径假设要在现有游戏里加一种「会追踪玩家」的敌人改动点其实很固定按顺序来第一步在资源预加载里加图片// assets 对象里加一项 const assets { // ...原有资源 chaser: assets/images/chaser.png };第二步在敌人生成逻辑里按概率决定类型function spawnEnemy() { const isChaser Math.random() 0.3; // 30% 概率生成追踪型 enemies.push({ x: Math.random() * (canvas.width - 40), y: -40, width: 40, height: 40, speed: isChaser ? 1.5 : 3, type: isChaser ? chaser : normal }); }第三步在updateEnemies里给追踪型加朝向逻辑function updateEnemies(dt) { enemies.forEach(e { if (e.type chaser) { // 朝玩家方向移动归一化后乘速度 const dx player.x - e.x; const dy player.y - e.y; const len Math.hypot(dx, dy) || 1; e.x (dx / len) * e.speed; e.y (dy / len) * e.speed; } else { e.y e.speed; // 普通敌人直线下落 } }); }第四步渲染时按type选图。这四步走完新敌人就接入了原有的碰撞、计分、清理逻辑不用改主循环。Math.hypot比手写Math.sqrt(dx*dxdy*dy)可读性好性能差异在这个量级可以忽略。6.3 验证改动是否生效的习惯每改一处我固定做三件事刷新页面看控制台有没有新报错在关键函数入口打console.log确认它被调用用浏览器 Performance 面板录几秒看帧率有没有掉。加新敌人后如果游戏变卡先看enemies数组长度是不是失控再看追踪逻辑里有没有每帧创建新对象。这套验证流程走下来大部分改动问题在提交前就能拦住。6.4 一个容易忽略的改造点把全局变量收进模块这类源码常见的问题是所有变量挂在全局改一个名字可能牵连十几处。二次开发到一定规模建议用 IIFE 或 ES Module 把每个游戏包起来// 用 IIFE 隔离作用域避免污染全局 (function () { const canvas document.getElementById(gameCanvas); const ctx canvas.getContext(2d); let gameState ready; // ...所有游戏逻辑 })();这样内部变量外部访问不到多人协作或加多个游戏时不会互相覆盖。如果源码已经是多文件结构改成 ES Module 更彻底每个文件export需要的函数入口用script typemodule引入。注意改成 module 后本地必须走 http 服务器file://下 module 会被 CORS 拦掉——这也是为什么前面反复强调先起服务器。我自己的习惯是每次接手一份新源码先花十分钟把全局变量列一遍能收进模块的当场收掉后面改起来省心得多。从那以后我每次拆这类 js 游戏源代码都强制先跑通最小方块验证再读业务逻辑避免在环境问题上浪费半天。希望帮到你。本文还有配套的精品资源点击获取