还记得小时候玩的泡泡龙吗？用CocosCreator实现它！

摘要

习惯了方格形状的二维数组摆放模式后对《泡泡龙》这类参差不齐的摆法束手无策？别怕！免费教程、开源源码全部到位！

正文

效果

数据结构

/**
 * 泡泡数据对象
 */
export interface bubbleData {
    node: cc.Node,
    color: number,
    isLinked: boolean,
    isVisited: boolean
}

用二维数组表示，在 json 文件中提前配置好

{
    "lv1": [
        [2,2,2,3,3,3,4,4,4],
         [2,2,0,3,3,0,4,4],
        [0,2,0,0,3,0,0,4,0],
         [0,1,1,1,1,1,1,0],
        [0,0,1,1,0,1,1,0,0],
         [0,0,1,0,0,1,0,0],
        [0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0],
         [0,0,0,0,0,0,0,0]
    ],
    // 其他关卡省略......
}

坐标转化

一个转化工具类

public static readonly SCREEN_W: number = 720;
public static readonly SCREEN_H: number = 1280;
public static readonly BUBBLE_R: number = 40;
/** Y 方向偏差为 40 倍根号 3 */
public static readonly BUBBLE_Y: number = 40 * Math.sqrt(3);

/** 传入二维数组行列，返回泡泡对应位置坐标 */
public static convertRowColToPos (row: number, col: number): cc.Vec2 {
    // 奇数行前方少一个半径宽
    let posX: number = this.BUBBLE_R * ((row % 2) + 1) + col * this.BUBBLE_R * 2;
    let posY: number = this.SCREEN_H - (this.BUBBLE_R + row * this.BUBBLE_Y);
    return cc.v2(posX, posY);
}

/** 传入泡泡对应位置坐标，返回二维数组行列 */
public static convertPosToRowCol (posX: number, posY: number): cc.Vec2 {
    let row: number = Math.round((this.SCREEN_H - posY - this.BUBBLE_R) / this.BUBBLE_Y);
    let col: number = Math.round((posX - this.BUBBLE_R * ((row % 2) + 1)) / (this.BUBBLE_R * 2));
    return cc.v2(row, col);
}

优化碰撞

大多数情况下，乘法是慢于加法的，所以分段检测，x y 两方向都符合要求后再做乘法。

let offsetY = Math.abs(n.y - this.shootBubble.node.y);
if (offsetY > Util.BUBBLE_R * 2) continue;
let offsetX = Math.abs(n.x - this.shootBubble.node.x);
if (offsetX > Util.BUBBLE_R * 2) continue;
let dis = offsetX * offsetX + offsetY * offsetY;
if (dis > Util.BUBBLE_R * 2 * Util.BUBBLE_R * 2) continue;
// 在范围内，触发碰撞，停止射击移动
this.isShooting = false;
// ......

视频地址

录了教程放在了 Bilibili 视频站。
跳转链接：
https://space.bilibili.com/128813294
O(∩_∩)O~~
记得点赞哦！

结语

开源地址：
https://github.com/KuoKuo666/CocosCreator-Bubble

工程源码在我的微信公众号回复关键词【泡泡龙】也可获得

O(∩_∩)O~~

微信公众号