If you blog it they will come?

Thursday, December 24, 2009

Easy hexagonal tiles with css

I just started building an online game with appengine as a learning exercise, and I'm attempting to do so without flash, java, or any other plugin.

There's nothing to play yet, but I already have something that is generically useful: a hexagonal tile layout purely in html and css. It's pretty clean too, check it out:

The Django Template:

{% load mod %}



<link type="text/css" rel="stylesheet" href="/stylesheets/board.css">



<div id="board-container">

{% for i in rows %}

<div class="row {% if i|mod:2 %}offset{% endif %}">

{% for j in rows %}

<span class="hex">

<img src="/img/hexagon.png" />


{% endfor %}


{% endfor %}




The mod filter came from here.

All this does is create a grid of hex images (100x100 transparent pngs, edited from this source image). Every other row is "offset" so that the hex pieces nest together.

Here's the css:

#board-container {
border: solid black 5px;
width: 875px;
height: 700px;

.row {
/* This has to be .hex width * # of cols */
width: 800px;

.hex {
/* The width and height depend on the size of the hex image. */
width: 80px;
height: 65px;
border: none;
float: left;
.offset {
position: relative;
/* half of the hex width. */
left: 40px;

And the final result for a 10x10 grid:

The next step is to implement the game rules, ajax calls, and draw a sidebar with the playable pieces.

1 comment:

Chris G said...

thanks for this, did a css3 and php solution to this.


Also checkout my blog when you get a chance: http://www.infinitestudio.com.au/developer-blog/