KineticJS – Como dividir objetos e arquivos

Question

Eu e um grupo da minha universidade estamos desenvolvendo um jogo na web usando KineticJS.Estamos usando muitas formas que são exibidas, removidas e possuem vários eventos de ação.

No momento não avançamos muito, mas ainda sinto que os arquivos estão ficando muito grandes.Você tem alguma dica de como devemos dividir tudo em arquivos menores?É possível armazenar todos os objetos em um arquivo e apenas executar eventos de ação em outro?Qualquer dica sobre como o fluxo de trabalho deve ser é bem-vinda!

Answer 1

Dica:Use o modelo de fábrica para definir e criar seus objetos cinéticos

Aqui está uma demonstração que permite usar uma fábrica para construir quantos círculos você precisar em cerca de 50 linhas de javascript:

http://jsfiddle.net/m1erickson/s89Mu/

Sobre o modelo de fábrica

Primeiro, crie um objeto JS que contenha todas as propriedades que definem um único círculo exclusivo.

Você poderia pensar nisso como um plano de como construir esse círculo exato.

O Kinetic.Circle real será construído posteriormente usando myCircleDefinition5 e será adicionado à camada.

Nota de desempenho:Você pode usar JSON para salvar myCircleDefinition5 em um arquivo ou banco de dados.

E, assim como o javascript discreto, suas definições de dados são mantidas separadas do seu código, criando um código mais limpo.

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

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

Aqui está o código que usa myCircleDefinition5 para adicionar um círculo cinético real na camada:

// 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();
}