previous

page 9

next
An alternative to border

CSS offers an alternative to border. It's called outline. It has the advantage that it can be drawn inside an item by using a negative offset. Try this:

.highlight {
outline:5px solid blue;
outline-offset:-5px;
}

Well we have playable game - it's just a matter of changing a few numbers to move on to the planned 30 piece jigsaw.

But before we do, let's think about how to tell when a player has finished - in other words has all the pieces in their right place. See what you can come up with.

my finished.js
function finished() {
var id=0;
for (var r=1;r<3;r++) {
for (var c=1;c<3;c++) {
var el=document.getElementById(id);
if (el.style.gridRowStart!=r) return false;
if (el.style.gridColumnStart!=c) return false;
id++;
}
}
return true;
}
previous
next