hexgrid/index-css.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   6     <link rel="stylesheet" href="../style/pixelless.css" type="text/css"/>
   7         <link rel="stylesheet" href="style/triangles.css" type="text/css"/>
   8     <script type="text/javascript" src="../script/util.js"></script>
   9     <title>Triangular grid</title>
  10 </head>
  11 <body>
  12 <div id="container">
  13     <div class="content header">
  14         <h1>Triangular grid</h1>
  15     </div>
  16
  17     <div class="content">
  18         <div id="map" class="hex">
  19                 </div>
  20         <div class="empty_footer">
  21         </div>
  22     </div>
  23 </div>
  24 <div id="footer">
  25     <div class="content">
  26         &copy; Copyright
  27     </div>
  28 </div>
  29 <script type="text/javascript" language="JavaScript">
  30     if(!('console' in this))console = {log:function(){}}
  31
  32         function HexGrid(w,h,id)
  33         {
  34                 var div = document.getElementById(id);
  35
  36                 var row = '<div>'+(new Array(w+1)).join('<u></u>')+'</div>'
  37                 div.innerHTML = (new Array(h+1)).join(row);
  38
  39                 var x=0, y=0;
  40                 var draw = false;
  41
  42                 return {
  43
  44                         activate: function(i, j)
  45                         {
  46                                 if(!draw)
  47                                         div.children[y].children[x].className = '';
  48
  49                                 y=i;
  50                                 x=j
  51
  52                                 div.children[y].children[x].className = 'active';
  53                         },
  54
  55                         toggledraw: function()
  56                         {
  57                                 console.log('yo');
  58                                 draw = !draw;
  59                         }
  60                 }
  61         }
  62
  63         var w=75;
  64         var h=36;
  65         var grid = new HexGrid(w, h, 'map');
  66
  67
  68         var x=  10;
  69         var y= 10;
  70         grid.activate(x, y);
  71
  72
  73         window.onkeydown = function(e)
  74         {
  75                 switch(e.keyCode)
  76                 {
  77                 case 37:--y;break;
  78                 case 38:--x;break;
  79                 case 39:++y;break;
  80                 case 40:++x;break;
  81                 case 13:grid.toggledraw();break;
  82                 default:console.log(e);break;
  83                 }
  84
  85                 grid.activate(x, y);
  86         }
  87
  88
  89
  90 </script>
  91 </body>
  92 </html>