零基础微信小游戏开发教程源码|完整实例详解|免费快速上手

开发环境搭建：3步搞定工具准备

别被“环境搭建”这四个字唬住，其实就像你第一次用新手机要装微信一样简单。我当时带朋友做的时候，他连压缩包都不会解压，照样15分钟搞定了所有准备工作。

第一步是下载微信开发者工具。直接百度搜“微信开发者工具”，进微信公众平台官网的下载页，根据你的电脑系统（Windows或Mac）选对应版本。这里有个坑要注意：别下“夜间版”或“测试版”，选“稳定版”，我之前贪新鲜下了测试版，结果导出代码时一直报错，折腾半天才换回来。下载后双击安装，一路点“下一步”就行，不用改任何设置。

第二步是注册小游戏账号。打开工具后会让你扫码登录微信，然后点“新建项目”，这时候需要一个“AppID”。如果你还没有，就选“测试号”（页面上有这个选项），不过测试号有功能限制，比如不能正式发布。想长期做的话， 花5分钟去微信公众平台注册个“小游戏”账号，个人就能申请，不用营业执照，注册时“主体类型”选“个人”，跟着提示填信息就行。我朋友当时怕麻烦想用测试号，我说“你奶茶店顾客扫码玩的时候，加载慢了会影响生意”，他才乖乖注册了正式账号。

第三步是配置项目。新建项目时，“项目名称”随便填（比如“我的第一个游戏”），“目录”选个好找的地方（比如电脑桌面），“模板”一定要选“JavaScript-基础模板”——别选TypeScript或其他模板，那是给高手用的。勾选“不使用云服务”，点击“创建”。这时候工具会自动生成一套基础代码，你会看到左边是代码编辑区，中间是游戏预览区，右边是调试工具，跟玩游戏时的“控制台”差不多。我第一次用的时候，没注意模板选错了，生成的代码全是英文注释，看得头大，后来换了基础模板才顺畅起来。

工具准备好后，先别急着写代码，花2分钟熟悉一下界面：顶部菜单栏的“编译”按钮（每次改了代码点一下，预览区就会更新）、“预览”按钮（扫码在手机上看效果，这个超重要，电脑上看着正常，手机上可能错位），还有左边文件列表里的“game.js”（写逻辑的地方）和“game.json”（配置游戏窗口大小的地方）。这些按钮就像你手机里的“设置”和“相册”，用两次就熟了。

实战开发：1个小时做出“点击小球得分”游戏

光说不练假把式，咱们直接做个最简单的“点击小球得分”游戏——屏幕上随机出现彩色小球，点到就加分，10秒后显示得分。这个游戏涵盖了小游戏开发的核心：画面绘制、用户交互、数据计算，学会这个，再做其他游戏就触类旁通了。

第一步：绘制游戏界面（5分钟搞定画布）

打开“game.js”文件，你会看到默认有几行代码，不用管它们，直接在最下面写咱们的代码（记得在默认代码后面加两个空行，不然可能报错）。首先要创建一个“画布”，就像画画需要画板一样，代码是这样的：

// 创建画布
const canvas = wx.createCanvas()
const ctx = canvas.getContext('2d')

“canvas”就是画板，“ctx”是画笔。接下来设置画布大小，让它占满手机屏幕：

// 获取屏幕宽高，让画布适配手机
const { windowWidth, windowHeight } = wx.getSystemInfoSync()
canvas.width = windowWidth
canvas.height = windowHeight

我朋友当时写到这里问：“为什么要获取屏幕宽高？”你想啊，不同手机屏幕大小不一样，直接写死数值的话，在小屏手机上画面会被切掉，大屏手机上两边留白，用wx.getSystemInfoSync()就能自动适配所有手机，微信小游戏开发文档里特别强调过这点，说这是“提升用户体验的基础操作”。

现在画个背景和得分显示区。用画笔（ctx）填充颜色，写文字：

// 绘制背景
ctx.fillStyle = '#f8f8f8' // 浅灰色背景
ctx.fillRect(0, 0, canvas.width, canvas.height) // 从左上角(0,0)画满整个画布
// 显示得分
let score = 0 // 得分初始值
function drawScore() {
 ctx.fillStyle = '#333' // 黑色文字
 ctx.font = '24px Arial' // 字体大小和样式
 ctx.fillText(得分: ${score}, 20, 40) // 在(20,40)位置显示文字
}
drawScore() // 调用函数显示得分

写完点“编译”，预览区就能看到浅灰色背景和左上角的“得分: 0”了。是不是很简单？这一步的关键是记住“ctx.fillRect()”画矩形、“ctx.fillText()”写文字，就像你用画图软件的“矩形工具”和“文字工具”一样。

第二步：让小球动起来（核心逻辑编写）

接下来实现“随机出现小球”和“点击小球得分”。先定义小球的属性：位置、大小、颜色，用一个数组存所有小球：

let balls = [] // 存放小球的数组
const ballSize = 40 // 小球直径40px
// 随机生成小球
function createBall() {
 const ball = {
 x: Math.random()  (canvas.width 
ballSize), // 随机x坐标（避免超出屏幕）

 y: Math.random()  (canvas.height 
ballSize), // 随机y坐标
 color: #${Math.floor(Math.random()16777215).toString(16)}, // 随机颜色
 isAlive: true // 标记小球是否存在
 }
 balls.push(ball) // 把新小球加入数组
}

“Math.random()”是生成随机数的函数，比如生成x坐标时，乘以(屏幕宽度-小球大小)，就能保证小球不会跑到屏幕外面。随机颜色的代码看起来复杂，其实就是生成一个随机的十六进制颜色值，你直接复制用就行，不用理解原理。

然后每隔2秒生成一个小球，用setInterval函数：

// 每2秒生成一个小球
setInterval(createBall, 2000)

现在小球能出现了，但还不会显示在屏幕上，需要写一个“绘制小球”的函数，并不断更新画面：

// 绘制所有小球
function drawBalls() {
 balls.forEach(ball => {
 if (ball.isAlive) { // 只画活着的小球
 ctx.beginPath() // 开始绘制
 ctx.arc(ball.x, ball.y, ballSize/2, 0, Math.PI2) // 画圆形（x,y,半径,开始角度,结束角度）


 ctx.fillStyle = ball.color // 设置小球颜色
 ctx.fill() // 填充颜色
 }
 })
}
// 游戏主循环：不断更新画面
function gameLoop() {
 // 每次循环先清空画布，不然小球会有拖影
 ctx.fillStyle = '#f8f8f8'
 ctx.fillRect(0, 0, canvas.width, canvas.height)
 drawScore() // 重绘得分
 drawBalls() // 重绘小球
 requestAnimationFrame(gameLoop) // 循环调用自己，实现动画效果
}
gameLoop() // 启动游戏循环

这里的“gameLoop”就像动画片的帧，每秒执行60次，不断清空画布、重绘内容，所以小球看起来是“动”的。我当时教朋友的时候，他一开始忘了清空画布，结果小球拖出一串尾巴，笑称“做出了流星特效”，后来加上清空代码才正常。

第三步：处理点击事件（点中小球加分）

最后实现“点击小球得分”。给画布添加点击事件，判断点击位置是否在小球范围内：

// 监听屏幕点击
canvas.addEventListener('touchstart', (e) => {
 const touchX = e.touches[0].x // 获取点击x坐标
 const touchY = e.touches[0].y // 获取点击y坐标
 // 检查点击是否命中小球
 balls.forEach((ball, index) => {
 if (ball.isAlive) {
 // 计算点击位置到小球中心的距离
 const dx = touchX 
(ball.x + ballSize/2)
 const dy = touchY 
(ball.y + ballSize/2)
 const distance = Math.sqrt(dxdx + dydy) // 勾股定理算距离
 if (distance < ballSize/2) { // 距离小于半径，说明点中了
 score += 10 // 得分+10
 ball.isAlive = false // 小球“死亡”，不再显示
 // 播放点击音效（可选，需要先准备音频文件）
 // const audio = wx.createInnerAudioContext()
 // audio.src = 'click.mp3'
 // audio.play()
 }
 }
 })
})

这里用了“勾股定理”判断点击是否在小球内，别害怕，公式是固定的，直接用就行。现在点“编译”，预览区会每隔2秒出现一个彩色小球，点击小球得分就会增加，小球消失。如果想加音效，可以把注释掉的代码解开，把“click.mp3”文件放到项目的“res”文件夹里（需要自己创建这个文件夹，放个mp3文件进去）。

调试与优化：3个新手必知技巧

写到这里，你的第一个微信小游戏已经能跑起来了！但可能还有些小问题，分享3个我 的调试技巧，帮你少走弯路。

第一个是“console.log打印调试”。如果小球不出现，就在createBall函数里加一句console.log(‘生成小球:’, ball)，然后点击工具底部的“Console”面板，就能看到是否生成了小球数据。我朋友当时小球不显示，用这个方法发现是ballSize写成了400（直径400px，太大了超出屏幕），改回40就好了。

第二个是“手机预览必做”。点击工具顶部的“预览”，扫码在手机上测试，因为电脑预览区和真实手机显示可能有差异。比如在电脑上小球位置正常，在手机上可能偏左，这时候检查是不是用了固定数值，改用windowWidth计算就能解决。

第三个是“源码备份与复用”。现在你的项目文件夹里，“game.js”就是核心代码，“project.config.json”是配置文件，把整个项目文件夹复制一份，以后想做新游戏，直接改里面的代码就行。我整理了一个包含完整注释的源码包，包括刚才做的“点击小球”游戏和另外2个示例（“打地鼠”“接水果”），关注我公众号回复“小游戏源码”就能免费领，代码里每个功能都标了注释，你一看就懂。

好了，按照这些步骤做，你现在应该已经有了一个能玩的微信小游戏了！如果遇到问题，先检查代码有没有抄错（特别是括号和逗号，很容易漏），再用console.log看看哪里出了问题。记得把你的游戏分享到朋友圈炫耀一下，或者像我朋友那样，改成自己店铺的优惠券小游戏，用户扫码玩游戏得分兑换优惠，传播效果特别好。

如果你按这些方法试了，欢迎在评论区告诉我你的游戏叫什么名字，或者遇到了什么bug，我看到会回复你！

你真不用担心编程基础这事儿，我见过最零基础的人——我表姐，之前是做行政的，Excel函数都只会用个sum，去年跟着我这套教程，硬是用周末两天做出了个给她家孩子班上用的“成语接龙”小游戏。真不是夸张，现在的微信小游戏开发工具已经把复杂的底层逻辑都封装好了，你不用懂什么“面向对象编程”“数据结构”，就像拼乐高一样，把现成的模块按步骤搭起来就行。

教程里的代码我都加了超详细的注释，比如“// 这行是画背景颜色”“// 这里改数字可以调小球大小”，你跟着抄代码的时候，就算不懂每句的原理，改改注释里提到的数字也能看到效果变化。就像“点击小球得分”那个例子，核心代码其实就三大块：先画个背景板，再让小球随机冒出来，最后判断你点没点中——每一块我都拆成了“复制这段代码→改几个参数→看效果”的小步骤，你跟着做的时候，每完成一步预览区都会有变化，特别有成就感。上次我那个行政表姐做到小球能跟着点击消失的时候，还特意拍了视频发家族群，说自己“解锁了程序员技能”呢。

而且代码量真不大，整个游戏核心功能写下来不到200行，比你写篇工作 还短。我特意把重复的代码都整理成了现成的函数，比如“生成小球”“计算得分”这些，你直接复制过去，改改颜色、大小这些参数就能用。之前有个读者跟我说，他按教程做的时候，连变量名写错了（比如把“score”写成“scroe”），结果得分不变，后来看了我写的“常见bug排查表”，两分钟就找到了问题。真不用怕，跟着步骤走，3小时从打开工具到做出能玩的小游戏，完全没问题。

没有编程基础能学会微信小游戏开发吗？

完全可以。本文教程专为零基础设计，无需复杂编程知识，所有代码都提供详细注释，跟着步骤复制修改即可上手。以“点击小球得分”游戏为例，核心代码不到200行，且每个功能都拆解为“画背景-生成小球-处理点击”等简单步骤，配合可直接复用的源码，亲测零基础用户3小时内可完成基础版本开发。

个人能注册微信小游戏账号吗？需要营业执照吗？

个人可以注册，无需营业执照。在微信公众平台注册时，“主体类型”选择“个人”，按提示填写姓名、身份证号等信息，完成实名认证即可（实名认证免费，1-2分钟完成）。个人账号可开发和测试小游戏，但正式发布时部分功能有限制（如不能接入支付），适合学习或非商业用途；企业账号需营业执照，可解锁全部功能。

开发时小球不显示或点击没反应，可能是什么原因？

常见原因有3种：① 代码中“ballSize”数值过大（如写成400px），导致小球超出屏幕，可检查代码中“const ballSize = 40”是否正确；② 未调用gameLoop函数启动循环，确保代码末尾有“gameLoop()”；③ 点击事件监听错误，检查canvas.addEventListener(‘touchstart’, …)是否完整。可通过“Console”面板输入console.log打印变量，查看小球坐标、点击位置等数据排查问题。

免费获取的源码可以直接商用吗？

免费源码仅供个人学习和非商业用途参考。若用于商业场景（如企业宣传、盈利性游戏）， 对源码进行修改和优化，避免直接使用模板内容。涉及美术资源（如图标、音效）时，需确保拥有版权或使用无版权素材（可通过CC0协议网站获取免费资源），避免侵权风险。

开发完成后如何发布微信小游戏？

发布需3步：① 在微信开发者工具中点击“上传”，填写版本号（如1.0.0）和更新说明；② 登录微信公众平台，进入“版本管理”，选择“提交审核”；③ 等待微信官方审核（通常1-3个工作日），审核通过后在“版本管理”中点击“发布”即可上线。个人账号发布的小游戏会显示“个人开发”标签，不影响用户正常访问。

YUANLEISVIP

收藏 链接