
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++;
}
}
}
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:
- if it's the first click - remember the click and highlight the card;
- 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;
}
outline:1vmin solid lightgreen;
}
previous
next