
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='';
}
}
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;
}
border:5px solid blue;
}
It's important you try this for yourself and see why it's not totally satisfactory.
previous
next