Cocos2d-x JS 刮刮乐

参考地址：https://blog.csdn.net/u012926027/article/details/78932983

失败的尝试：通过前一个位置递增来逼近后一个位置。（当滑动速度过快时，并未得到想要的效果，原因未知，猜测是手机性能并不能满足条件）

主要做了从Lua到JS的移植工作，代码如下：

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    pEraser:null,
    pRTex:null,
    ctor:function () {
        this._super();

        var size = cc.winSize;
        this.sprite = new cc.Sprite(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2
        });
        this.sprite_size = this.sprite.getContentSize();
        this.addChild(this.sprite, 0);

        //由于touch.getLocation()所获得的坐标原点并非屏幕左下角，所以创建一个位置在屏幕左下角的对象通过convertToWorldSpace函数来矫正位置。这个解决方法并不适用于所有情况，请注意。
        this.origin_mark = new cc.Sprite(res.HelloWorld_png);
        this.origin_mark.attr({
            x: 0,
            y: 0
        });
        this.origin_mark.setVisible(false);
        this.addChild(this.origin_mark, 0);

        this.pEraser = new cc.DrawNode();
        var fRadius = 30;
        var nCount = 100;
        var coef = 2 * Math.PI / nCount;
        var circle = new Array();
        for(var i = 0;i < nCount;++i)
        {
            var rads = i*coef;
            var temp = cc.p(fRadius*Math.cos(rads),fRadius*Math.sin(rads));
            circle.push(temp);
        }
        this.pEraser.drawPolygon(circle,nCount,cc.color(0,0,0,0),0,cc.color(0,0,0,0));
        this.pEraser.retain();

        this.pRTex = new cc.RenderTexture(size.width/2,size.height/2);
        this.pRTex.setPosition(size.width/2,size.height/2);
        this.addChild(this.pRTex,10);

        //加载等待被擦除的图片
        var pBg = new cc.Sprite(res.dirt_png);
        pBg.setPosition(0,0);
        this.pRTex.begin();
        pBg.visit();
        this.pRTex.end();

        var m_touchPoint = cc.p();
        var already_touched = false;//由于未知的原因导致无法单点触摸，所以通过该变量来实现单点触摸。
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,   
            onTouchBegan:function(touches,event){
                if(already_touched)
                    return false;
                //cc.log("onTouchBegan");
                m_touchPoint.x = 0;
                m_touchPoint.y = 0;
                var target = event.getCurrentTarget();
                m_touchPoint = touches.getLocation();
                var revised_coordinates = target.origin_mark.convertToWorldSpace(m_touchPoint);
                target.eraseByBlend(revised_coordinates.x,revised_coordinates.y);
                already_touched = true;
                return true;
            },
            onTouchMoved:function(touch,event){
                cc.audioEngine.playEffect("res/bonus_down.wav");
                var target = event.getCurrentTarget();
                var point = touch.getLocation();
                var revised_coordinates = target.origin_mark.convertToWorldSpace(point);
                target.eraseByBlend(revised_coordinates.x,revised_coordinates.y);

                var target = event.getCurrentTarget();
                var point = touch.getLocation();
                var width = target.distance(m_touchPoint,point);
                var rotate = target.getP2PAngle(m_touchPoint,point);
                var height = 2*fRadius;
                var point_revised_coordinates = target.origin_mark.convertToWorldSpace(point);
                var m_touchPoint_revised_coordinates = target.origin_mark.convertToWorldSpace(m_touchPoint);
                var midPos = cc.p((point_revised_coordinates.x+m_touchPoint_revised_coordinates.x)/2,
                    (point_revised_coordinates.y+m_touchPoint_revised_coordinates.y)/2);

                var polygonEraser = new cc.DrawNode();
                var points = new Array(
                    cc.p(-width/2,-height/2),
                    cc.p(-width/2,height/2),
                    cc.p(width/2,height/2),
                    cc.p(width/2,-height/2));
                polygonEraser.drawPolygon(points,4,cc.color(0,0,0,0),1,cc.color(0,0,0,0));
                polygonEraser.setRotation(-rotate);
                polygonEraser.setPosition(midPos);
                polygonEraser.setBlendFunc(cc.GL_ONE,cc.ZERO);
                target.pRTex.begin();
                polygonEraser.visit();
                target.pRTex.end();
                m_touchPoint = point;
            },
            onTouchEnded:function(touch,event){
                already_touched = false;
            }
        },this);

        return true;
    },

    distance:function(pos1,pos2)
    {
        var pos = cc.p(pos2.x - pos1.x,pos2.y - pos1.y);
        var sum_squares_sides = pos.x*pos.x + pos.y*pos.y;
        return Math.sqrt(sum_squares_sides);
    },

    //获得两个坐标确定向量的单位向量
    normalize:function(pos1,pos2)
    {
        var pos = cc.p(pos2.x - pos1.x,pos2.y - pos1.y);
        var sum_squares_sides = Math.sqrt(pos.x*pos.x+ pos.y*pos.y);
        if(pos.x == 0 && pos.y == 0){
            return cc.p(0,0);
        }else{
            return cc.p(pos.x/sum_squares_sides,pos.y/sum_squares_sides);
        }   
    },

    getP2PAngle:function(pos1,pos2)
    {
        var x = pos1.x - pos2.x;
        var y = pos1.y - pos2.y;
        return 180 * (Math.atan2(y,x)/Math.PI);
    },

    eraseByBlend:function(posX,posY)
    {
        this.pEraser.setPosition(cc.p(posX,posY));
        this.pEraser.setBlendFunc(cc.GL_ONE,cc.ZERO);
        this.pRTex.begin();
        this.pEraser.visit();
        this.pRTex.end();
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});