CatFish/assets/Script/goFishingScene.js

/**
 * 绘制钓鱼线，线在水里飘的效果
 */
cc.Class({
    extends: cc.Component,

    properties: {
    
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {    
        Module.goFishingObj = this;
        this.touchEnbled = true;    
        this.touchId = [];     
        Module.state = true;   
        this.moveCount = 0;
        this.isShouGou = true
    },

    start () {
        this.init();
    },
    /**
     * 初始化鱼钩
     */
    init: function() {
        this.windowSize=cc.view.getVisibleSize();

        this.y1 = this.windowSize.height + 300;
        this.x1 = this.windowSize.width / 2;
        
        this.y2 = this.windowSize.height - this.windowSize.height/ 2 / 2 ;
        this.x2 = this.windowSize.width / 2;

        this.y3 = this.windowSize.height / 2 -50;
        this.x3 = this.windowSize.width / 2;

        this.hook = this.node.getChildByName('hook');
        this.hook.x = this.x3 - 14;
        this.hook.y = this.y3 + 3;

        this.limits = this.node.getChildByName('limits');
        this.limits.x = this.x3 - 14;
        this.limits.y = this.y3 + 3;        

        var ctx = this.getComponent(cc.Graphics);    
        if (!ctx) ctx = this.addComponent(cc.Graphics);
    
        ctx.clear();
        ctx.lineWidth = 2;
        ctx.strokeColor = cc.Color.BLACK;
        ctx.moveTo(this.x1,  this.y1);

        ctx.bezierCurveTo(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
        ctx.stroke();
      
        Module.fishingLine = this.fishingLine = ctx;
        
        this.node.on(cc.Node.EventType.TOUCH_START, this.touchBegin.bind(this), this );
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoving.bind(this), this );
        this.node.on(cc.Node.EventType.TOUCH_END, this.touchEnd.bind(this), this );
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.touchCancel.bind(this), this );
    },
    /**
     * 触摸开始    
     */
    touchBegin:function(touch,event){      
        if (this.touchId.length != 0) return;           
        this.touchId.push(touch.getID());
        this.lastTouch = touch.getLocation();           
    },
    /**
      * 移动中
      */
    touchMoving:function(touch,event){            
        if (Module.isShouGou) return;
        var width = this.windowSize.width;      
        if (touch.getID() !=  this.touchId[0]) return;       
        if (touch.getLocation() == undefined || this.lastTouch == undefined) return;    
        this.isShouGou = true;
        var p = touch.getLocation();
        var movex = p.x - this.lastTouch.x;
        var movey = p.y - this.lastTouch.y;
        if(this.x3 >= 0 && this.x3 <= width){
            var len = (p.x-this.lastTouch.x)*(p.x-this.lastTouch.x)+(p.y-this.lastTouch.y)*(p.y-this.lastTouch.y)
            var length = Math.pow(len,2);
             if(length > 1){
                this.x3+= movex * 1.2;                    
                this.lastTouch = p; 
             }
        }
        if(this.x3 < 0){ this.x3 = 0 }
        if(this.x3 > this.windowSize.width ){ this.x3 = this.windowSize.width }
                         
        if (this.fishingLine) {        
            this.fishingLine.clear();        
            this.fishingLine.moveTo(this.x1,  this.y1);                 
            this.fishingLine.bezierCurveTo(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
            this.fishingLine.stroke();
            Module.fishingLine = this.fishingLine;
            Module.state = true;
            this.moveCount = 0;
            this.hook.x = this.x3- 14;
            this.limits.x = this.hook.x;
            this.setHookRotation();
        }
    },
    /**
     * 设置鱼钩角度
     */
    setHookRotation: function() {
        var r = 0;
        if (this.hook.x > this.windowSize.width / 2) {
            r = -((this.hook.x - this.windowSize.width / 2)/10 / 2);
        } else {
            r = Math.abs((this.hook.x- 320))/10 /2;
        }            
        this.limits.x = this.hook.x;
        this.hook.rotation = r;
    },
    /**
      * 触摸结束
      */
    touchEnd:function(touch, event){    
        if (touch.getID() ==  this.touchId[0]) {
            this.touchId = [];
        }       
     },
     /**
      * 触摸取消
      */
     touchCancel: function(touch, event){
        this.touchId = [];
        if (!Module.state) return;        
     },
     /**
      * 钓鱼线摆动方向  
      */
    update (dt) {      
        //收钩
        if (Module.isShouGou && this.isShouGou) {
            if (this.x2 > this.windowSize.width / 2)  {
                this.x2 -= 2;
            } else {
                this.x2 += 2;
            }
            var flag = 0;
            if (this.x3 > this.windowSize.width / 2)  {
                this.x3 -= 2;
                flag = 1;
            } else {
                this.x3 += 2;
                flag = 2;
            }
            // if () {

            // }
            if (this.x3 > this.windowSize.width / 2 && flag == 2)  {
                this.isShouGou = false;
                this.hook.rotation = 0;
            } else if (this.x3 < this.windowSize.width / 2 && flag == 1){
                this.isShouGou = false;
                this.hook.rotation = 0;
            }
            if (this.fishingLine) {    
                this.fishingLine.clear();
                this.fishingLine.moveTo(this.x1, this.y1);                    
                this.fishingLine.bezierCurveTo(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
                this.fishingLine.stroke();
                Module.fishingLine =  this.fishingLine;
                this.hook.x = this.x3- 14;
                this.limits.x = this.hook.x;
                this.setHookRotation();
            }
            return;
        }
        if (!Module.state || this.moveCount == 3) return;
        var kAB = (this.y2-this.y1)/((this.x2) -this.x1);
        var kBC = (this.y3-this.y2)/(this.x3- (this.x2));
        if (kAB == Infinity) kAB = 0;
        if (kBC == Infinity) kBC = 0;    
        //贝塞尔曲线是否成直线
        if (parseInt(kAB) == parseInt(kBC)) {
            Module.state = false;                
            return;
        }  
        if (this.x3 == this.windowSize.width / 2) {
            this.x2 = this.windowSize.width / 2;
            Module.state = false;
            return;
        } else if (this.x2 < this.x3) {
            if (this.moveCount != 1 && this.moveCount < 3) ++this.moveCount;
            this.x2 += 8;            
        } else {
            if (this.moveCount != 2  && this.moveCount < 3) this.moveCount+=2;
            this.x2 -= 8;            
        }
        //绘制钓鱼线
        if (this.fishingLine) {    
            this.fishingLine.clear();
            this.fishingLine.moveTo(this.x1, this.y1);                    
            this.fishingLine.bezierCurveTo(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
            this.fishingLine.stroke();
            Module.fishingLine =  this.fishingLine;
            this.hook.x = this.x3- 14;
            this.limits.x = this.hook.x;
            this.setHookRotation();
        }
    },
    //还原鱼钩状态
    restore: function() {

        this.y1 = this.windowSize.height + 300;
        this.x1 = this.windowSize.width / 2;
        
        this.y2 = this.windowSize.height - this.windowSize.height/ 2 / 2 ;
        this.x2 = this.windowSize.width / 2;

        this.y3 = this.windowSize.height / 2 -50;
        this.x3 = this.windowSize.width / 2;

        this.hook.x = this.x3 - 14;
        this.hook.y = this.y3 + 3;        

        var ctx = this.getComponent(cc.Graphics);    
        if (!ctx) ctx = this.addComponent(cc.Graphics);
    
        ctx.clear();
        ctx.lineWidth = 2;
        ctx.strokeColor = cc.Color.BLACK;
        ctx.moveTo(this.x1,  this.y1);

        ctx.bezierCurveTo(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
        ctx.stroke();
      
        Module.fishingLine = this.fishingLine = ctx;
        this.hook.rotation = 0;
        this.limits.x = this.hook.x;
    },
});