previous

page 1

next
XXX

I was keen to find a two player game for this tutorial, one where the player plays against the computer.

I thought of Noughts and Crosses (Tic-Tac-Toe) but, as you know, this is a boring game which usually ends in a draw.

Then I came across this neat idea: check it out here.

the grid

You should be able to easily make a 3 x 3 grid by now but how to get rid of the outer border?

My styles.css will show you one way:

styles.css
body {
background-color: linen;
}
#grid {
width:54vmin;
height:54vmin;
outline:1vmin solid linen;
outline-offset:-1vmin;
}
.row {
display:flex;
}
.square {
width:18vmin;
height:18vmin;
outline:1vmin solid grey;
outline-offset:-1vmin;
display:flex;
justify-content: center;
align-items: center;
font-size:15vmin;
font-family:arial;
font-weight:bold;
color:blue;
background-color: linen;
}
previous
next