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.
Posts
1 comment:
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/
Post a Comment