Tic Tac Toe is a classic game that has been enjoyed by people of all ages for decades. It’s a game that requires strategic thinking and planning ahead to win. With the rise of web development, creating a Tic Tac Toe game using HTML and CSS has become a popular project for beginners and seasoned developers alike. Not only is it a fun and interactive way to showcase your coding skills, but it also allows you to delve into the fundamentals of web development. In this blog post, we’ll take you through the step-by-step process of creating a Tic Tac Toe game using HTML and CSS only. Whether you’re a beginner or an experienced developer looking to brush up on your skills, this guide is sure to help you build a functional and stylish Tic Tac Toe game that you can proudly show off to your friends and family.
Before we start here are some more games you might like to create using css only –
- Neomorphic Tic Tac Toe Game using HTML and CSS Only
- Whac a mole game using HTML and CSS Only
- Plankman Game using HTML and CSS Only
- Rock Paper Scissor Game using HTML and CSS Only
- Carnival Target Practice Game using HTML and CSS Only
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Tic Tac Toe Game using HTML and CSS Only - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
<form id="tictactoe">
<input type="radio" name="cell-0" id="cell-0-x" />
<input type="radio" name="cell-0" id="cell-0-o" />
<input type="radio" name="cell-1" id="cell-1-x" />
<input type="radio" name="cell-1" id="cell-1-o" />
<input type="radio" name="cell-2" id="cell-2-x" />
<input type="radio" name="cell-2" id="cell-2-o" />
<input type="radio" name="cell-3" id="cell-3-x" />
<input type="radio" name="cell-3" id="cell-3-o" />
<input type="radio" name="cell-4" id="cell-4-x" />
<input type="radio" name="cell-4" id="cell-4-o" />
<input type="radio" name="cell-5" id="cell-5-x" />
<input type="radio" name="cell-5" id="cell-5-o" />
<input type="radio" name="cell-6" id="cell-6-x" />
<input type="radio" name="cell-6" id="cell-6-o" />
<input type="radio" name="cell-7" id="cell-7-x" />
<input type="radio" name="cell-7" id="cell-7-o" />
<input type="radio" name="cell-8" id="cell-8-x" />
<input type="radio" name="cell-8" id="cell-8-o" />
<div id="board" class="center">
<div class="tile" id="tile-0">
<label for="cell-0-x"></label>
<label for="cell-0-o"></label>
<div></div>
</div>
<div class="tile" id="tile-1">
<label for="cell-1-x"></label>
<label for="cell-1-o"></label>
<div></div>
</div>
<div class="tile" id="tile-2">
<label for="cell-2-x"></label>
<label for="cell-2-o"></label>
<div></div>
</div>
<div class="tile" id="tile-3">
<label for="cell-3-x"></label>
<label for="cell-3-o"></label>
<div></div>
</div>
<div class="tile" id="tile-4">
<label for="cell-4-x"></label>
<label for="cell-4-o"></label>
<div></div>
</div>
<div class="tile" id="tile-5">
<label for="cell-5-x"></label>
<label for="cell-5-o"></label>
<div></div>
</div>
<div class="tile" id="tile-6">
<label for="cell-6-x"></label>
<label for="cell-6-o"></label>
<div></div>
</div>
<div class="tile" id="tile-7">
<label for="cell-7-x"></label>
<label for="cell-7-o"></label>
<div></div>
</div>
<div class="tile" id="tile-8">
<label for="cell-8-x"></label>
<label for="cell-8-o"></label>
<div></div>
</div>
</div>
<div id="end">
<div id="message" class="center">
<div>
<input type="reset" for="tictactoe" value="Play again" />
</div>
</div>
</div>
</form>CSS Code
Create a file style.css and paste the code below.
@import url('https://fonts.googleapis.com/css?family=Mandali|Raleway:900&display=swap');
input[type="radio"] {
position: absolute;
top: -9999em;
}
html, body {
font-family: Mandali, Arial, sans-serif;
font-size: 16px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#board {
width: 50vmin;
height: 50vmin;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.tile {
margin: 5%;
position: relative;
}
.tile label,
.tile div {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.10);
font-family: Raleway, Courier, 'Courier New', Sans, sans-serif;
font-weight: bolder;
}
.tile div {
display: none;
overflow: hidden;
text-shadow: 0 1px 6px rgba(0,0,0,0.85)
}
label[for$='-x'] {
z-index: 1;
}
input:checked ~ #board label[for$='-o'] {
z-index: 2;
}
input:checked ~ input:checked ~ #board label[for$='-x'] {
z-index: 3;
}
input:checked ~ input:checked ~ input:checked ~ #board label[for$='-o'] {
z-index: 4;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ #board label[for$='-x'] {
z-index: 5;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ #board label[for$='-o'] {
z-index: 6;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ #board label[for$='-x'] {
z-index: 7;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ #board label[for$='-o'] {
z-index: 8;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ #board label[for$='-x'] {
z-index: 9;
}
input[id*='-0-']:checked ~ #board label[for*='-0-'],
input[id*='-1-']:checked ~ #board label[for*='-1-'],
input[id*='-2-']:checked ~ #board label[for*='-2-'],
input[id*='-3-']:checked ~ #board label[for*='-3-'],
input[id*='-4-']:checked ~ #board label[for*='-4-'],
input[id*='-5-']:checked ~ #board label[for*='-5-'],
input[id*='-6-']:checked ~ #board label[for*='-6-'],
input[id*='-7-']:checked ~ #board label[for*='-7-'],
input[id*='-8-']:checked ~ #board label[for*='-8-'] {
display: none;
}
input[id*='-0-']:checked ~ #board #tile-0 div,
input[id*='-1-']:checked ~ #board #tile-1 div,
input[id*='-2-']:checked ~ #board #tile-2 div,
input[id*='-3-']:checked ~ #board #tile-3 div,
input[id*='-4-']:checked ~ #board #tile-4 div,
input[id*='-5-']:checked ~ #board #tile-5 div,
input[id*='-6-']:checked ~ #board #tile-6 div,
input[id*='-7-']:checked ~ #board #tile-7 div,
input[id*='-8-']:checked ~ #board #tile-8 div {
display: block;
}
input[id*='-0-x']:checked ~ #board #tile-0 div::before,
input[id*='-1-x']:checked ~ #board #tile-1 div::before,
input[id*='-2-x']:checked ~ #board #tile-2 div::before,
input[id*='-3-x']:checked ~ #board #tile-3 div::before,
input[id*='-4-x']:checked ~ #board #tile-4 div::before,
input[id*='-5-x']:checked ~ #board #tile-5 div::before,
input[id*='-6-x']:checked ~ #board #tile-6 div::before,
input[id*='-7-x']:checked ~ #board #tile-7 div::before,
input[id*='-8-x']:checked ~ #board #tile-8 div::before {
content: "X";
background: #004974;
color: #89dcf6;
}
input[id*='-0-o']:checked ~ #board #tile-0 div::before,
input[id*='-1-o']:checked ~ #board #tile-1 div::before,
input[id*='-2-o']:checked ~ #board #tile-2 div::before,
input[id*='-3-o']:checked ~ #board #tile-3 div::before,
input[id*='-4-o']:checked ~ #board #tile-4 div::before,
input[id*='-5-o']:checked ~ #board #tile-5 div::before,
input[id*='-6-o']:checked ~ #board #tile-6 div::before,
input[id*='-7-o']:checked ~ #board #tile-7 div::before,
input[id*='-8-o']:checked ~ #board #tile-8 div::before {
content: "O";
background: #a60011;
color: #ffc7b5;
}
.tile label:hover {
cursor: pointer;
background: rgba(0,0,0,0.25);
}
.tile label::before,
.tile div::before {
color: #000;
position: absolute;
text-align:center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 7.5vmin;
font-weight: bold;
}
.tile div::before {
padding: 100%;
}
.tile label[for$='-o']:hover::before {
content: "O";
}
.tile label[for$='-x']:hover::before {
content: "X";
}
#tile-0 {
grid-column: 1;
grid-row: 1;
}
#tile-0 label,
#tile-0 div {
border-radius: 10% 0 0 0;
}
#tile-1 {
grid-column: 2;
grid-row: 1;
}
#tile-2 {
grid-column: 3;
grid-row: 1;
}
#tile-2 label,
#tile-2 div {
border-radius: 0 10% 0 0;
}
#tile-3 {
grid-column: 1;
grid-row: 2;
}
#tile-4 {
grid-column: 2;
grid-row: 2;
}
#tile-5 {
grid-column: 3;
grid-row: 2;
}
#tile-6 {
grid-column: 1;
grid-row: 3;
}
#tile-6 label,
#tile-6 div {
border-radius: 0 0 0 10%;
}
#tile-7 {
grid-column: 2;
grid-row: 3;
}
#tile-8 {
grid-column: 3;
grid-row: 3;
}
#tile-8 label,
#tile-8 div {
border-radius: 0 0 10% 0;
}
#end {
background: rgba(255,255,255,0.85);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
#message {
text-align: center;
font-size: 2rem;
line-height: 2.2rem;
font-weight: bold;
}
#message::before {
content: "Tied game!"
}
#message input {
background: #000;
color: #fff;
font-size: 1rem;
padding: 0.5rem 1.75rem;
margin: auto auto;
margin-top: 2rem;
}
input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ input:checked ~ #end,
#cell-0-x:checked ~ #cell-1-x:checked ~ #cell-2-x:checked ~ #end,
#cell-3-x:checked ~ #cell-4-x:checked ~ #cell-5-x:checked ~ #end,
#cell-6-x:checked ~ #cell-7-x:checked ~ #cell-8-x:checked ~ #end,
#cell-0-x:checked ~ #cell-3-x:checked ~ #cell-6-x:checked ~ #end,
#cell-1-x:checked ~ #cell-4-x:checked ~ #cell-7-x:checked ~ #end,
#cell-2-x:checked ~ #cell-5-x:checked ~ #cell-8-x:checked ~ #end,
#cell-0-x:checked ~ #cell-4-x:checked ~ #cell-8-x:checked ~ #end,
#cell-2-x:checked ~ #cell-4-x:checked ~ #cell-6-x:checked ~ #end,
#cell-0-o:checked ~ #cell-1-o:checked ~ #cell-2-o:checked ~ #end,
#cell-3-o:checked ~ #cell-4-o:checked ~ #cell-5-o:checked ~ #end,
#cell-6-o:checked ~ #cell-7-o:checked ~ #cell-8-o:checked ~ #end,
#cell-0-o:checked ~ #cell-3-o:checked ~ #cell-6-o:checked ~ #end,
#cell-1-o:checked ~ #cell-4-o:checked ~ #cell-7-o:checked ~ #end,
#cell-2-o:checked ~ #cell-5-o:checked ~ #cell-8-o:checked ~ #end,
#cell-0-o:checked ~ #cell-4-o:checked ~ #cell-8-o:checked ~ #end,
#cell-2-o:checked ~ #cell-4-o:checked ~ #cell-6-o:checked ~ #end {
display: block;
}
#cell-0-x:checked ~ #cell-1-x:checked ~ #cell-2-x:checked ~ #end #message::before,
#cell-3-x:checked ~ #cell-4-x:checked ~ #cell-5-x:checked ~ #end #message::before,
#cell-6-x:checked ~ #cell-7-x:checked ~ #cell-8-x:checked ~ #end #message::before,
#cell-0-x:checked ~ #cell-3-x:checked ~ #cell-6-x:checked ~ #end #message::before,
#cell-1-x:checked ~ #cell-4-x:checked ~ #cell-7-x:checked ~ #end #message::before,
#cell-2-x:checked ~ #cell-5-x:checked ~ #cell-8-x:checked ~ #end #message::before,
#cell-0-x:checked ~ #cell-4-x:checked ~ #cell-8-x:checked ~ #end #message::before,
#cell-2-x:checked ~ #cell-4-x:checked ~ #cell-6-x:checked ~ #end #message::before {
content: "Player 1 won!";
}
#cell-0-o:checked ~ #cell-1-o:checked ~ #cell-2-o:checked ~ #end #message::before,
#cell-3-o:checked ~ #cell-4-o:checked ~ #cell-5-o:checked ~ #end #message::before,
#cell-6-o:checked ~ #cell-7-o:checked ~ #cell-8-o:checked ~ #end #message::before,
#cell-0-o:checked ~ #cell-3-o:checked ~ #cell-6-o:checked ~ #end #message::before,
#cell-1-o:checked ~ #cell-4-o:checked ~ #cell-7-o:checked ~ #end #message::before,
#cell-2-o:checked ~ #cell-5-o:checked ~ #cell-8-o:checked ~ #end #message::before,
#cell-0-o:checked ~ #cell-4-o:checked ~ #cell-8-o:checked ~ #end #message::before,
#cell-2-o:checked ~ #cell-4-o:checked ~ #cell-6-o:checked ~ #end #message::before {
content: "Player 2 won!";
}Output Till Now
Written by: Piyush Patil
Code Credits: @alvaromontoro
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
