从闲暇摸鱼到微信小游戏《布布围赢》上线-CSDN博客

本文链接：https://blog.csdn.net/qq_39124699/article/details/140214653

从闲暇摸鱼到微信小游戏《布布围赢》上线

1. 起源

摸鱼间隙中浏览吾爱破解，偶然进入404页面，发现一款比较吸引我的小游戏《圈住小猫》，自此复刻到微信小游戏的念头油然而生。

2.微信小游戏个人开发者备案流程

自行审核结果报告、代备案授权书、著作声明这三个有模版需要的留下邮箱。微信认证要缴费30。游戏内容介绍比较难写（难编），需要页面截图及介绍而且审核耗时比较久大概20个工作日。不需要软著。

3.邀请函

可微信搜索《布布围赢》，在此诚邀各位体验。注：布布是一只考拉，游戏内的角色。

4.问题案例

4.1 如何使用Graphics 画一个六边形

确认中心点坐标
计算六个顶点坐标
连线填充

draw(ctx:Graphics ) {
    ctx.clear();
    ctx.lineWidth = 0;
    let center = new Vec2(0, 0);
    let radius = 100;
    let p0 = hexPoint(center, radius, 0);
    ctx.moveTo(p0.x, p0.y);
    let p1 = hexPoint(center, radius, 1);
    ctx.lineTo(p1.x, p1.y);
    let p2 = hexPoint(center, radius, 2);
    ctx.lineTo(p2.x, p2.y);
    let p3 = hexPoint(center, radius, 3);
    ctx.lineTo(p3.x, p3.y);
    let p4 = hexPoint(center, radius, 4);
    ctx.lineTo(p4.x, p4.y);
    let p5 = hexPoint(center, radius, 5);
    ctx.lineTo(p5.x, p5.y);
    ctx.lineTo(p0.x, p0.y);
    ctx.strokeColor.fromHEX("#ffffff");
    ctx.stroke();
    ctx.fillColor.fromHEX("#435343");
    ctx.fill();
}
hexPoint(center, radius, i,) {
    // layout 0 六边形顶点朝上 1边朝上 
    var angle_deg = 60 * i + (this.layout === 0 ? 30 : 0);
    var angle_rad = Math.PI / 180 * angle_deg
    return new Vec2(center.x + radius * Math.cos(angle_rad),
        center.y + radius * Math.sin(angle_rad))
}

效果图

4.2 如何计算最短最优路线

BFS 寻路代码略

4.3 位图字体显示第xxx关

ps " 第 0 1 2 3 4 5 6 7 8 9 关 "共 12 个字的图片，使用工具将这几种图片合成位图文件（一个.fnt 文件一个.png 文件），创建 Label 修改字体资源为.fnt 文件

4.4 微信好友排行榜

创建SubContextView组件
挂载个组件，onload方法执行window['wx'].setUserCloudStorage上传自己的数据，然后调用window[‘wx’].getOpenDataContext().postMessage(）发送消息获取排行榜。参考插件
效果图

4.5 粒子特效

main场景中配合漩涡旋转的粒子效果参数如下
配置图
效果图

4.6 实现由远到近的缩放效果

main场景中的五个图块，采用斐波那契数列来依次计算缩放值

customFibonacci(n) {
    // 自定义起始值
    if (n === 1) return 0.2;
    if (n === 2) return 0.3;

    // 初始化前两项
    let prevPrev = 0.2; // 相当于传统斐波那契中的第0项
    let prev = 0.3;     // 相当于传统斐波那契中的第1项
    let current;

    // 从第三项开始计算
    for (let i = 3; i <= n; i++) {
        current = prevPrev + prev;
        prevPrev = prev;
        prev = current;
    }

    return current;
}

效果图