KineticJS - 객체와 파일을 분할하는 방법

Question

내 대학의 그룹과 한 명이 KineticJS를 사용하여 웹에서 게임을 개발 중입니다. 우리는 표시되고 제거되고 몇 가지 actionevents있는 셰이프를 많이 사용하고 있습니다.

지금 우리는 매우 멀리 떨어져 있지만 여전히 파일이 매우 커지고 있다고 느낍니다. 모든 것을 작은 파일로 나누는 방법에 대한 조언이 있습니까? 하나의 파일에 모든 객체를 저장하고 다른 객체에서 actionevents를 실행할 수 있습니까? 어떤 팁이든 워크 플로우의 모습을 환영합니다!

Answer 1

팁 :

: 정의하고 운동 여기

개체 수있는 데모 당신이 자바 스크립트의 약 50 라인에 필요한만큼의 동그라미를 구축하는 공장을 사용입니다 만드는 공장 모델을 사용 약

http://jsfiddle.net/m1erickson/s89Mu/ 공장 모델

먼저 알 보유 JS 객체를 만들 l 단일 고유 원을 정의하는 속성

이 정확한 원형을 만드는 방법의 청사진이라고 생각할 수 있습니다.

실제 Kinetic.Circle은 나중에 myCircleDefinition5를 사용하여 빌드되며 레이어에 추가됩니다.

성능 참고 사항 : JSON을 사용하여 myCircleDefinition5를 파일 또는 데이터베이스에 저장하도록 저장할 수 있습니다.

그리고 눈에 잘 띄지 않는 자바 스크립트처럼 데이터 정의가 코드와 분리되어 별도의 코드를 작성하지 않아도됩니다.

// turn the object into a real Kinetic.Circle 

makeCircle(myCircleDefinition5); 

// this is the "factory" that takes a definition and produces a real Kinetic.Circle 

function makeCircle(circleObject){ 
    var circle = new Kinetic.Circle({ 
     x:circleObject.cx, 
     y:circleObject.cy, 
     radius: circleObject.radius, 
     fill: circleObject.fill, 
     stroke: 'lightgray', 
     strokeWidth: circleObject.strokewidth, 
     draggable: true 
    }); 
    layer.add(circle); 
    layer.draw(); 
} 

: 여기

// create the definition of a circle -- not yet an actual circle 

var myCircleDefinition5={ 
    cx: 150, 
    cy: 100, 
    radius: 20, 
    fill: "blue", 
    strokewidth: 4 
} 

레이어에 실제 운동 원을 추가 myCircleDefinition5를 사용하는 코드입니다