Board Game Arena

My game Lazo uses tiles which stack on top of each other like cannonballs. In the lowest layer, the tiles fit together like a grid of regular hexagons. Three mutually adjacent tiles either share a common vertex, or else there is a gap, a hole formed between the three tiles, which a new tile can be placed on top of to be part of the next layer. I want to display a perspective-less overhead view of the game. I can think of two ways to go about this.

• I could use images of complete tiles with transparent backgrounds, and stack layer upon layer of images. There might be four or five layers in an actual game. Would the Zone component and CSS sprites allow this?
  
  I could use rectangular (nearly square) non-overlapping images which are positioned like a wall of bricks. When a user clicks on a hole where a tile may be placed, the center of the tile (which is pure black or pure white) is placed in that brick, and then there is a cascade effect, where the images for the six surrounding bricks are changed to display the entire tile. I would need over 200 brick-sized images to display all possible combinations. I could combine all these images into a single sprite. This would be a lot of work, but the good news is, I have done this before, for my module "Loop Game" (essentially the same game) for the Windows app Zillions of Games. So, doing it again might not be so bad.

Which way would you recommend for me? Is there another option? Thanks very much for any clue. I apologize for asking what is essentially a programming question.

David

I'm new here, but I'd guess that css sprites in a zone with a Z index would be appropriate for this.

I'd advise for the first option, as the second makes debugging more difficult. Actually, I don't see the benefits of the second solution, as you wouldn't be able to animate a tile placement.
In all cases, do try to keep the total size of visuals below 10MB (maybe separate tiles and their shadows).