Game Objects in a Structure - Building JavaScript Games for Phones, Tablets, and Desktop - page 200

Similarly, you check whether the rightmost object has been dragged more than half the cell width to
the right. If that is the case, you shift the row to the right:
var lastObj = this.at(this.columns - 1, this._dragRow);
if (lastObj.position.x > (this.columns - 1) * this.cellWidth + this.cellWidth / 2 &&
newpos - this._draggingLastX > 0)
this.shiftRowRight(this._dragRow);
Finally, you update the last dragging position so it contains the newly calculated one. That way, you
can perform the same dragging and shifting operations in the next call to update :
this._draggingLastX = newpos;
The way you handle touch dragging is very similar to mouse dragging. You need to do a little extra
administrative work. For one thing, you need to keep track of the finger that is currently dragging
in the grid. You store the touch index belonging to this finger in a member variable when the player
starts dragging:
this._touchIndex = Touch.getIndexInRect(rect);
You can then retrieve the position of the finger by using the touch index that you stored:
pos = Touch.getPosition(this._touchIndex);
Then you do exactly the same thing you did to handle the mouse dragging. For the complete code
to handle the touch and mouse dragging, see the JewelGrid class in the JewelJam3 example.
Creating the Game Objects
Now that you've defined all these different types of game objects, you can create them as part of the
game world. You've already briefly seen how to do that. First you add a background image:
this.add(new SpriteGameObject(sprites.background, ID.layer_background));
Then you create a grid to contain the jewels:
var rows = 10, columns = 5;
var grid = new JewelGrid(rows, columns, ID.layer_objects);
grid.position = new Vector2(85, 150);
grid.cellWidth = 85;
grid.cellHeight = 85;
this.add(grid);
Finally, you fill the grid with Jewel objects using a for loop:
for (var i = 0; i < rows * columns; i++) {
grid.add(new Jewel());
}