previous

page 5

next

How does the browser 'know' the order? It keeps track in a CSS property, z‑index. Fortunately we can alter that property at any time but we'll need to keep track of the values used. I use a global variable g_z initialised to 50.
This is used in draw() as follows:

function draw() {
for (var c=1;c<9;c++) {
var ids=g_main_cols[c];
for (var i=0;i<ids.length;i++) {
var id=ids[i]; var r=i+1;
var el=document.getElementById(id);
el.style.gridRowStart=r;
el.style.gridColumnStart=c;
el.style.zIndex=g_z; g_z++;
}
}
}
Moving on

We're now ready to respond to the player clicking a card.
It's like so many previous projects:

1. if it's the first click - remember the click and highlight the card;
2. if it's the second click:

- drop the highlight;
- if it's the same as the first click,
  forget the remembered card and go to step 1;
- else process the two clicks;
- forget the remembered card and go to step 1;

We'll need a global variable g_click_card initialised to -1 for 'remembering' the first click and a highlight class.

.highlight {
outline:1vmin solid lightgreen;
}
previous
next