为了媳妇，熬夜撸了一个合成大西瓜！

www.wesane.com/game/654/

https://github.com/tangxiangmin/cocos-big-watermelon

https://web-game-9gh6nrus14fec37e-1252170212.tcloudbaseapp.com/

https://docs.cocos.com/creator/2.3/manual/zh/

www.wesane.com/game/654/

https://github.com/tangxiangmin/cocos-big-watermelon

// Game.js
cc.Class({
    extends: cc.Component,

    properties: {

    },
    onLoad(){

    },
    start(){ }
})

// Game.js
properties: {
    fruitPrefab: {
        default: null,
        type: cc.Prefab
    },
}

// Game.js
onLoad(){
    let fruit = cc.instantiate(this.fruitPrefab);
    fruit.setPosition(cc.v2(0, 400));

    this.node.addChild(fruit);
}

const FruitItem = cc.Class({
    name: 'FruitItem',
    properties: {
        id: 0, // 水果的类型
        iconSF: cc.SpriteFrame // 贴图资源
    }
});

// Game.js
properties: {
    fruits: {
        default: [],
        type: FruitItem
    },
}

// Fruit.js
properties: {
    id: 0,
},
// 实例放在可以在其他组件中调用
init(data) {
    this.id = data.id
    // 根据传入的参数修改贴图资源
    const sp = this.node.getComponent(cc.Sprite)
    sp.spriteFrame = data.iconSF
},

// Game.js
createOneFruit(num) {
    let fruit = cc.instantiate(this.fruitPrefab);
    // 获取到配置信息
    const config = this.fruits[num - 1]

    // 获取到节点的Fruit组件并调用实例方法
    fruit.getComponent('Fruit').init({
        id: config.id,
        iconSF: config.iconSF
    });
}

onLoad() {
    // 监听点击事件
    this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
onTouchStart(){
    this.createOneFruit(1) // 生成水果
}

const instance = cc.director.getPhysicsManager()
instance.enabled = true
// instance.debugDrawFlags = 4
instance.gravity = cc.v2(0, -960);

const collisionManager = cc.director.getCollisionManager();
collisionManager.enabled = true

 // 设置四周的碰撞区域
let width = this.node.width;
let height = this.node.height;

let node = new cc.Node();

let body = node.addComponent(cc.RigidBody);
body.type = cc.RigidBodyType.Static;

const _addBound = (node, x, y, width, height) => {
    let collider = node.addComponent(cc.PhysicsBoxCollider);
    collider.offset.x = x;
    collider.offset.y = y;
    collider.size.width = width;
    collider.size.height = height;
}

_addBound(node, 0, -height / 2, width, 1);
_addBound(node, 0, height / 2, width, 1);
_addBound(node, -width / 2, 0, 1, height);
_addBound(node, width / 2, 0, 1, height);

node.parent = this.node;

// Fruit.js
onBeginContact(contact, self, other) {
    // 检测到是两个相同水果的碰撞
    if (self.node && other.node) {
        const s = self.node.getComponent('Fruit')
        const o = other.node.getComponent('Fruit')
        if (s && o && s.id === o.id) {
            self.node.emit('sameContact', {self, other});
        }
    }
},

// Game.js
createOneFruit(num) {
    let fruit = cc.instantiate(this.fruitPrefab);
    // ...其他初始化逻辑
     fruit.on('sameContact', ({self, other}) => {
        // 两个node都会触发，临时处理，看看有没有其他方法只展示一次的
        other.node.off('sameContact') 
        // 处理水果合并的逻辑，下面再处理
        this.onSameFruitContact({self, other})
     })
}

self.node.removeFromParent(false)
other.node.removeFromParent(false)

const {x, y} = other.node // 获取合并的水果位置
const id = other.getComponent('Fruit').id

const nextId = id + 1
const newFruit = this.createFruitOnPos(x, y, nextId) // 在指定位置生成新的水果

// Game.js
const JuiceItem = cc.Class({
    name: 'JuiceItem',
    properties: {
        particle: cc.SpriteFrame, // 果粒
        circle: cc.SpriteFrame, // 水珠
        slash: cc.SpriteFrame, // 果汁
    }
});

// Game.js
properties: {
    juices: {
        default: [],
        type: JuiceItem
    },
    juicePrefab: {
        default: null,
        type: cc.Prefab
    },
}

// Juice.js
cc.Class({
    extends: cc.Component,

    properties: {
        particle: {
            default: null,
            type: cc.SpriteFrame
        },
        circle: {
            default: null,
            type: cc.SpriteFrame
        },
        slash: {
            default: null,
            type: cc.SpriteFrame
        }
    },
    // 同样暴露一个init接口
    init(data) {
        this.particle = data.particle
        this.circle = data.particle
        this.slash = data.slash
    },
    // 动画效果
    showJuice(){

    }
}

// Game.js
let juice = cc.instantiate(this.juicePrefab);
this.node.addChild(juice);

const config = this.juices[id - 1]
const instance = juice.getComponent('Juice')
instance.init(config)
instance.showJuice(pos, n) // 对应的爆炸逻辑

https://www.shymean.com/article/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E5%8A%A8%E7%94%BB%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86

showJuice(pos, width) {
    // 果粒
    for (let i = 0; i < 10; ++i) {
        const node = new cc.Node('Sprite');
        const sp = node.addComponent(cc.Sprite);
        sp.spriteFrame = this.particle;
        node.parent = this.node;
        // ... 一堆随机的参数

        node.position = pos;
        node.runAction(
            cc.sequence(
                // ...各种action对应的动画逻辑
                cc.callFunc(function () {
                    // 动画结束后消除粒子
                    node.active = false
                }, this))
        )
    }

    // 水珠
    for (let f = 0; f < 20; f++) {
        // 同果粒，使用的spriteFrame切换成 this.circle
    }

    // 果汁只有一张贴图，使用this.slash，展示常规的action缩放和透明动画即可
},

properties: {
    boomAudio: {
        default: null,
        type: cc.AudioClip
    },
    waterAudio: {
        default: null,
        type: cc.AudioClip
    }
}

onSameFruitContact(){
    cc.audioEngine.play(this.boomAudio, false, 1);
    cc.audioEngine.play(this.waterAudio, false, 1);
}

https://github.com/tangxiangmin/cocos-big-watermelon

https://web-game-9gh6nrus14fec37e-1252170212.tcloudbaseapp.com/