Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement