微信小游戏开发入门：用30行JS打造你的首款“跳跃障碍”游戏

说到微信小游戏，大家首先想到的可能是《跳一跳》或《羊了个羊》。它们的共同点是即点即玩、轻量级，依托微信生态实现病毒式传播。

很多人以为开发小游戏必须学Cocos或Unity，但对于极简原型，微信官方提供的原生JavaScript + Canvas方案才是“少量代码”的最优解。它不需要任何第三方引擎，一个game.js文件就能跑起一个完整的游戏循环。

本文将带你从零拆解微信小游戏的核心架构，并用不到30行核心JS代码，实现一款具备“跳跃障碍物”核心玩法的迷你小游戏。

一、微信小游戏与小程序：本质区别

在写代码前，必须厘清一个关键概念：

小游戏没有复杂的页面跳转，一切都在画布（Canvas）上用代码“画”出来。这意味着，只要你会JavaScript的Canvas绘图，你就已经掌握了小游戏开发的80%。

二、开发环境准备（30秒搞定）

1. 下载并安装 微信开发者工具。
2. 新建项目时，选择 “小游戏” 而非“小程序”，AppID可使用测试号。
3. 删除自动生成的繁杂模板，只保留一个 game.js 文件（其余game.json和project.config.json用默认配置即可）。

三、极简代码实战：30行实现“跳跃障碍”小游戏

下面这段代码就是游戏的全部。它包含：游戏主循环（帧动画）、物理跳跃、障碍物生成与移动、碰撞检测、实时计分。

在game.js中粘贴以下代码：

// 1. 获取画布与上下文（微信专用API）
const canvas = wx.createCanvas();
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;

// 2. 游戏状态变量
let player = { x: 80, y: 300, w: 30, h: 30, vy: 0 }; // 玩家方块
let obstacles = [];                                  // 障碍物数组
let score = 0, frame = 0;
const GRAVITY = 0.7, JUMP = -12, SPEED = 5;

// 3. 触摸跳跃（微信触摸事件）
wx.onTouchStart(() => {
    if (player.y >= 300) player.vy = JUMP; // 只有在地面才能跳
});

// 4. 核心游戏循环（仅25行）
function loop() {
    frame++;
    // ---- 物理更新 ----
    player.vy += GRAVITY;
    player.y += player.vy;
    if (player.y > 300) { player.y = 300; player.vy = 0; } // 地面限位

    // ---- 障碍物生成与移动 ----
    if (frame % 60 === 0) { // 每秒生成1个（60帧）
        obstacles.push({ x: W, y: 320, w: 25, h: 25 });
    }
    for (let i = obstacles.length - 1; i >= 0; i--) {
        obstacles[i].x -= SPEED;
        if (obstacles[i].x < -30) { obstacles.splice(i, 1); score++; } // 通过加分
    }

    // ---- 碰撞检测（核心算法） ----
    for (let obs of obstacles) {
        if (player.x < obs.x + obs.w && player.x + player.w > obs.x &&
            player.y < obs.y + obs.h && player.y + player.h > obs.y) {
            score = 0; // 撞到重置分数（游戏结束的简易表现）
            obstacles = []; // 清空障碍重置游戏
            player.y = 300; // 复位
        }
    }

    // ---- 绘制画面 ----
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#07c160'; // 微信绿
    ctx.fillRect(player.x, player.y, player.w, player.h); // 玩家
    ctx.fillStyle = '#ff4d4f';
    for (let obs of obstacles) ctx.fillRect(obs.x, obs.y, obs.w, obs.h); // 障碍
    ctx.fillStyle = '#333';
    ctx.font = '20px Arial';
    ctx.fillText('🏆 ' + score, 20, 50);

    // 5. 请求下一帧（微信专用RAF）
    wx.requestAnimationFrame(loop);
}
loop();

运行效果：屏幕左侧绿色方块代表你，右侧红色方块从右向左移动。点击屏幕（或按空格模拟）让绿色方块跳跃躲避，每躲过一个，左上角分数+1，撞到则分数清零重置。

四、代码解读：为什么这么短就能跑？

这段代码虽短，却涵盖了游戏开发的 “铁三角”：

1. 帧循环（wx.requestAnimationFrame）：它替代了浏览器的requestAnimationFrame，是微信小游戏的“心跳”。每秒60帧，所有逻辑（移动、碰撞、绘制）都在这里不断迭代。
2. 物理模拟：vy（垂直速度）加上GRAVITY（重力），实现了抛物线跳跃。这是《跳一跳》类游戏的物理基础。
3. 碰撞检测（AABB矩形相交算法）：if (A.x < B.x + B.w ...) 这四行判断，是游戏交互的底层命脉，无论多复杂的游戏，最终都归约到这组不等式。

五、从“玩具”到“产品”的极简进化路

如果想让这个小Demo变成可上架的微信小游戏，只需在这个代码框架上做三个加法，无需重构：

1. 加素材（图片代替方块）：使用wx.createImage()加载PNG图片，用ctx.drawImage()替代fillRect()，瞬间提升颜值。
2. 加音效（反馈）：调用wx.createInnerAudioContext()，在跳跃和得分时播放短音效。
3. 加排行榜（社交）：调用wx.getUserInfo()和wx.setStorageSync()保存最高分，再搭配wx.shareAppMessage()引导分享。

六、开发者工具与真机调试技巧

• 模拟器：微信开发者工具左侧可切换不同机型（iPhone 15 / 小米等），方便适配屏幕。
• 真机调试：点击“真机调试”扫码，手机端运行，控制台实时打印日志，这是调试wx.onTouchStart灵敏度的最佳方式。
• 性能面板：打开“调试器”->“Performance”，观察帧率（FPS）。如果方块太多卡顿，记得优化obstacles数组长度（例如限制最大数量100个）。

七、写在最后：小游戏是“程序员的浪漫”最短路径

当你用这30行代码在自己手机上跑出一个可玩的跳跃游戏时，你会深刻感受到：微信小游戏开发，本质是“受限环境下的Canvas绘画艺术”。它去掉了浏览器的兼容性包袱，去掉了复杂的UI框架，让你回归到代码与图形交互最纯粹的状态。

💡 建议：把这段代码中的SPEED（移动速度）从5改成8，把GRAVITY从0.7改成1.2，你会发现游戏难度瞬间变大——这就是游戏策划口中的“调手感”。你现在就是策划兼开发。

不要纠结于引擎选型，打开你的微信开发者工具，把这30行代码贴进去，点击编译。当那个绿色小方块在你的手机上跳起来的瞬间，你就已经叩开了微信生态11亿用户的大门。🚀

下一步挑战：试着把障碍物改成上下移动的“飞行怪物”，或者把跳跃改成左右滑动控制——只需要修改不到10行代码，你就能创造出一款属于自己的全新玩法。去试试吧！