Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    124
    Thanks
    0
    Thanked 3 Times in 3 Posts

    clickable grid on top of canvas

    Ok, so lets say I'm trying to make a game that can be played on phone or computer. To do this I'm just going to use mousedown.

    I'm creating a canvas, and then a <div> tag that will act as a grid over the canvas. I create an array like so,

    var grid = [
    '0000',
    '0000',
    '0000'
    ];

    Now I programed the grid array to populate in the div tag sitting on top of the canvas. What happens on the canvas depends on which grid box is clicked. How can I detect which grid box is clicked? I know it's probably using "this" but I seem to have trouble using that. I DON'T WANT A JQUERY SOLUTION. After I do that, how can i find the position that that specific grid box is in? meaning the css left and top.

    thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I understand everything said and asked except what the meaning of your grid array is.

    Is that supposed to mean that the overlay <div> is divided into 3 rows of 4 columns each?

    If so, are you wanting the JS code to automatically calculate the size of each cell in the grid?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    124
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Old Pedant View Post
    I understand everything said and asked except what the meaning of your grid array is.

    Is that supposed to mean that the overlay <div> is divided into 3 rows of 4 columns each?

    If so, are you wanting the JS code to automatically calculate the size of each cell in the grid?
    You think to litereally. The code I put was just an example. All i want to know is how to detect which div i clicked on. and what it's position it is on the screen

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Ummm...you only mentioned *ONE* <div>.
    a <div> tag that will act as a grid over the canvas
    So you are saying you just want to know where IN THAT ONE <div> that the user clicked?

    Then what in the heck was the purpose of showing that useless dummy array??? If I think too literally, you write too irrelevant?

    Not hard, but if you want to worry about older MSIE you have to write one very tiny line of conditional code.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #overlay {
        position: relative;
        height: 550px;
        width: 730px;
        border: solid blue 3px;
        background-color: lightblue;
        margin-left: 120px;
    }
    </style>
    </head>
    <body>
    Stuff.<br/>
    Stuff.<br/>
    <br/>
    <div id="overlay"></div>
    
    <script type="text/javascript">
    (
      function()
      {
          var div = document.getElementById("overlay");
          div.onclick = showWhere;
    
          function showWhere( evt )
          {
              if ( evt == null ) evt = window.event; // handle older MSIE
              // find where the click occurred
              var x = evt.clientX;
              var y = evt.clientY;
              // but those are absolute on the screen
              // we need to find them relative to the div
              var node = div;
              while ( node != null )
              {
                  x -= node.offsetLeft;
                  y -= node.offsetTop;
                  node = node.offsetParent;
              }
              alert("You clicked at x=" + x + ", y=" + y + " within the div");
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    p.s.: You could instead use the computedStyle (again, you have to write browser-dependent code) to get the top left corner of the <div>. Google for "computedStyle" if you care.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Jun 2010
    Posts
    124
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Sorry Old, no one is quite as smart as you, that's why we are here. fyi, i wanted the array to build tiles of dives which would be clickable. duh

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Quote Originally Posted by pdiddles03 View Post
    i wanted the array to build tiles of dives which would be clickable.
    Ummm...that's what I thought, in the first place. That's why I wrote:
    Is that supposed to mean that the overlay <div> is divided into 3 rows of 4 columns each?
    If so, are you wanting the JS code to automatically calculate the size of each cell in the grid?
    That's exactly what I thought you wanted to do, with the array controlling how *MANY* tiles were created.

    We can do that, still, if that's what you would prefer. Not hard at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Jun 2010
    Posts
    124
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Hmmm, for a master coder you're not good at helping. Again, not everyone is as experienced as you are, and does not know the best solution to things, that is why we come here. Not to be talked down to. Thanks

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I give up. I *WAS* just trying to find out what you were after. Trying to give you an answer to fit your needs. I gave you one answer but it didn't seem to be what you wanted. So I tried again. But I *still* don't know what you were asking for.

    If it is "talking down to" to ask for more information, then I won't do so with you any more. I just won't talk to you and that will solve everything.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts

    An exemple with a grid

    With a table. It's easy to find the clicked cells and ids which can give row and column.

    See this grid
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Jeu enregistré</title>
    <style type="text/css">
    #pge {width:600px;margin:0 auto;}
    p{text-align:center;font-size:large;}
    table,td {margin:30px auto;border:1px solid black;border-collapse:collapse}
    .clr {background-color:#008001}
    .grs {background-color:#eee}
    </style>
    </head>
    <body>
    <p>Click on a cell to move the green cell</p>
    <div id="pge"></div>
    
    <script type="text/javascript">
    // dmf is a fictionnal dimension to avoid edge effects
    var dim=5,nmc=dim*dim,dmf=dim+2;
    
    // Build a tableau dimxdim with nmc cells
    var ctb='<table border="1" id="tbl">';
    for (var i=0;i<nmc;i++) {j=Math.floor(i/dim)*dmf+i%dim+1;
    	if (i%dim==0) ctb+='<tr height="50">';// new line
    	ctb+='<td width="50" id="t'+j+'">'+j+'</td>';// nouvelle cellule
    	if (i%dim==dim-1) ctb+='</tr>';// fin de ligne
    }
    document.getElementById('pge').innerHTML=ctb+'</table>';
    // to add value for adjacent cells
    vsn=[-1-dmf,-dmf,1-dmf,-1,1,dmf-1,dmf,dmf-(-1)]; 
    
    // initial green cell and a string of moves
    var csV=8,chC='';
    vrt(csV,true);
    
    // click event to replace 
    document.getElementById('tbl').onclick=dpl;
    
    // we find the cliked cell with its id
    function dpl(e){var i,j,t=e?e.target:window.event.srcElement,n;
    	if (t.id.substr(0,1)!='t')	return; 
    	// its number
    	n=parseInt(t.id.substr(1)); 
    	// Loop on adjacent cases
    	for (i=0;i<vsn.length;i++) {j=n-vsn[i];
    		// to avoid false cells 
    		if (!document.getElementById('t'+j)) continue;
    		if (j==csV) {// we move
    		   vrt(csV,false);vrt(n,true);csV=n;chC+=','+n;return}}
    	alert("Illégal move");
    	return false;
    }
    function vrt(c,o){var i,f=o?'grs':'';
      document.getElementById('t'+c).className=o?'clr':'';
    	for (i=0;i<vsn.length;i++) {j=c-vsn[i];
    	  if (!document.getElementById('t'+j)) continue;
    	  document.getElementById('t'+j).className=f;}
    }
    </script>
    </body>
    </html>
    Last edited by 007julien; 01-02-2013 at 11:33 PM.

  • #11
    Regular Coder
    Join Date
    Jun 2010
    Posts
    124
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Old Pedant View Post
    I give up. I *WAS* just trying to find out what you were after. Trying to give you an answer to fit your needs. I gave you one answer but it didn't seem to be what you wanted. So I tried again. But I *still* don't know what you were asking for.

    If it is "talking down to" to ask for more information, then I won't do so with you any more. I just won't talk to you and that will solve everything.
    I give up with you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •