previous

page 8

next
Making it better

A good design principle is to make sure something always happens when a player clicks on something. At the moment, that first click ignores that principle.

So here's my plan:

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='';
}
}

Now I'm free to highlight that first click by simply creating a highlight class. This was my first attempt:

.highlight {
border:5px solid blue;
}

It's important you try this for yourself and see why it's not totally satisfactory.

previous
next