title: 还记得小时候玩的泡泡龙吗？用CocosCreator实现它！
PS:源码在最下方
摘要
习惯了方格形状的二维数组摆放模式后对《泡泡龙》这类参差不齐的摆法束手无策？别怕！免费教程、开源源码全部到位！
正文
效果
数据结构
/**
* 泡泡数据对象
*/
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~~
微信公众号
