KineticJS - How to split up objects and files

Question

Me and a group at my university is developing a game on the web using KineticJS. We are using alot of shapes that are displayed, removed and have several actionevents.

Right now we havent gotten very far but i still feel files are getting very big. Do you have any tips for how we should divide everything up in smaller files? Is it possible to store all the objects in one file and just execute actionevents in another? Any tips are welcome of how the workflow should look like!

Answer 1

Tip: Use the factory model to define and create your Kinetic objects

Here's a demo that lets uses a factory to build as many circles as you need in about 50 lines of javascript:

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

About the Factory Model

First, create a JS object that holds all the properties that define a single unique circle.

You could think of this as a blueprint of how to build this exact circle.

The actual Kinetic.Circle will be built later using myCircleDefinition5 and will be added to the layer.

Performance note: You can use JSON to save this to save myCircleDefinition5 to a file or database.

And just like unobtrusive javascript, your data definitions are kept separate from your code making for cleaner code.

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

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

Here is the code that uses myCircleDefinition5 to add a real Kinetic circle on the layer:

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