felixm/tictactoecss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create Tic-Tac-Toe in HTML/CSS. Understand layers (z-index).

Browse Source
This commit is contained in:
Felix Martin
2019-07-21 21:39:18 -04:00
parent d18487c306
commit 60ee0dd172
4 changed files with 129 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
readme.md
View File

@@ -0,0 +1,7 @@
# Tic Tac Toe CSS
https://eddyerburgh.me/make-responsive-tic-tac-toe-board
https://css-tricks.com/game-life/
https://codepen.io/ziga-miklic/post/pure-css-tic-tac-toe

81
tictactoe.css Normal file
View File

@@ -0,0 +1,81 @@
body {
text-align: center;
margin: 0;
}
.tic-tac-toe {
height: 450px;
width: 450px;
margin: 50px auto 30px auto;
position: relative;
background-color: #E6E6FA;
}
.tic-tac-toe input[type="radio"] {
display: none;
}
.tic-tac-toe input[type="radio"].turn-1 + label {
z-index: 1;
display: block;
}
.tic-tac-toe input[type="radio"].turn-1:checked + label {
cursor: default;
background-color: red;
z-index: 10 !important;
}
.tic-tac-toe input[type="radio"].turn-1.field-9:checked ~ .turn-2.field-3 + label {
display: block;
cursor: default;
background-color: green;
z-index: 2;
}
.tic-tac-toe label {
background-color: #78bec5;
height: 140px;
width: 140px;
display: none;
margin: 5px;
position: absolute;
cursor: pointer;
color: #fff;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.tic-tac-toe input[type="radio"].left + label {
left: 0px;
right: 300px;
}
.tic-tac-toe input[type="radio"].middle + label {
left: 150px;
right: 150px;
}
.tic-tac-toe input[type="radio"].right + label {
left: 300px;
right: 0px;
}
.tic-tac-toe input[type="radio"].top + label {
top: 0px;
bottom: 300px;
}
.tic-tac-toe input[type="radio"].center + label {
top: 150px;
bottom: 150px;
}
.tic-tac-toe input[type="radio"].bottom + label {
top: 300px;
bottom: 0px;
}

39
tictactoe.html Normal file
View File

@@ -0,0 +1,39 @@
<html>
<head>
<title>Tic Tac Toe CSS</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
</head>
<body>
<div class="tic-tac-toe">
<input class="player-1 field-1 left top turn-1" id="block1-1-1" type="radio">
<label class="turn-1" for="block1-1-1"></label>
<input class="player-1 middle top turn-1" id="block1-1-2" type="radio">
<label class="turn-1" for="block1-1-2"></label>
<input class="player-1 right top turn-1" id="block1-1-3" type="radio">
<label class="turn-1" for="block1-1-3"></label>
<input class="player-1 left center turn-1" id="block1-2-1" type="radio">
<label class="turn-1" for="block1-2-1"></label>
<input class="player-1 middle center turn-1" id="block1-2-2" type="radio">
<label class="turn-1" for="block1-2-2"></label>
<input class="player-1 right center turn-1" id="block1-2-3" type="radio">
<label class="turn-1" for="block1-2-3"></label>
<input class="player-1 left bottom turn-1" id="block1-3-1" type="radio">
<label class="turn-1" for="block1-3-1"></label>
<input class="player-1 middle bottom turn-1" id="block1-3-2" type="radio">
<label class="turn-1" for="block1-3-2"></label>
<input class="player-1 right field-9 bottom turn-1" id="block1-3-3" type="radio">
<label class="turn-1" for="block1-3-3"></label>
<input class="player-1 field-1 left top turn-2" id="block2-1-1" type="radio">
<label class="turn-2" for="block2-1-1"></label>
<input class="player-1 field-2 middle top turn-2" id="block2-1-2" type="radio">
<label class="turn-2" for="block2-1-2"></label>
<input class="player-1 field-3 right top turn-2" id="block2-1-3" type="radio">
<label class="turn-2" for="block2-1-3"></label>
</div>
</body>
</html>

7
todo.txt
View File

@@ -1,7 +1,4 @@
(B) Create HTML for Tic-Tac-Toe field. +tictactoecss
(B) Research how to do multiple layers in CSS. +tictactoecss
(C) Create manual prove of concept that shows how multiple rounds can be played. +tictactoecss
(D) Add message that indicates draw or loss. +tictactoecss (D) Add message that indicates draw or loss. +tictactoecss
(D) Create Python script that creates full CSS for bot +tictactoecss (D) Create Python script that creates full CSS for bot +tictactoecss
(E) Publish on homepage. +tictactoecss (D) Publish on homepage. +tictactoecss
(E) Write readme. +tictactoecss (D) Write readme. +tictactoecss