cocos creator + TypeScript 实现刮刮乐效果

---

1、引言

  这里分享一个刮刮卡效果，闲言少叙，我们直接上代码。

2、场景搭建

  场景搭建如图所示：

3、代码部分

  详细代码如下所示：

const {ccclass, property} = cc._decorator;

@ccclass
export default class test extends cc.Component {
    
    // LIFE-CYCLE CALLBACKS:
    
    mask = null;
    onLoad () { 
        this.mask = this.node.getChildByName('mask').getComponent(cc.Mask);
        this.node.on(cc.Node.EventType.TOUCH_START,function (e){
            console.log('touch start'); 
            this.commonFunc(e)
        },this);

        this.node.on(cc.Node.EventType.TOUCH_MOVE,(e)=>{
            console.log('touch move'); 
            this.commonFunc(e) 
        },this);
    }

    start () {

    }

    commonFunc (event){
        let point:cc.Vec2 = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    }

    _addCircle(point) {
        let graphics = this.mask._graphics;
        console.log("xxxx:",graphics)
        let color = cc.color(0, 0, 0, 255);
        graphics.rect(point.x,point.y,50,40)
        graphics.lineWidth = 2
        graphics.fillColor = color
        //graphics.strokeColor = color
        graphics.fill()
    }

    // update (dt) {}
}

4、效果展示

  到这里我们启动项目，来看看演示效果！

5、Demo下载

  为了方便大家使用这里直接给出下载链接，点击这里即可下载完整工程。

6、结束语

---

The End
  好了，今天的分享就到这里，如有不足之处，还望大家及时指正，随时欢迎探讨交流！！！

---

喜欢的朋友们，请帮顶、点赞、评论！您的肯定是我写作的不竭动力！