
previous

page 12
next
The finishing touches
We already have a finished function - let's use it.
function piece_clicked(el) {
if (g_piece=='') {
g_piece=el;
g_piece.classList.add('highlight');
} else if (g_piece==el) {
g_piece.classList.remove('highlight');
g_piece='';
} else {
// swap
var r=el.style.gridRowStart;
var c=el.style.gridColumnStart;
el.style.gridRowStart= g_piece.style.gridRowStart;
el.style.gridColumnStart= g_piece.style.gridColumnStart;
g_piece.style.gridRowStart=r;
g_piece.style.gridColumnStart=c;
g_piece.classList.remove('highlight');
g_piece='';
if (finished()) finale();
}
}
if (g_piece=='') {
g_piece=el;
g_piece.classList.add('highlight');
} else if (g_piece==el) {
g_piece.classList.remove('highlight');
g_piece='';
} else {
// swap
var r=el.style.gridRowStart;
var c=el.style.gridColumnStart;
el.style.gridRowStart= g_piece.style.gridRowStart;
el.style.gridColumnStart= g_piece.style.gridColumnStart;
g_piece.style.gridRowStart=r;
g_piece.style.gridColumnStart=c;
g_piece.classList.remove('highlight');
g_piece='';
if (finished()) finale();
}
}
For the finale I plan to simply remove the grid. A neat way to do this is to have the full picture stored behind the pieces and then simply hide the piece class.
I found that I needed to hide this picture otherwise it grabs the clicks!
You should be able to manage this all by yourself before checking the next page.
previous
next