CodingForums.com - clickable grid on top of canvas

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - clickable grid on top of canvas (http://www.codingforums.com/showthread.php?t=285081)

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

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?

Quote:

Originally Posted by Old Pedant (Post 1303290)

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

Ummm...you only mentioned *ONE* <div>.

Quote:

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>

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.

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

Quote:

Originally Posted by pdiddles03 (Post 1303339)

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:

Quote:

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.

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 :)

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 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>

Quote:

Originally Posted by Old Pedant (Post 1303658)

I give up with you