|
| 1 | +var board = new Array(9); |
| 2 | + |
| 3 | +function init() { |
| 4 | + /* use touch events if they're supported, otherwise use mouse events */ |
| 5 | + var down = "mousedown"; var up = "mouseup"; |
| 6 | + if ('createTouch' in document) { down = "touchstart"; up ="touchend"; } |
| 7 | + |
| 8 | + /* add event listeners */ |
| 9 | + document.querySelector("input.button").addEventListener(up, newGame, false); |
| 10 | + var squares = document.getElementsByTagName("td"); |
| 11 | + for (var s = 0; s < squares.length; s++) { |
| 12 | + squares[s].addEventListener(down, function(evt){squareSelected(evt, getCurrentPlayer());}, false); |
| 13 | + } |
| 14 | + |
| 15 | + /* create the board and set the initial player */ |
| 16 | + createBoard(); |
| 17 | + setInitialPlayer(); |
| 18 | +} |
| 19 | + |
| 20 | + |
| 21 | +function createBoard() { |
| 22 | + /* create a board from the stored version, if a stored version exists */ |
| 23 | + if (window.localStorage && localStorage.getItem('tic-tac-toe-board')) { |
| 24 | + |
| 25 | + /* parse the string that represents our playing board to an array */ |
| 26 | + board = (JSON.parse(localStorage.getItem('tic-tac-toe-board'))); |
| 27 | + for (var i = 0; i < board.length; i++) { |
| 28 | + if (board[i] != "") { |
| 29 | + fillSquareWithMarker(document.getElementById(i), board[i]); |
| 30 | + } |
| 31 | + } |
| 32 | + } |
| 33 | + /* otherwise, create a clean board */ |
| 34 | + else { |
| 35 | + for (var i = 0; i < board.length; i++) { |
| 36 | + board[i] = ""; |
| 37 | + document.getElementById(i).innerHTML = ""; |
| 38 | + } |
| 39 | + } |
| 40 | +} |
| 41 | + |
| 42 | +function squareSelected(evt, currentPlayer) { |
| 43 | + var square = evt.target; |
| 44 | + /* check to see if the square already contains an X or O marker */ |
| 45 | + if (square.className.match(/marker/)) { |
| 46 | + alert("Sorry, that space is taken! Please choose another square."); |
| 47 | + return; |
| 48 | + } |
| 49 | + /* if not already marked, mark the square, update the array that tracks our board, check for a winner, and switch players */ |
| 50 | + else { |
| 51 | + fillSquareWithMarker(square, currentPlayer); |
| 52 | + updateBoard(square.id, currentPlayer); |
| 53 | + checkForWinner(); |
| 54 | + switchPlayers(); |
| 55 | + } |
| 56 | +} |
| 57 | + |
| 58 | +function fillSquareWithMarker(square, player) { |
| 59 | + var marker = document.createElement('div'); |
| 60 | + /* set the class name on the new div to X-marker or O-marker, depending on the current player */ |
| 61 | + marker.className = player + "-marker"; |
| 62 | + square.appendChild(marker); |
| 63 | +} |
| 64 | + |
| 65 | +function updateBoard(index, marker) { |
| 66 | + board[index] = marker; |
| 67 | + |
| 68 | + /* HTML5 localStorage only allows storage of strings - convert our array to a string */ |
| 69 | + var boardstring = JSON.stringify(board); |
| 70 | + |
| 71 | + /* store this string to localStorage, along with the last player who marked a square */ |
| 72 | + localStorage.setItem('tic-tac-toe-board', boardstring); |
| 73 | + localStorage.setItem('last-player', getCurrentPlayer()); |
| 74 | +} |
| 75 | + |
| 76 | + |
| 77 | +function declareWinner() { |
| 78 | + if (confirm("We have a winner! New game?")) { |
| 79 | + newGame(); |
| 80 | + } |
| 81 | +} |
| 82 | + |
| 83 | +function weHaveAWinner(a, b, c) { |
| 84 | + if ((board[a] === board[b]) && (board[b] === board[c]) && (board[a] != "" || board[b] != "" || board[c] != "")) { |
| 85 | + setTimeout(declareWinner(), 100); |
| 86 | + return true; |
| 87 | + } |
| 88 | + else |
| 89 | + return false; |
| 90 | +} |
| 91 | + |
| 92 | +function checkForWinner() { |
| 93 | + /* check rows */ |
| 94 | + var a = 0; var b = 1; var c = 2; |
| 95 | + while (c < board.length) { |
| 96 | + if (weHaveAWinner(a, b, c)) { |
| 97 | + return; |
| 98 | + } |
| 99 | + a+=3; b+=3; c+=3; |
| 100 | + } |
| 101 | + |
| 102 | + /* check columns */ |
| 103 | + a = 0; b = 3; c = 6; |
| 104 | + while (c < board.length) { |
| 105 | + if (weHaveAWinner(a, b, c)) { |
| 106 | + return; |
| 107 | + } |
| 108 | + a+=1; b+=1; c+=1; |
| 109 | + } |
| 110 | + |
| 111 | + /* check diagonal right */ |
| 112 | + if (weHaveAWinner(0, 4, 8)) { |
| 113 | + return; |
| 114 | + } |
| 115 | + /* check diagonal left */ |
| 116 | + if (weHaveAWinner(2, 4, 6)) { |
| 117 | + return; |
| 118 | + } |
| 119 | + |
| 120 | + /* if there's no winner but the board is full, ask the user if they want to start a new game */ |
| 121 | + if (!JSON.stringify(board).match(/,"",/)) { |
| 122 | + if (confirm("It's a draw. New game?")) { |
| 123 | + newGame(); |
| 124 | + } |
| 125 | + } |
| 126 | +} |
| 127 | + |
| 128 | + |
| 129 | +function getCurrentPlayer() { |
| 130 | + return document.querySelector(".current-player").id; |
| 131 | +} |
| 132 | + |
| 133 | +function setInitialPlayer() { |
| 134 | + var playerX = document.getElementById("X"); |
| 135 | + var playerO = document.getElementById("O"); |
| 136 | + playerX.className = ""; |
| 137 | + playerO.className = ""; |
| 138 | + |
| 139 | + /* if there's no localStorage, or no last-player stored in localStorage, always set the first player to X by default */ |
| 140 | + if (!window.localStorage || !localStorage.getItem('last-player')) { |
| 141 | + playerX.className = "current-player"; |
| 142 | + return; |
| 143 | + } |
| 144 | + |
| 145 | + var lastPlayer = localStorage.getItem('last-player'); |
| 146 | + if (lastPlayer == 'X') { |
| 147 | + playerO.className = "current-player"; |
| 148 | + } |
| 149 | + else { |
| 150 | + playerX.className = "current-player"; |
| 151 | + } |
| 152 | +} |
| 153 | + |
| 154 | +function switchPlayers() { |
| 155 | + var playerX = document.getElementById("X"); |
| 156 | + var playerO = document.getElementById("O"); |
| 157 | + |
| 158 | + if (playerX.className.match(/current-player/)) { |
| 159 | + playerO.className = "current-player"; |
| 160 | + playerX.className = ""; |
| 161 | + } |
| 162 | + else { |
| 163 | + playerX.className = "current-player"; |
| 164 | + playerO.className = ""; |
| 165 | + } |
| 166 | +} |
| 167 | + |
| 168 | +function newGame() { |
| 169 | + /* clear the currently stored game out of local storage */ |
| 170 | + localStorage.removeItem('tic-tac-toe-board'); |
| 171 | + localStorage.removeItem('last-player'); |
| 172 | + |
| 173 | + /* create a new game */ |
| 174 | + createBoard(); |
| 175 | +} |
0 commit comments