Carcassonne Board Game

Building Carcassonne Maps

This page was created for the computer geeks who want to create their own websites. It has absolutely nothing to do with the rules or strategy for playing Carcassonne, its only purpose is to document the HTML coding, background stylesheets and Java scripts used to display Tile Maps. If you are not a computer geek, you can skip this page!

The maps on this Carcassonne website are created using standard HTML Table Coding with some CSS Display Enhancements.

This is the HTML coding for the first map on this page.

And this is the CSS coding that is used to enhance the standard HTML table commands to create the Carcassonne landscapes.

/* display playing board */
table.board { border-collapse:collapse; padding:0px; border:0px; margin:5px; }
table.board th { border-collapse:collapse; padding:0px; border:0px; }
table.board td { border-collapse:collapse; padding:0px; border:0px; }

The image of each Carcassonne tile within each table cell has to touch the tiles that surround it, so all of the borders and paddings have to be set to zero. When the table is aligned left or right with the text of the page wrapping around it, we do not want the text to actually touch the tile map, so the table itself has a 5 pixel margin.

Rotating the tiles

The Base Game CCRR tile
r0x	r1x	r2x	r3x

    <td class=r3x> rotate # times
/* .r# is the tile's rotation and the x represents an existing tile */
td.r0x img.ct { width:90px; height:90px; }
td.r1x img.ct { width:90px; height:90px; transform:rotate(90deg); }
td.r2x img.ct { width:90px; height:90px; transform:rotate(180deg); }
td.r3x img.ct { width:90px; height:90px; transform:rotate(270deg); }

td.r3x img.ct Selects all <img class=ct> images inside each <td class=r3x> table cells

Making all tiles the same size

All of the Carcassonne .jpg tile images are square. Based on the source used to create them, they might be 138 x 138 pixels, 120 x 120 pixels, or 100 x 100 pixels, but the image ct class will resize all of them to 90 x 90 pixels within the Carcassonne map.

Who placed that tile

    <td class=r3r>
Changing the r3x td class to r3r highlights the background of the tile to indicate that it was placed by the Red player.
td.r0r img.ct { width:82px; height:82px; padding:4px; background:red; }
The size of the actual tile has been reduced from 90 pixels to 82 pixels allowing for a 4 pixel wide red frame around the tile.

Who is currently placing the next tile

    <td class=pr3r>
Changing the r3r td class to pr3r also rotates each tile an extra 5 degrees while highlighting the background of the tile to indicate that it was placed by the Red player.
td.pr0r img.ct { width:80px; height:80px; background:red; transform: rotate(5deg); padding:5px; }
The size of the actual tile has been reduced from 90 pixels to 80 pixels which becomes 87 by 87 when rotated 5 degrees allowing for a 5 pixel wide red frame around the tile to slightly overlap the surrounding tiles.

Placing meeples, bridges, etc. on the tiles

Placing a meeple or other object on top of a tile is a relatively complex HTML / CSS process, so let’s go through the process step by step:

The is the table <td . . . </td> coding that allows muliple images to be placed on top of each other!

• The first step is to create a <td class=r3x> to set up the rotation of the tile.
• Since this tile space will hold multiple images, the next step is to create a <div class=meeple> as a relative starting position "div.meeple { position: relative; left: 0; top: 0; }" for all of the images that are to be placed on top of each other.
• The tile's <img class=ct src=RT/TB/CCRCB.jpg> image, which will be rotated by the TD Class, is the first image that everything else will be placed on top of.
• Then we can use the HTML <img class=mp src=RT/GreenM.gif style="top:35px; left:30px;"> to resize the various overlay images and position their top left corners properly on the tile.
  NOTE: Multiple meeples and other objects can be stacked on the same tile.
• Finially, </div></td> closes the multi layer image and the table cell.

This is the final coding for the table with two tiles.

Bridge Transformer
	<img class=fbh src=RT/FakeBridge.gif style="top:37px; left:0px;">
Gate and Wall Transformers
	<img class=fbv src=RT/FakeBridge.gif style="top:0px; left:78px;">
Meeple
	<img class=mp src=rt/YellowM.gif style="top:30px; left:15px;">
Farmer
	<img class=mp src=rt/YellowF.gif style="top:30px; left:15px;">
A barn is a very special meeple. It is not placed on a single tile. It is placed on the corner of 4 adjacent tiles. Since the tiles themselves are non-transparent solid objects, the barn has to be placed on the lower right tile with the "absolute" corner of the bard set as style="top:-20px; left:-25px;" Barn
	<img class=mpb src=RT/RedBn.gif style="top:-20px; left:-25px;">
The Castle is placed on the edges of two adjacent tile, AND, then a Meeple is placed on top of that! Castle
	<img class=cs src=RT/bz/Castle.gif style="top:-33px; left:8px;"> <img class=mp src=RT/RedM.gif style="top:-15px; left:30px;">
	<img class=cs src=RT/bz/Castle.gif style="top:12px; left:-40px; transform:rotate(270deg);> <img class=mp src=RT/RedM.gif style="top:30px; left:-15px;>