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