Last active
August 21, 2016 11:19
-
-
Save Baudin999/cdd176f6db8ca8015205c8af97f75808 to your computer and use it in GitHub Desktop.
tic tac toe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="templates"> | |
| <svg height="24" width="24" class="cross"> | |
| <line x1="2" y1="2" x2="20" y2="20" style="stroke:green;stroke-width:4" /> | |
| <line x1="2" y1="20" x2="20" y2="2" style="stroke:green;stroke-width:4" /> | |
| </svg> | |
| <svg height="24" width="24" class="circle"> | |
| <circle cx="12" cy="12" r="10" stroke="orange" stroke-width="4" fill="white" /> | |
| </svg> | |
| </div> | |
| <div class="fields"> | |
| <div class="field 00"></div> | |
| <div class="field 01"></div> | |
| <div class="field 02"></div> | |
| <div class="field 10"></div> | |
| <div class="field 11"></div> | |
| <div class="field 12"></div> | |
| <div class="field 20"></div> | |
| <div class="field 21"></div> | |
| <div class="field 22"></div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var turn = 1; | |
| var circle = document.querySelector('.circle'); | |
| var cross = document.querySelector('.cross'); | |
| var fields = [].slice.call(document.querySelectorAll(".field")); | |
| fields.forEach(function(field) { | |
| field.onclick = function() { | |
| if (turn === 1) { | |
| var child = circle.cloneNode(true); | |
| field.appendChild(child); | |
| } | |
| else if (turn === 2) { | |
| field.appendChild(cross.cloneNode(true)); | |
| } | |
| turn = turn === 1 ? 2 : 1; | |
| delete field.onclick; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| .templates { | |
| display: none; | |
| } | |
| .fields { | |
| display: flex; | |
| width: 120px; | |
| flex-wrap: wrap; | |
| } | |
| .field { | |
| border: 4px solid black; | |
| height: 40px; | |
| width: 40px; | |
| position: relative; | |
| } | |
| .field .cross, .field .circle { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment