JavaScript가 의도 한대로 작동하지 않습니다.

Question

나는 게임을 만들기 시작하고 stickman의 다리에 대한 애니메이션을 코딩하는 동안 다리가 떨어져 나가고 프로그램을 시작할 때 지점 a에서 점 b로 이동하는 것처럼 보입니다. . Ind 나는 잘못 된 것이 무엇인지 알 수 없다. 여기 내 코드가있다.

var grassY = 370; 
var bodyX = 200; 
var ham1X = 220; 
var ham1Y = 350; 
var ham2X = 185; 
var ham2Y = 350; 
var foot1X = 230; 
var foot1Y = 365; 
var foot2X = 165; 
var foot2Y = 340; 
var bodyhigh = 315; 
var bodylow = 340; 

fill(4, 255, 0); 
rect(-1,grassY,401,31); 



draw = function() { 
    var cn = 2; 
    var bcn = 0; 
    background(255, 255, 255); 
    fill(4, 255, 0); 
    rect(-1,grassY,401,31); 
    line(bodyX,bodylow,bodyX,bodyhigh); 
    line(bodyX,bodylow,ham1X,ham1Y); 
    line(ham1X,ham1Y,foot1X,foot1Y); 
    line(bodyX,bodylow,ham2X,ham2Y); 
    line(ham2X,ham2Y,foot2X,foot2Y); 

    if(bcn === 0){ 
     if(cn===2){ 
      ham1X -= 0.5;//-5 
      ham1Y += 0.5;//+5 
      ham2X += 1;//+10 
      ham2Y += 0.5;//+5 
      foot1X -= 2.5;//-25 
      foot1Y = 365;//0 
      foot2X -= 1.5;//-15 
      foot2Y += 0.5;//+5 
     } 
     if(ham1X <= 215){ 
      ham1X = 215;//-5 
      ham1Y = 355;//+5 
      ham2X = 195;//10 
      ham2Y = 355;//+5 
      foot1X = 205;//-25 
      foot1Y = 365;//0 
      foot2X = 180;//-15 
      foot2Y = 350;//+5 
      cn = 11; 
     } 
     if(cn === 11){ 
      ham1X -= 3;//-30 
      ham1Y -= 0.5;//-5 
      ham2X += 2.5;//+25 
      ham2Y -= 0.5;//-5 
      foot1X -= 4;//-40 
      foot1Y -= 2.5;//-25 
      foot2X += 5;//+50 
      foot2Y += 1.5;//+15 
     } 
    } 
    if(ham1X <= 185){ 

     cn = 3; 
     bcn = 1; 
    } 
    if(cn === 3){ 
     ham1X += 3;//-30 
     ham1Y += 0.5;//-5 
     ham2X -= 2.5;//+25 
     ham2Y += 0.5;//-5 
     foot1X += 4;//-40 
     foot1Y += 2.5;//-25 
     foot2X -= 5;//+50 
     foot2Y -= 1.5;//+15 
     cn = 4; 
    } 
    if(ham1X >= 215){ 
     ham1X = 215;//-5 
     ham1Y = 355;//+5 
     ham2X = 195;//10 
     ham2Y = 355;//+5 
     foot1X = 205;//-25 
     foot1Y = 365;//0 
     foot2X = 180;//-15 
     foot2Y = 350;//+5 
     cn = 5; 
    } 
    if(cn === 5){ 
     ham1X += 0.5;//-5 
     ham1Y -= 0.5;//+5 
     ham2X -= 1;//+10 
     ham2Y -= 0.5;//+5 
     foot1X += 2.5;//-25 
     foot1Y = 365;//0 
     foot2X += 1.5;//-15 
     foot2Y -= 0.5;//+5 
    } 
    if(ham1X >= 220){ 
     cn = 2; 
     bcn = 0; 
    } 

}; 

Answer 1

이 Processing.js 또는 P5.js입니까? 어느 쪽이든 우리가 실행할 수있는 MCVE을 제공하십시오. setup() 기능은 어디에 있습니까?

스택 오버플로는 일반적으로 "이 100 줄의 코드가 작동하지 않는 이유는 알 수 없습니다."유형 질문을 위해 설계되지 않았습니다. 이 코드 라인은 ABC가 아니라 XYZ 형식의 질문이라고 생각했습니다.

도움을 받으려면 작은 덩어리로 작업하는 습관이 필요합니다. 한 번에이 전체 애니메이션을 프로그래밍하려고 한 것처럼 보입니다.이 애니메이션은 작동하지 않는 상황에서 왜 그런지 알 수 없습니다. 대신 한 번에 하나의 작은 조각에 대해 작업하십시오 : 화면에서 한 줄을 움직일 수 있습니까? 그 작업을 완벽하게 수행 한 다음 첫 번째 줄로 이동하는 다른 줄을 추가하십시오. 그런 다음보다 구체적인 질문을 게시 할 수 있습니다. 추천 읽기 : How to Program

그런데 다음으로해야 할 일은 프로그램을 디버그하는 것입니다. 모든 if 문 안에 console.log() 문을 추가하는 것으로 시작합니다.

코드가 항상 if(ham1X <= 215){ 문을 입력하고 그 안에 모든 변수를 설정한다고 알려줍니다. 그래서 프레임마다 이러한 변수를 설정하기 때문에 이동하는 것을 보지 못합니다.

지금 귀하의 코드는 귀하가 대답해야 할 대상입니다. 다시 한 가지, 작은 프로그램으로 시작하겠습니다. 그 일을하고, 더 이상 구체적인 질문이 있으면 여기로 돌아와라. 행운을 빕니다.