document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>
  5.             HTML5 Test Hex Map?
  6.         </title>
  7.         <script type="text/javascript">
  8.        
  9.         function intersects(x, y, cx, cy, r) {
  10.             dx = x-cx;
  11.             dy = y-cy;
  12.             return dx*dx+dy*dy <= r*r;
  13.         }
  14.        
  15.         function mouseClick(e){
  16.             stateArray[(lastx+(lasty*board_x_cols))] = 1;
  17.             draw_map();
  18.         }
  19.        
  20.         function mouseMove(e)
  21.         {
  22.             var mouseX=0, mouseY=0;
  23.  
  24.             if(e.offsetX) {
  25.                 mouseX = e.offsetX;
  26.                 mouseY = e.offsetY;
  27.             }
  28.             else if(e.layerX) {
  29.                 mouseX = e.layerX;
  30.                 mouseY = e.layerY;
  31.             }
  32.  
  33.             /* do something with mouseX/mouseY */
  34.             coords.innerHTML = mouseX+", "+mouseY;
  35.             for (loop_col = 0; loop_col < viewport_x_cols+2; loop_col++) {
  36.                 for (loop_row = 0; loop_row < viewport_y_rows+2; loop_row++) {
  37.                     var center_x;
  38.                     var center_y;
  39.                     mySpace = get_real_space(loop_col,loop_row);
  40.                     if (loop_row%2==1) {
  41.                         center_x = loop_col*(2*r)+r;
  42.                         center_y = loop_row*o;
  43.                     } else {
  44.                         center_x = loop_col*(2*r);
  45.                         center_y = loop_row*o;
  46.                     }
  47.                    
  48.                 if (intersects(mouseX,mouseY,center_x,center_y, r)) {
  49.                         data.innerHTML = "("+mySpace.x+","+mySpace.y+")";
  50.                         lastx = mySpace.x;
  51.                         lasty = mySpace.y;
  52.                     }
  53.                 }
  54.             }
  55.         }      
  56.        
  57.         function get_real_space(col,row) {
  58.             //current_cell_x
  59.             //current_cell_y
  60.             var return_object = new Object();
  61.             var offset = ((row-row%2)/2);
  62.             return_object.x = col-offset;
  63.             return_object.y = row-1;
  64.             return_object.x = return_object.x + current_cell_x;
  65.             return_object.y = return_object.y + current_cell_y;
  66.             while (return_object.x < 0) {
  67.                 return_object.x = return_object.x + board_x_cols;
  68.             }
  69.             while (return_object.y < 0) {
  70.                 return_object.y = return_object.y + board_y_rows;
  71.             }
  72.             while (return_object.x >= board_x_cols) {
  73.                 return_object.x = return_object.x - board_x_cols;
  74.             }
  75.             while (return_object.y >= board_y_rows) {
  76.                 return_object.y = return_object.y - board_y_rows;
  77.             }
  78.             return_object.s = stateArray[return_object.y*board_x_cols+return_object.x];
  79.             return return_object;
  80.         }
  81.  
  82.         function draw_map() {
  83.             for (loop_col = 0; loop_col < viewport_x_cols+2; loop_col++) {
  84.                 for (loop_row = 0; loop_row < viewport_y_rows+2; loop_row++) {
  85.                     var center_x;
  86.                     var center_y;
  87.                     mySpace = get_real_space(loop_col,loop_row);
  88.                     cxt.fillStyle="#FF0000";
  89.                     coordText = "("+mySpace.x+","+mySpace.y+")";
  90.                     cxt.font=fs+"pt Calibri";
  91.                     metrics = cxt.measureText(coordText)
  92.                     wo = Math.floor(metrics.width/2);
  93.                    
  94.                     if (loop_row%2==1) {
  95.                         center_x = loop_col*(2*r)+r;
  96.                         center_y = loop_row*o;
  97.                     } else {
  98.                         center_x = loop_col*(2*r);
  99.                         center_y = loop_row*o;
  100.                     }
  101.                    
  102.                     if (mySpace.s == 0) {
  103.                         cxt.lineWidth = 3;
  104.                         cxt.beginPath();
  105.                         cxt.moveTo(center_x, center_y-(1.15*r));
  106.                         cxt.lineTo(center_x+(0.95*r), center_y-(0.55*r));
  107.                         cxt.lineTo(center_x+(0.95*r), center_y+(0.55*r));
  108.                         cxt.lineTo(center_x, center_y+(1.15*r));
  109.                         cxt.lineTo(center_x-(0.95*r), center_y+(0.55*r));
  110.                         cxt.lineTo(center_x-(0.95*r), center_y-(0.55*r));
  111.                         cxt.closePath();
  112.                         cxt.strokeStyle = \'#00F\';
  113.                         cxt.stroke();
  114.                         cxt.fillStyle = \'#000\';
  115.                         cxt.fill();
  116.                     } else {
  117.                         cxt.lineWidth = 3;
  118.                         cxt.beginPath();
  119.                         cxt.moveTo(center_x, center_y-(1.15*r));
  120.                         cxt.lineTo(center_x+(0.95*r), center_y-(0.55*r));
  121.                         cxt.lineTo(center_x+(0.95*r), center_y+(0.55*r));
  122.                         cxt.lineTo(center_x, center_y+(1.15*r));
  123.                         cxt.lineTo(center_x-(0.95*r), center_y+(0.55*r));
  124.                         cxt.lineTo(center_x-(0.95*r), center_y-(0.55*r));
  125.                         cxt.closePath();
  126.                         cxt.strokeStyle = \'#00F\';
  127.                         cxt.stroke();
  128.                         cxt.fillStyle = \'#00F\';
  129.                         cxt.fill();
  130.                     }
  131.                     cxt.fillStyle = \'#0F0\';
  132.                     cxt.fillText(coordText, center_x-wo, center_y+ho);
  133.                    
  134.  
  135.                    
  136.                 }
  137.             }
  138.         }
  139.         //DISPLAY VARIABLES
  140.         var myCanvas; // cavas
  141.         var cxt; // canvas.context
  142.         var r; // radius of spaces
  143.         var o; // row offset (how much we move down each draw)
  144.         var fs; // font size
  145.         var ho; // vertical font offset
  146.         var viewport_x_cols;
  147.         var viewport_y_rows;
  148.         var current_cell_x;
  149.         var current_cell_y;
  150.         //BOARD VARIABLES
  151.         var board_x_cols;
  152.         var board_y_rows;
  153.         var lastx;
  154.         var lasty;
  155.         var stateArray = new Array();
  156.         function get10x10StateArray() {
  157.             return [0,0,0,0,0,0,0,0,0,0,
  158.             0,0,0,0,0,0,0,0,0,0,
  159.             0,0,0,0,0,0,0,0,0,0,
  160.             0,0,0,0,0,0,0,0,0,0,
  161.             0,0,0,0,0,0,0,0,0,0,
  162.             0,0,0,0,0,0,0,0,0,0,
  163.             0,0,0,0,0,0,0,0,0,0,
  164.             0,0,0,0,0,0,0,0,0,0,
  165.             0,0,0,0,0,0,0,0,0,0,
  166.             0,0,0,0,0,0,0,0,0,0];
  167.         }
  168.         function init() {
  169.        
  170.             //INTERFACE STUFF (much of this will likely be gotten from an external gamestate request to a server)
  171.             coords=document.getElementById("coords");
  172.             data=document.getElementById("data");
  173.             myCanvas=document.getElementById("myCanvas");
  174.             myCanvas.onmousemove=mouseMove;
  175.             myCanvas.onclick=mouseClick;
  176.             r=25; // radius of spaces
  177.             o=Math.floor(r*Math.sqrt(3)); // row offset (how much we move down each draw)
  178.             fs=10; // font size
  179.             ho = Math.floor(fs/2); // vertical font offset
  180.             viewport_x_cols = 10;
  181.             viewport_y_rows = 10;
  182.            
  183.             myCanvas.width = (viewport_x_cols+0.5)*(2*r);
  184.             myCanvas.height = (viewport_y_rows+0.5)*o;
  185.             cxt=myCanvas.getContext("2d");
  186.            
  187.             lastx=0;
  188.             lasty=0;
  189.            
  190.             //BOARD VARIABLES
  191.             board_x_cols = 10;
  192.             board_y_rows = 10;
  193.             stateArray = get10x10StateArray();
  194.             current_cell_x = 0;
  195.             current_cell_y = 0;
  196.            
  197.             //START GAME LOGIC
  198.            
  199.             draw_map();
  200.         }
  201.         window.onload = init;
  202.         </script>
  203.  
  204.     </head>
  205.     <body>
  206.         <canvas id="myCanvas" width="800" height="800" style="position: relative; border:1px solid #000000; float:left;" >Canvas Element Not Supported.</canvas>
  207.         <span id="coords">NOTHING</span><br />
  208.         <span id="data">NOTHING</span>
  209.         <img id="testimg" /><br />
  210.         <div>
  211.         <center>
  212.         <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 />
  213.         <button type="button" onclick="current_cell_x--;draw_map();">W</button>&nbsp;&nbsp;O&nbsp;&nbsp;</button><button type="button" onclick="current_cell_x++;draw_map();">E</button><br />
  214.         <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>
  215.     </body>
  216. </html>
');