Advertisement
Cedri

Hexfield HTML

Apr 19th, 2019
205
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.56 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <title>Simple jQuery Hex Grid widget for game prototyping</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <meta name="keywords" content="jquery opensource hexgrid hex grid" />
  9.     <meta name="description" content="A simple jQuery Hex grid Widget, implemented using SVG, for prototyping hex-grid based games." />
  10.     <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  11.     <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
  12.         <link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
  13.         <script src="https://code.jquery.com/jquery-2.1.4.min.js" ></script>
  14.     <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  15.  
  16. <script src="hexgridwidget.js" ></script>
  17.        
  18.         <style type="text/css">
  19. svg {}
  20. .hexfield {
  21.   fill: transparent;
  22.   stroke: green;
  23.   stroke-width: 1;
  24. }
  25. .hexfield:focus {
  26.   outline:none;
  27. }
  28. .hexfield:hover {
  29.   fill: blue;
  30. }
  31. .hexfield:active {
  32.   fill: red;
  33.   outline: none;
  34. }
  35. .hexfield.clicked{
  36.   fill: black;
  37. }
  38. body {
  39.   background-image: url("https://i.imgur.com/7D14Jol.jpg");
  40.     background-size:     cover;                      /* <------ */
  41.    background-repeat:   no-repeat;
  42.  }
  43.  h1 {
  44.  background-image: url("https://i.imgur.com/7D14Jol.jpg");
  45.    background-size:     cover;                      /* <------ */
  46.    background-repeat:   no-repeat;
  47.  }
  48.  p {
  49.  background-color: white;
  50.  background-color: rgba(255, 255, 255, .85);
  51.  }
  52. .container {
  53.    min-height: 12000px;
  54.    width: 8551px;
  55.    overflow: auto;
  56.    padding-left: 1090px;
  57.     padding-top: 1005px;
  58. }
  59.  
  60. </style>
  61.   </head>
  62. <body>
  63.  
  64. <form class="form-horizontal" onsubmit="return false;">
  65. <div class="container">
  66.     <div class="left">
  67.         <div id="container">
  68.         </div>
  69.     </div>
  70. </form>
  71.  
  72. <script>
  73. <!-- main initialisation -->
  74. var rebuild = function () {
  75.   var
  76.     radius = 83.20,
  77.     columns = 60,
  78.     rows = 60,
  79.     cssClass = 'hexfield';
  80.  
  81.   $('#container').empty().hexGridWidget(radius, columns, rows, cssClass).on('hexclick', function (e) {
  82.      $('#logger').text('clicked [' + e.column + ',' + e.row + '] hex with center at [' + e.center.x + ',' + e.center.y + '] px');
  83.   });
  84.   $('#container .hexfield').click(function () {
  85.     this.classList.toggle('clicked');
  86.   });
  87. };
  88. rebuild();
  89. </script>
  90.   </body>
  91. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement