<!DOCTYPE HTML>
<html>
<head>
<title>
HTML5 Test Hex Map?
</title>
<script type="text/javascript">
function intersects(x, y, cx, cy, r) {
dx = x-cx;
dy = y-cy;
return dx*dx+dy*dy <= r*r;
}
function mouseClick(e){
stateArray[(lastx+(lasty*board_x_cols))] = 1;
draw_map();
}
function mouseMove(e)
{
var mouseX=0, mouseY=0;
if(e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
/* do something with mouseX/mouseY */
coords.innerHTML = mouseX+", "+mouseY;
for (loop_col = 0; loop_col < viewport_x_cols+2; loop_col++) {
for (loop_row = 0; loop_row < viewport_y_rows+2; loop_row++) {
var center_x;
var center_y;
mySpace = get_real_space(loop_col,loop_row);
if (loop_row%2==1) {
center_x = loop_col*(2*r)+r;
center_y = loop_row*o;
} else {
center_x = loop_col*(2*r);
center_y = loop_row*o;
}
if (intersects(mouseX,mouseY,center_x,center_y, r)) {
data.innerHTML = "("+mySpace.x+","+mySpace.y+")";
lastx = mySpace.x;
lasty = mySpace.y;
}
}
}
}
function get_real_space(col,row) {
//current_cell_x
//current_cell_y
var return_object = new Object();
var offset = ((row-row%2)/2);
return_object.x = col-offset;
return_object.y = row-1;
return_object.x = return_object.x + current_cell_x;
return_object.y = return_object.y + current_cell_y;
while (return_object.x < 0) {
return_object.x = return_object.x + board_x_cols;
}
while (return_object.y < 0) {
return_object.y = return_object.y + board_y_rows;
}
while (return_object.x >= board_x_cols) {
return_object.x = return_object.x - board_x_cols;
}
while (return_object.y >= board_y_rows) {
return_object.y = return_object.y - board_y_rows;
}
return_object.s = stateArray[return_object.y*board_x_cols+return_object.x];
return return_object;
}
function draw_map() {
for (loop_col = 0; loop_col < viewport_x_cols+2; loop_col++) {
for (loop_row = 0; loop_row < viewport_y_rows+2; loop_row++) {
var center_x;
var center_y;
mySpace = get_real_space(loop_col,loop_row);
cxt.fillStyle="#FF0000";
coordText = "("+mySpace.x+","+mySpace.y+")";
cxt.font=fs+"pt Calibri";
metrics = cxt.measureText(coordText)
wo = Math.floor(metrics.width/2);
if (loop_row%2==1) {
center_x = loop_col*(2*r)+r;
center_y = loop_row*o;
} else {
center_x = loop_col*(2*r);
center_y = loop_row*o;
}
if (mySpace.s == 0) {
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(center_x, center_y-(1.15*r));
cxt.lineTo(center_x+(0.95*r), center_y-(0.55*r));
cxt.lineTo(center_x+(0.95*r), center_y+(0.55*r));
cxt.lineTo(center_x, center_y+(1.15*r));
cxt.lineTo(center_x-(0.95*r), center_y+(0.55*r));
cxt.lineTo(center_x-(0.95*r), center_y-(0.55*r));
cxt.closePath();
cxt.strokeStyle = \'#00F\';
cxt.stroke();
cxt.fillStyle = \'#000\';
cxt.fill();
} else {
cxt.lineWidth = 3;
cxt.beginPath();
cxt.moveTo(center_x, center_y-(1.15*r));
cxt.lineTo(center_x+(0.95*r), center_y-(0.55*r));
cxt.lineTo(center_x+(0.95*r), center_y+(0.55*r));
cxt.lineTo(center_x, center_y+(1.15*r));
cxt.lineTo(center_x-(0.95*r), center_y+(0.55*r));
cxt.lineTo(center_x-(0.95*r), center_y-(0.55*r));
cxt.closePath();
cxt.strokeStyle = \'#00F\';
cxt.stroke();
cxt.fillStyle = \'#00F\';
cxt.fill();
}
cxt.fillStyle = \'#0F0\';
cxt.fillText(coordText, center_x-wo, center_y+ho);
}
}
}
//DISPLAY VARIABLES
var myCanvas; // cavas
var cxt; // canvas.context
var r; // radius of spaces
var o; // row offset (how much we move down each draw)
var fs; // font size
var ho; // vertical font offset
var viewport_x_cols;
var viewport_y_rows;
var current_cell_x;
var current_cell_y;
//BOARD VARIABLES
var board_x_cols;
var board_y_rows;
var lastx;
var lasty;
var stateArray = new Array();
function get10x10StateArray() {
return [0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0];
}
function init() {
//INTERFACE STUFF (much of this will likely be gotten from an external gamestate request to a server)
coords=document.getElementById("coords");
data=document.getElementById("data");
myCanvas=document.getElementById("myCanvas");
myCanvas.onmousemove=mouseMove;
myCanvas.onclick=mouseClick;
r=25; // radius of spaces
o=Math.floor(r*Math.sqrt(3)); // row offset (how much we move down each draw)
fs=10; // font size
ho = Math.floor(fs/2); // vertical font offset
viewport_x_cols = 10;
viewport_y_rows = 10;
myCanvas.width = (viewport_x_cols+0.5)*(2*r);
myCanvas.height = (viewport_y_rows+0.5)*o;
cxt=myCanvas.getContext("2d");
lastx=0;
lasty=0;
//BOARD VARIABLES
board_x_cols = 10;
board_y_rows = 10;
stateArray = get10x10StateArray();
current_cell_x = 0;
current_cell_y = 0;
//START GAME LOGIC
draw_map();
}
window.onload = init;
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="position: relative; border:1px solid #000000; float:left;" >Canvas Element Not Supported.</canvas>
<span id="coords">NOTHING</span><br />
<span id="data">NOTHING</span>
<img id="testimg" /><br />
<div>
<center>
<button type="button" onclick="current_cell_y--;draw_map();">NW</button><button type="button" onclick="current_cell_x++;current_cell_y--;draw_map();">NE</button><br />
<button type="button" onclick="current_cell_x--;draw_map();">W</button> O </button><button type="button" onclick="current_cell_x++;draw_map();">E</button><br />
<button type="button" onclick="current_cell_x--;current_cell_y++;draw_map();">SW</button><button type="button" onclick="current_cell_y++;draw_map();">SE</button></center></div>
</body>
</html>