
previous

page 3
next
and here's my styles.css:
.row {
display:flex;
}
.square {
width:7.2vmin;
height:7.2vmin;
border:.2vmin solid;
}
display:flex;
}
.square {
width:7.2vmin;
height:7.2vmin;
border:.2vmin solid;
}
and, finally, my squares.js:
function squares() {
var s1="<img src='images/0.png' class='square' id='";
var id=0;
var s2="' onClick='square_clicked(this);' a='7' v='0'>";
for (var r=0; r<10; r++) {
document.write("<div class='row'>");
for (var c=0; c<10; c++) {
document.write(s1+id+s2);
id++;
}
document.write('</div>');
}
document.write('</div>');
}
var s1="<img src='images/0.png' class='square' id='";
var id=0;
var s2="' onClick='square_clicked(this);' a='7' v='0'>";
for (var r=0; r<10; r++) {
document.write("<div class='row'>");
for (var c=0; c<10; c++) {
document.write(s1+id+s2);
id++;
}
document.write('</div>');
}
document.write('</div>');
}

Now we have to figure out how to spread the 8 ships across the grid so that all ships are no closer to each other than one square and no closer to the border either.
This won't be easy but I think I've come up with a reasonable approach.
previous
next