Created
November 24, 2011 09:35
-
-
Save sli/1390968 to your computer and use it in GitHub Desktop.
Hexmap Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hexmap Test</title> | |
| </head> | |
| <body> | |
| <canvas width="500" height="500" id="board" style="border:1px solid black; padding: 1em;"></canvas> | |
| <script src="hexmap.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var board = document.getElementById('board'); | |
| var context = board.getContext('2d'); | |
| var width = board.width; | |
| var height = board.height; | |
| var circleCoord = function(theta, r, x_origin, y_origin){ | |
| // Return an array of coordinates representing a point on the edge of a | |
| //circle. | |
| return [ r * Math.cos(theta) + x_origin, r * Math.sin(theta) + y_origin ]; | |
| } | |
| var drawHex = function(x, y, r){ | |
| context.moveTo(x + r, y); | |
| var theta = 0; | |
| for (var i = 0; i <= 6; i++){ | |
| interval = 2 * Math.PI / 6; | |
| theta = theta + interval; | |
| var xy = circleCoord(theta, r, x, y); | |
| context.lineTo(xy[0],xy[1]); | |
| } | |
| context.stroke(); | |
| } | |
| var drawGrid = function() { | |
| var column, row, at, x, y; | |
| column = 1; | |
| row = 1; | |
| at = 0; | |
| context.beginPath(); | |
| while (row < height / 20) { | |
| while (column < width / 20) { | |
| x = column * 20; | |
| if (at == 0) { | |
| y = row * 20; | |
| at = 1; | |
| } else { | |
| y = (row + 1) * 20; | |
| at = 0; | |
| } | |
| if (y < height) { | |
| context.rect(x-20, y-20, 40, 40); // square | |
| } | |
| column = column + 2; | |
| } | |
| row = row + 2; | |
| column = 1; | |
| at = 0; | |
| } | |
| context.strokeStyle = '#ff0000'; | |
| context.lineWidth = 1; | |
| context.stroke(); | |
| }; | |
| var drawHexmap = function() { | |
| var column, row, at, x, y; | |
| column = 1; | |
| row = 1; | |
| at = 0; | |
| context.beginPath(); | |
| // render hexes | |
| while (row < height / 20) { | |
| while (column < width / 20) { | |
| x = column * 20; | |
| if (at == 0) { | |
| y = row * 20; | |
| at = 1; | |
| } else { | |
| y = (row + 1) * 20; | |
| at = 0; | |
| } | |
| if (y < height) { | |
| drawHex(x, y, 20); | |
| } | |
| column = column + 2; | |
| } | |
| row = row + 2; | |
| column = 1; | |
| at = 0; | |
| } | |
| context.strokeStyle = '#000000'; | |
| context.lineWidth = 1; | |
| context.stroke(); | |
| context.fillStyle = '#ffffff'; | |
| context.fill(); | |
| }; | |
| drawHexmap(); | |
| drawGrid(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment