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 %}

<html>


<head>


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


</head>


<body>


<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" />


</span>


{% endfor %}


</div>


{% endfor %}


</div>


</body>


</html>




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.

http://bpaste.net/show/25962/

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