Here is an example of how we can use kinetic to make a 2D image cube game. Each rectangular cube has 6 sides. When all 9 cubes are puzzled right side up on the board (=canvas) they show a wildlife animal scene. Frst we slice earch rect squared animal image into 9 identical squares. Initially path to these images are defined in a two-dimensional array. Then we create 9 temporary arrays to contain the images that strictly belongs to each one of the 9 cubes. (so that the nth cells from each imagegrid of the 6 animal scenes are extracted). We shuffle each of these 'cube'-arrays so as to mix the indexorder . And further more we rotate them randomly in 90,180, 270 angles!
objnode1.rotateDeg( )
This way we do get the puzzle shuffled up!
In kinetic code context every cube-page (=9 x 6=36 pages!) is defined by its own image object.class. Every cube therefore has got its 6 pages (= unique kinetic objects) vertically stacked on the relevant grid cell on the canvas. Actually we could have had just defined one kinetic object pr. gridcell, cause in fact we do use only the upmost placed object to punch upon with mouseclick to scroll the 'cube'-pages pr. each of the 9 cubes. As we can reference a kinetic object with kinetic/or jquery methods, as we can with DOM elements, we could potentially address every single one of the 36 'cube'-pages .
On each object we set the method: objnode1.setListening(true);
Then we define a click.on event ( so with mouse click we can scroll the 6 pages of each cube by the help of predefined index array that we dynamically use to keep track of active 'cube'-pages).
And finally we define a global master-node that has the role to reflect the active kinetic object that the player successively care about duing the game. (Hence we can refrence to the active object anywhere in the code with DOM manipulating methods).
In other words: we constantly keep record og which cube-page (kinetic object) is the active one.
Press on SPACE (32) key turns the present active cube page square clockwise forward in a 90 degree angle..
© Arrangement, December 2014, netscale.dk