캔버스에서 조건이 제대로 작동하지 않는 경우

Question

실제로 파이프와 같이 연결된 양식이 가로 및 세로로 연결된 점 집합이 있습니다. 내 목표는 포인트/파이프를 통해 원을 이동하는 것입니다. 조건이 제대로 작동하지 않는 경우.

begin 함수가 호출되면 첫 번째 점과 두 번째 점을 가져오고 첫 번째 조건부터 두 번째 점까지 원이 이동합니다.

두 번째 지점에 도달하면 현재 애니메이션이 중지되고 callBegin 함수에서 새 애니메이션이 시작되는 다음 if 조건으로 이동해야합니다. 내가 this.thats y로 새로운 오전

var ParticleGen = function() { 
     var particle = this; 
     this.begin = function(){ 
      var pipeBegin = points[pipeIndex]; 
      var pipeEnds = points[pipeIndex + 1]; 
      nx = pipeBegin.x; 
      ny = pipeBegin.y; 
      if(pipeBegin.x == pipeEnds.x){ 
       if(pipeBegin.y > pipeEnds.y){ 
        // endpoint y greater than start point y moving upwards 
        d = "up"; 
        function animloop(){ 
         if(ny > pipeEnds.y) { 
          ctx.clearRect(0, 0, w, h); 
          drawCircle(nx, ny); 
          ny--; 
          nx = nx; 
         } 
         requestAnimFrame(animloop); 
        } 
        animloop(); 
       }else if(pipeBegin.y < pipeEnds.y){ 
        d = "down"; 
        function animloop1(){ 
         if(ny < pipeEnds.y) { 
          ctx.clearRect(0, 0, w, h); 
          drawCircle(nx, ny); 
          ny++; 
          nx = nx; 
         } 
         requestAnimFrame(animloop1); 
        } 
        animloop1(); 

       }else if(ny == pipeEnds.y){ 
        cancelAnimationFrame(animloop1); 
        particle.callBegin(); 
       }   
      }else if(pipeBegin.y == pipeEnds.y){ 
       if(pipeBegin.x < pipeEnds.x){ 
        // start.x < end.x right movement 
        d = "right"; 
        function animloop2(){ 
         if(nx < pipeEnds.x) { 
          ctx.clearRect(0, 0, w, h); 
          drawCircle(nx, ny); 
          nx++; 
          ny = ny; 
         } 
         requestAnimFrame(animloop2); 
        } 
        animloop2(); 
       }else if(pipeBegin.x > pipeEnds.x) { 
        d = "left"; 
        function animloop3(){ 
         if(nx > pipeEnds.x) { 
          ctx.clearRect(0, 0, w, h); 
          drawCircle(nx, ny); 
          nx--; 
          ny = ny; 
         } 
         requestAnimFrame(animloop3); 
        } 
        animloop3(); 

       }else if(nx == pipeEnds.x){ 
        cancelAnimationFrame(animloop2); 
        particle.callBegin(); 
       } 
      } 
     } 
     this.callBegin = function(){ 
      if(pipeIndex <= 3){ 
       pipeIndex++; 
      } 
      particle.begin(); 
     } 
    }; 

function drawCircle(cx, cy){ 
    ctx.beginPath(); 
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false); 
    ctx.fillStyle = "black"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

var newObj = new ParticleGen(); 
newObj.begin(); 

아래 ... 내가 here.. 감사합니다 바이올린을 가지고있는 것처럼

코드는 간다.

Answer 1

여러분의 방법은 모든 ifs와 함께 달성하기 위해 너무 복잡하다고 생각합니다. 상당히 적은 코드로 처리 할 수 ​​있습니다.

그 외에도 애니메이션을 중지하고 잘못된 부분에서 새 세그먼트를 시작할지 여부를 확인하는 것이 문제였습니다. begin()의 주 코드에서이 작업을 수행하고 있지만이 메서드는 각 세그먼트의 시작 부분에서 한 번만 호출됩니다. 점이 끝나면 begin()을 다시 호출하지 않으므로 애니메이션을 중지하고 새 애니메이션을 시작할지 여부를 확인하지 않습니다. 사실, 현재의 애니메이션은 영원히 활성 상태를 유지하지만, 그것은 단지 때문에 이러한 IFS 중 하나의 아무것도하지 않습니다

if(ny > pipeEnds.y) { 
    ctx.clearRect(0, 0, w, h); 
    drawCircle(nx, ny); 
    ny--; 
    nx = nx; 
} 

그리고 그것은 도트의 끝에 도달했는지 여부는 확인이 IFS에 자사의 경로, 당신은 cancelAnimFrame을 호출하고 새 시퀀스를 시작해야합니다. fiddle을 업데이트하고 여기에 관련 코드 (begin() 및 callBegin() 함수)를 복사하십시오.

this.begin = function() { 
    var pipeBegin = points[pipeIndex]; 
    var pipeEnds = points[pipeIndex + 1]; 
    nx = pipeBegin.x; 
    ny = pipeBegin.y; 
    if (pipeBegin.x == pipeEnds.x) { 
     if (pipeBegin.y > pipeEnds.y) { 
      // endpoint y greater than start point y moving upwards 
      d = "up"; 

      function animloop() { 
       if (ny > pipeEnds.y) { 
        ctx.clearRect(0, 0, w, h); 
        drawCircle(nx, ny); 
        ny--; 
        nx = nx; 
        requestAnimFrame(animloop); 
       }else if (ny == pipeEnds.y) { 
        cancelAnimationFrame(animloop); 
        particle.callBegin(); 
       } 

      } 
      animloop(); 
     } else if (pipeBegin.y < pipeEnds.y) { 
      d = "down"; 

      function animloop1() { 
       if (ny < pipeEnds.y) { 
        ctx.clearRect(0, 0, w, h); 
        drawCircle(nx, ny); 
        ny++; 
        nx = nx; 
        requestAnimFrame(animloop1); 
       } else if (ny == pipeEnds.y) { 
        cancelAnimationFrame(animloop1); 
        particle.callBegin(); 
       } 

      } 
      animloop1(); 

     } 
    } else if (pipeBegin.y == pipeEnds.y) { 
     if (pipeBegin.x < pipeEnds.x) { 
      // start.x < end.x right movement 
      d = "right"; 

      function animloop2() { 
       if (nx < pipeEnds.x) { 
        ctx.clearRect(0, 0, w, h); 
        drawCircle(nx, ny); 
        nx++; 
        ny = ny; 
        requestAnimFrame(animloop2); 
       } else if (ny == pipeEnds.y) { 
        cancelAnimationFrame(animloop2); 
        particle.callBegin(); 
       } 

      } 
      animloop2(); 
     } else if (pipeBegin.x > pipeEnds.x) { 
      d = "left"; 

      function animloop3() { 
       if (nx > pipeEnds.x) { 
        ctx.clearRect(0, 0, w, h); 
        drawCircle(nx, ny); 
        nx--; 
        ny = ny; 
        requestAnimFrame(animloop3); 
       } else if (ny == pipeEnds.y) { 
        cancelAnimationFrame(animloop3); 
        particle.callBegin(); 
       } 

      } 
      animloop3(); 

     } else if (nx == pipeEnds.x) { 
      cancelAnimationFrame(animloop2); 
      particle.callBegin(); 
     } 
    } 
} 
this.callBegin = function() { 
    if (pipeIndex <= 3) { 
     pipeIndex++; 
     console.log(pipeIndex) 
     particle.begin(); 
    } 

}