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