2016-11-25 7 views
0

저는 자바 스크립트에 익숙하며 작은 프로젝트를 작성하려고합니다 (예 : Patatap).Paper.js onKeyDown 메서드

애니메이션을 위해 Paper.js를 사용하고 이벤트 리스너를 위해 onKeyUp method을 사용하여 버튼을 누르면 이미지가 나타나게합니다. 이 코드는 제대로 작동하지만이 방법의 작동 방식을 이해하지 못합니다. 후드 아래에서 무엇을하고 있습니까? 그 기능을 다시 정의할까요? 중괄호 안에 무엇을 정의할까요? onKeyUp에 함수 (이벤트) {즉 기능 ..defining ?? ..}

(I는 "onFrame()"방법이 같은 문제).

//importing paper.js and howler.js 
 
//CREATING AN OBJECT OF LETTERS 
 
var keyData={ 
 
    q: { 
 
    sound: new Howl({ 
 
     src: ['sounds/bubbles.mp3'] 
 
     }), 
 
    color: '#1abc9c' 
 
    }, 
 
    w: { 
 
    sound: new Howl({ 
 
     src: ['sounds/clay.mp3'] 
 
    }), 
 
    color: '#2ecc71' 
 
    } //OTHER LETTERS HERE.. 
 
}; 
 

 
//CREATING CIRCLES ON THE SCREEN 
 
    var circles=[]; 
 
    function onKeyUp(event) { 
 
    if (keyData[event.key]){ 
 
     var maxPoint = new Point(view.size.width,view.size.height); 
 
     var randomPoint = Point.random(); 
 
     var point = randomPoint * maxPoint; 
 
     newCircle = new Path.Circle(point, 100); 
 
     newCircle.fillColor=keyData[event.key].color; 
 
     circles.push(newCircle); 
 
     keyData[event.key]['sound'].play() \t \t \t 
 
    } 
 
    }; 
 

 
//MAKE CIRCLES DISAPPEAR 
 
function onFrame(event) { 
 
    for(var i=0; i< circles.length;i++){ 
 
    \t circles[i].fillColor.hue += 1; 
 
\t circles[i].scale(0.99); 
 
\t if(circles[i].area < 1){ 
 
\t circles[i].remove(); 
 
\t circles.splice(i, 1); 
 
\t console.log(circles); 
 
\t } 
 
    } 
 
};
강력한 텍스트

당신의 대답 당신에게 AdamW 감사드립니다.

내가 가진 문제는 위의 줄에 관한 것입니다. 내가

// ON PAPER.JS 
 
function onKeyUp(event){ 
 
    //do stuff.. 
 
}; 
 

 
// ON MY PROJECT 
 
function onKeyUp(event){ 
 
    //do other different stuff.. 
 
};

을하는 것 같은 그것의, 나에게 아무 의미하지만은 "명확한"는 onKeyUp에() 메소드는 Paper.js에 기록하고 우선 순위를 부여합니다 이런 식으로 내 새로운 기능 onKeyUp(), 간단하게 다형성. 그래서, 왜 그렇게합니까? onFrame() 메소드에서도 마찬가지입니다.

답변

0

내가 어떤 종류의 설명을 요구하고 있는지 잘 모르는 경우 Paper.js에 익숙하지 않습니다.

는 일반적인 용어로 함수의 바디는 조건부

if (keyData[event.key]) { 
    // do stuff 
} 

조건 keyData 그 이름의 속성을 갖고 있는지 확인하기 위해 event 파라미터 검사에서 key 속성 취득에 싸여있다. 코드를 살펴보면 이것이 'q'또는 'w'의 핵심 가치가 될 것으로 보입니다. 해당 속성을 찾으면 '할 일'섹션을 실행하고 그렇지 않으면 건너 뜁니다. 그것은 '할 물건'섹션

  1. 날처럼 보인다

    는 원

  2. 의 중심 포인트를 선택
  3. 가 채워 100 일도 반경과 그 때의 원을 만들어 동그라미로 표시
  4. 동그라미를 'circle'이라는 기존 배열에 추가합니다.
  5. 'keyData'에서 항목을 선택하고 'sound'속성을 가져 와서 'play'메소드를 호출합니다. 'sound'속성은 'Howl'객체이고 나는 howls가 재생 메서드를 가지고 있다고 가정합니다.

요약하면 색이 바랜 디스크와 노이즈가 발생합니다.