递归函数在满足条件时执行整个“堆栈”

Question

此程序是一个随机在屏幕上走动的动画线。我已经重构了要在对象中使用的代码，但仍然遇到问题。我希望有一条＆＃34;弹跳＆＃34;在屏幕的一侧，但不幸的是，当它这样做时，它创建了一个更大的线，没有动画，并开始失控。

function animatedLine(startx, starty, colorStr){
    // these should be passed into the object.
    this.curpointX = startx,
    this.curpointY = starty,
    this.NORTH = 1,
    this.NORTHEAST = 2;
    this.EAST = 3;
    this.SOUTHEAST = 4;
    this.SOUTH = 5;
    this.SOUTHWEST = 6; 
    this.WEST = 7;
    this.NORTHWEST = 8;
    this.colorHex = colorStr;

    var self = this;
    // Lets get rid of one of these position variables.
    this.startpointx = this.curpointX;
    this.startpointy = this.curpointY;
    this.curposx = this.curpointX;
    this.curposy = this.curpointY;
    this.endpointx = this.curpointX;
    this.endpointy = this.curpointY;
    this.myinterval = {};

    this.init = function() {
        this.myinterval = setInterval( function() { self.animate(self.endpointx,self.endpointy);}, 10);
    }

    this.animate = function(endpointx, endpointy) {
        this.startpointy = this.curposy;
        this.startpointx = this.curposx;
        if (this.curposx == endpointx && this.curposy == endpointy){
            this.drawLine();
            return false;
        }
        else if(endpointx != this.curposx && endpointy != this.curposy){
            // this will screw up if we have half pixel somewhere. ( will always be diagnol)
            this.curposy += (endpointy > this.curposy ? 1 : -1);            
            this.curposx += (endpointx > this.curposx ? 1 : -1);
        }
        else if(endpointx != this.curposx){
            this.curposx += (endpointx > this.curposx ? 1 : -1);
        }
        else if(endpointy != this.curposy){
            this.curposy += (endpointy > this.curposy ? 1 : -1);
        }
        else{
            console.log("We have a problem");
        }
        this.drawShape(this.curposx, this.curposy, this.colorHex);
    }

    this.drawShape = function(tendpointx, tendpointy, clor){
        var canvas = document.getElementById('bg');
        var ctx = canvas.getContext('2d');

        ctx.strokeStyle = clor;
        ctx.globalAlpha = 0.2;
        ctx.beginPath();
        ctx.moveTo(this.startpointx ,this.startpointy );
        ctx.lineTo(tendpointx,tendpointy);
        ctx.stroke();
    } 

    this.drawLine = function(flagDirection){

        clearInterval(this.myinterval);

        // calculate the next point with direction and distance.
        var direction = Math.floor(Math.random() * 8) + 1;
        var distance = Math.floor(Math.random() * 10) + 1;

        var newPointY, newPointX;

        switch(direction){
            case this.NORTH:
                newPointX = this.endpointx;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break; 
            case this.NORTHEAST:
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.EAST:
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy;
                this.setAnimationVariables(newPointX, newPointY);
                break; 
            case this.SOUTHEAST: 
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.SOUTH:
                newPointX = this.endpointx;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.SOUTHWEST:
                newPointX =  this.endpointx - distance;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);               
                break;
            case this.WEST:
                newPointX = this.endpointx - distance;
                newPointY = this.endpointy;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.NORTHWEST:
                newPointX = this.endpointx - distance;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            default:
                console.log("We have a problem");
        }
        this.init();
    }

    // Helper function to set variables for animation. 
    // TODO refactor to get rid of some of these variables.
    this.setAnimationVariables = function(newPointX, newPointY){

        // we can check this inside of here. 
        // check the newpoints. Verify its inside the canvas.
        if(newPointY > 0 && newPointX > 0 && newPointY < $(document).height() && newPointX < $(document).width()){
            this.startpointx = this.endpointx;
            this.startpointy = this.endpointy;
            this.curpointX = this.endpointx;
            this.curpointY = this.endpointy;
            this.endpointx = newPointX;
            this.endpointy = newPointY;         
        }
        else {
            // This is bugging out for some reason we are running the full programatic stack.
            this.drawLine();
        }
    }
}

你可以在这里看到我的jsfiddle：http://jsfiddle.net/9mmc4eab/2/

正如你所看到的那条线开始以指数方式绘制自己，因为每当它到达屏幕的边缘时它就会创建一个新的＃34;堆栈＆＃34;对于每个新行。我该如何解决这个问题？