Create Tic-Tac-Toe in HTML/CSS. Understand layers (z-index).
parent
d18487c306
commit
60ee0dd172
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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
7
todo.txt
|
|
@ -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) Create Python script that creates full CSS for bot +tictactoecss
|
||||
(E) Publish on homepage. +tictactoecss
|
||||
(E) Write readme. +tictactoecss
|
||||
(D) Publish on homepage. +tictactoecss
|
||||
(D) Write readme. +tictactoecss
|
||||
Loading…
Reference in New Issue