|
| 1 | +<html> |
| 2 | + <head> |
| 3 | + <title>Tic-Tac-Toe</title> |
| 4 | + <style> |
| 5 | + table button { width: 30px; height: 30px; border:0; } |
| 6 | + table { margin: 1em} |
| 7 | + </style> |
| 8 | + </head> |
| 9 | +<body> |
| 10 | + |
| 11 | +<p id="msg">Click to play</p> |
| 12 | + |
| 13 | +<table border=1 cellspacing=0 cellpadding=4> |
| 14 | + <tr> |
| 15 | + <td><button></button> |
| 16 | + <td><button></button> |
| 17 | + <td><button></button> |
| 18 | + <tr> |
| 19 | + <td><button></button> |
| 20 | + <td><button></button> |
| 21 | + <td><button></button> |
| 22 | + <tr> |
| 23 | + <td><button></button> |
| 24 | + <td><button></button> |
| 25 | + <td><button></button> |
| 26 | +</table> |
| 27 | + |
| 28 | + <button id=restart>Start over</button> |
| 29 | + |
| 30 | + <script> |
| 31 | +var currentPlayer = 'X'; |
| 32 | + |
| 33 | +msg = document.querySelector('#msg'); |
| 34 | + |
| 35 | +function switchPlayer() { |
| 36 | + currentPlayer = (currentPlayer == 'X') ? 'O' : 'X'; |
| 37 | + msg.innerText = 'Player ' + currentPlayer + ': it is your turn'; |
| 38 | +} |
| 39 | + |
| 40 | +function detectWin() { |
| 41 | + var s = Array.from(squares).map((sq) => sq.innerText); |
| 42 | + // rows |
| 43 | + if (s[0] && s[0] == s[1] && s[1]== s[2]) return s[0]; |
| 44 | + if (s[3] && s[3] == s[4] && s[4] == s[5]) return s[5]; |
| 45 | + if (s[6]&& s[6] == s[7] && s[7]== s[8]) return s[8]; |
| 46 | + |
| 47 | + // cols |
| 48 | + if (s[0] && s[0] == s[3] && s[3]== s[6]) return s[0]; |
| 49 | + if (s[1] && s[1] == s[4] && s[4] == s[7]) return s[5]; |
| 50 | + if (s[2]&& s[2] == s[5] && s[5]== s[8]) return s[8]; |
| 51 | + |
| 52 | + // diagonals |
| 53 | + if (s[0]&& s[0] == s[4] && s[4]== s[8]) return s[8]; |
| 54 | + if (s[2]&& s[2] == s[4] && s[4]== s[6]) return s[6]; |
| 55 | + |
| 56 | + |
| 57 | + if (s.filter(sp => sp == '').length == 0) |
| 58 | + return 'Cat'; |
| 59 | +} |
| 60 | + |
| 61 | +function onClick(e) { |
| 62 | + var t = e.target; |
| 63 | + if (!t.innerText) { |
| 64 | + e.target.innerText = currentPlayer; |
| 65 | + winner = detectWin(); |
| 66 | + if (winner) { |
| 67 | + msg.innerText = winner + ' has won!'; |
| 68 | + } |
| 69 | + else { |
| 70 | + switchPlayer(); |
| 71 | + } |
| 72 | + } |
| 73 | +} |
| 74 | +var squares = document.querySelectorAll('table button'); |
| 75 | + |
| 76 | +squares.forEach((b) => b.addEventListener('click', onClick)); |
| 77 | + |
| 78 | +document.querySelector('#restart').addEventListener('click', (e) => { |
| 79 | + squares.forEach((s) => s.innerText = ''); |
| 80 | + switchPlayer(); |
| 81 | +}) |
| 82 | + </script> |
| 83 | + </body> |
| 84 | +</html> |
0 commit comments