DDTe3 Hours 19 to 21 A distorted Tile

The distortion puzzle is a game I had created before but have never released on Blazing Games. The idea is that the game is made up of a broken up images where the boxes that make up the image are varying sizes. The part of the image that is shown in each tile is scaled to the size of the tile making for a distorted version of the image. While the game is essentially the original picture puzzle game, the effect of the distortion makes the game much more challenging than a regular picture puzzle game.

The key problem with this game is that the game board is no longer a grid. This means that the tiles will need to be handled differently then the other grid-based games. Likewise, the display is not as simple as the image being displayed in the tile may be distorted. This means that it is a good idea to create a special tile for dealing with the tiles in the distortion puzzle.

Having a hex tile that handled borders was much more convenient then the approach used with the grid games, so I decided to take this approach with the distortionTile. As the rendering and management of the tile is pretty much the same as the hex tile except for the shape I will not go into much detail about that aspect of this class. The focus instead will be on the two key aspects of this class. These are the clip and splitting.

The clip is kind of complex as there are two clips that make up this tile. The first clip is the true clip which is set once all the splitting has been done. If the current clip is the same as the true clip than the tile is in the correct place. The current clip is what gets swapped and is used to determine what is drawn.

Splitting tiles is a special situation as it is what is used to generate the puzzle for the game. To prevent too small of tiles, there are restrictions on how big a tile has to be in order to be split. The split is always done along the longest side, though in hind-site this is probably unnecessary and even more distorted puzzles could be generated by removing this restriction. The split line is then randomly generated but will always be somewhere within the 60% of the middle of the side. The rational for doing this is to prevent super-slim slices within the puzzle as those are hard for the player to deal with both in figuring out what is in the slice and in clicking on the slice.

PuzzleGallery.DistortionTile.prototype.split = function()
{
   var child;
   var temp;
   var tempRect = new BGLayers.Rectangle(this._logicalPosition);
   var childRect = new BGLayers.Rectangle(this._logicalPosition);
   var childClip = new BGLayers.Rectangle(this._clip);
   if (Math.max(this._clip.width, this._clip.height) < (this.thickness*5))
       return null;
   temp = Math.random() * .6 + .2;
   if (this._clip.width >= this._clip.height) {
       this._clip.width = Math.floor(temp * this._clip.width);
       tempRect.width = Math.floor(temp * tempRect.width);
       childRect.x += tempRect.width;
       ++childRect.x;
       childRect.width -= tempRect.width;
       childClip.x += this._clip.width;
       childClip.width -= this._clip.width;
   } else {
       this._clip.height = Math.floor(temp * this._clip.height);
       tempRect.height = Math.floor(temp * tempRect.height);
       childRect.y += tempRect.height;
       ++childRect.y;
       childRect.height -= tempRect.height;
       childClip.y += this._clip.height;
       childClip.height -= this._clip.height;
   }
   this.adjustPosition(tempRect);
   child = new PuzzleGallery.DistortionTile(this.id, this._image, childClip, childRect.width, childRect.height, this.thickness);
   child.setTileListener(this.listener);
   this.parent.addChild(child, childRect);
  
   return child;
}

This leaves us with two things that need to be done to have a full game. We need the actual game manager and we need a class to display the puzzle. Both those will be discussed next time.