第一个微信小游戏。哈哈又是第一个。因为此次疫情，宅在家里，不再找点事来做就真的快发霉了，所以就有了这个小游戏。

开源

github地址：https://github.com/CB-ysx/bearjump

说明：只开源第一版代码。何为第一版，就是用webpack+babel打包的版本。这个是参考JetLua提供的pixi开发框架以及colloc微信小游戏的版本。 colloc源码地址：https://github.com/JetLua/colloc 感谢作者分享的pixi.js开发微信小游戏。

因为都是使用webpack+babel打包，导致打包后文件里npm第三方包代码一样，重复率太高，微信小游戏识别为抄袭。。。解释了也没用，一直不给审核通过，还扣了信用分。。。所以这一版仅供参考。

后来我就重构了一版，去掉了webpack打包。

微信小游戏码

游戏部分截图

游戏玩法

点击屏幕左右两边，控制小熊躲避障碍物向上左右两边跳，跳越多层得分越高，踩到星星道具可直接加10分。

源码介绍

github地址：https://github.com/CB-ysx/bearjump

框架

使用webpack+babel打包，采用JetLua提供的pixi开发框架。

目录结构

说明：

readmeimg目录不用管，这是我在github显示部分游戏截图存放的图片。
源码主要是src目录下

game.json和project.config.json是微信小游戏必须的文件，可直接通过开发者工具创建项目后复制过来，当然为了配合本项目结构，需要修改game.json的内容。当然也可以直接使用本项目的game.json文件即可。

static目录存放一些静态资源，当然如果资源太大，可以选择存放在cdn之类的。 cloud目录存放的是云函数，本项目没有额外开发后端项目，直接使用小游戏提供的云开发。 game目录是游戏主域的源码 openDataContext目录是游戏子域的源码

主域：可理解为玩家可见的绘制域子域：绘制的canvas对玩家不可见，需要在主域获取子域的canvas绘制出去，子域主要用来绘制一些敏感数据，比如用户的好友数据、群组数据等，该类数据微信不直接提供给开发者使用，只能从子域获取。

使用的主要的npm包

本游戏使用pixi.js开发，由于微信小游戏是没有dom，只有canvas，直接使用pixi.js会有一些问题，需要加多个adapter来做兼容，这里就直接使用JetLua提供的。

@iro/wechat-adapter // 适配器
popmotion // 做动画
pixi
@pixi/unsafe-eval

如何使用pixi.js开发

主要看src/game/core/core.js文件

const ticker = PIXI.Ticker.shared;
const loader = PIXI.Loader.shared; // 用于加载图片
const stage = new PIXI.Container(); // 舞台，之后所有的场景都是放在该舞台上显示出来
const monitor = new PIXI.utils.EventEmitter();
const pixelRatio = Math.min(2, devicePixelRatio);

const renderer = new PIXI.Renderer({ // 使用webgl
    view: canvas, // canvas在window上，直接使用
    antialias: true,
    backgroundColor: 0x171a24,
    width: width * pixelRatio,
    height: height * pixelRatio
});

const zoom = {
    mix: [
        renderer.screen.width / design.width,
        renderer.screen.height / design.height
    ],
    get max() {
        return Math.max(...this.mix);
    },
    get min() {
        return Math.min(...this.mix);
    }
};

renderer.plugins.accessibility.destroy();
renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => { // 适配点击事件
    point.set(x * pixelRatio, y * pixelRatio);
};

ticker.add(() => renderer.render(stage)); // 渲染

入口

app.js 引入core.js等文件，然后做一些监听（页面显示，路由跳转等）

这里提下音乐播放相关问题，小游戏挂起（回到微信页面等）会触发暂停播放音乐，然而再次打开小游戏时，音乐并不会继续播放。查了下可使用微信的接口来监听阻断音乐播放事件。

wx.onAudioInterruptionBegin(()=> {
    // 阻断音乐播放
    console.log('onAudioInterruptionBegin');
});

wx.onAudioInterruptionEnd(()=> {
    console.log('onAudioInterruptionEnd');
    // 此时回到游戏页面了，发布该事件
    monitor.emit('wx:onAudioInterruptionEnd');
});
...
monitor.on('wx:onAudioInterruptionEnd', ()=> {
    // 监听该事件，播放音乐
    // 这里填空的话，会自动获取最后一次播放的音乐
    wx.$audio.playBgm('', true);
}).on('muted:bgm', (muted)=> {
    wx.$audio.muteBgm(muted);
}).on('muted:sound', (muted)=> {
    wx.$audio.mute(muted);
});

路由监听

monitor
    .on('scene:go', (name, opt = {}) => {
        switch (name) {
        case 'preload': {// 跳转到加载页
            pointer = preload;
            preload.show(opt);
            break;
        }
        case 'home': {// 游戏首页
            pointer = home;
            home.show(opt);
            break;
        }
        case 'game': {// 游戏页
            pointer = game;
            game.show(opt);
            break;
        }
        }
    });
// 刚进来，先去加载页
monitor.emit('scene:go', 'preload');

游戏开发

其他不做多介绍了，可自行查看源码了解。这里介绍下游戏开发逻辑。

分解

考虑到后续的功能增加，这里先拆分游戏组件，分离出可复用可扩展的元素。因为本游戏是控制小熊在方块上跳，小熊和障碍物都是出于各个方块上，因此，方块可拆分出来。

Block类所有方块的基类（也是空方块）方块内有自己的container，用于存放道具，当然方块背景也是存放在container内，在游戏中就直接把container添加进游戏场景中即可，不需要知道方块的属性等。

class Block {
    constructor(bg) {
        this.uid = wx.$util.uuid(); // 每个方块都有属于自己的id
        this.type = BLOCK_TYPE.EMPTY; // 方块的类型
        this.sw = 0; // 方块的大小
        this.sh = 0;
        this._scale = 1;
        this.container = new PIXI.Container();

        this.bg = pixiUitl.genSprite(bg); // 方块图片
        this.sw = this.bg.width;
        this.sh = this.bg.height;
        this.container.addChild(this.bg);
        this.container.width = this.sw;
        this.container.height = this.sh;
    }
    ......
}

接着是具备道具功能的方块，继承与Block

/**
 * 有障碍物的方块
 */
class BarrireBlock extends Block {
    constructor(bg) {
        super(bg);
        this.type = BLOCK_TYPE.BARRIER;
	// 在方块上放置障碍物
        this.barrier = new PIXI.Sprite();
        this.barrier.anchor.set(0.5, 0.5);
        this.barrier.x = this.container.width / 2;
        this.barrier.y = 18;
        this.container.addChild(this.barrier);
    }

    setBarrier(name) {
	// 设置障碍物图片
        this.barrier.texture = pixiUitl.getTexture(name);
        return this;
    }

    hideBarrier() {
	// 清空障碍物
        this.barrier.texture = null;
    }
}

/**
 * 假的方块（踩上去0.5秒后就会掉落）
 */
class FakeBlock extends Block {
    constructor(bg) {
        super(bg);
        this.type = BLOCK_TYPE.FAKE;
        this.waitToFall = false;
    }

    init() {
        this.waitToFall = false;
    }

    startToFall() {
        this.waitToFall = false;
    }

    fall() {
	// 假的方块，被踩中后会自动掉落
        return new Promise(resolve=> {
            if (this.waitToFall) {
                tween({
                    from: {
                        y: this.y,
                        alpha: 1
                    },
                    to: {
                        y: screen.height,
                        alpha: 0
                    },
                    ease: easing.easeIn,
                    duration: 200,
                }).start({
                    update: v => {
                        this.y = v.y;
                        this.alpha = v.alpha;
                    },
                    complete: resolve
                });
            } else {
                resolve();
            }
        });
    }
}

线有了方块，还需要一个统一管理每一行的方块的类，因为每一行的方块都是同时出现，超过一定行数后是同时消失。所以做多一个Line类来管理。
池因为该游戏会频繁生成方块，所以做多一个方块池来管理，每次创建都从该池中获取方块，如果不存在，则再新建。方块消失时自动放回池里待用。
熊熊也跟方块类似，需要一个container，因为熊身上可能会有一些道具效果（比如保护圈）。

方块生成规则

好了，拆分好了这些类，接下来就是如何生成方块（如何放置障碍物等，不能出现必死的道路）这里是从底部往上，一行一行的生成，前几行固定生成没有任何功能的方块。前几行的方块数量由listData控制 const lineData = [1, 2, 3, 4, 3, 4, 3, 4, 3, 4, 3, 4]; 之后的就每一行比上一行随机+-一个方块。

接下来就是重点，如何保证不会出现必死的道路。需要通过上一行的方块功能来判断，可能比较复杂，讲不清晰，我自己能脑补画面，懒得画图了。。。

1、如果当前方块的前一个方块是障碍物，则该位置也不允许出现障碍物。 2、如果上一行比当前行数量多 2.1、上一行于当前方块相邻的两个方块如果都不是障碍物，那么该位置就可以随机出现障碍物，否则当前方块不允许出现障碍物。 2.2、当前方块是当前行的最后一个，且上一行的最后一个是障碍物，那该位置也可以是随机出现障碍物。 3、如果上一行比当前行数量少 3.1、当前行第一个和最后一个都可以是随机出现障碍物，最后一个可出现的前提是前一个非障碍物。 3.2、上一行相同下标位置是障碍物，那该行该下标的方块也可以是随机出现障碍物。

控制障碍物的数量，随着行数增加而增加： Math.random() < (0.4 + this.lineNum * 0.005)

小熊跳跃

小熊跳跃如何获取下一个方块，全局存放一个小熊所在方块在所在行的下标index。如果向左跳，则获取下一行的index-1位置的方块，否则获取index+1位置的方块。

如果方块不存在或者是障碍物，则判断游戏失败。

否则根据该方块的xy坐标计算小熊需要跳跃的位置。这里需要注意的是，没跳跃一层，所有方块就会下降一层，所以最终小熊跳跃停止后的y值是不变的。

子域绘制

需要注意的是，在子域绘制完排行榜等数据后，在主域绘制方法如下：

ticker.add(this.update, this);

update() {
    if (this.showEnding) {
        // 显示结束分数
        canvas = wx.$open.getCanvas();
        this.endSprite.texture = PIXI.Texture.from(canvas);
        this.endSprite.texture.update();
    }
}

最后

大概就分享这么多。

原文地址

http://codebear.cn/article?id=3omTj5PyywuygydihDwHSG