From 202cb76d4c51bf7c967efbb211ca9098e1c28a4f Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Wed, 26 Feb 2025 02:22:25 +0530 Subject: [PATCH 1/7] Created solution.md --- solution.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 solution.md diff --git a/solution.md b/solution.md new file mode 100644 index 0000000..e69de29 From 84d70cd1d743ef933bfdfae2f97d292268e1c402 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Wed, 26 Feb 2025 18:14:46 +0530 Subject: [PATCH 2/7] Added code --- typing-game-solution/.vscode/settings.json | 3 + typing-game-solution/index.html | 17 +++++ typing-game-solution/script.js | 86 ++++++++++++++++++++++ typing-game-solution/style.css | 8 ++ 4 files changed, 114 insertions(+) create mode 100644 typing-game-solution/.vscode/settings.json create mode 100644 typing-game-solution/index.html create mode 100644 typing-game-solution/script.js create mode 100644 typing-game-solution/style.css diff --git a/typing-game-solution/.vscode/settings.json b/typing-game-solution/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/typing-game-solution/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/typing-game-solution/index.html b/typing-game-solution/index.html new file mode 100644 index 0000000..04ec901 --- /dev/null +++ b/typing-game-solution/index.html @@ -0,0 +1,17 @@ + + + Typing game + + + +

Typing game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

+

+
+ + +
+ + + \ No newline at end of file diff --git a/typing-game-solution/script.js b/typing-game-solution/script.js new file mode 100644 index 0000000..6335f6f --- /dev/null +++ b/typing-game-solution/script.js @@ -0,0 +1,86 @@ +// inside script.js +// all of our quotes +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// store the list of words and the index of the word the player is currently typing +let words = []; +let wordIndex = 0; +// the starting time +let startTime = Date.now(); +// page elements +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); + +// at the end of script.js +document.getElementById('start').addEventListener('click', () => { + // get a quote + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // Put the quote into an array of words + words = quote.split(' '); + // reset the word index for tracking + wordIndex = 0; + + // UI updates + // Create an array of span elements so we can set a class + const spanWords = words.map(function(word) { return `${word} `}); + // Convert into string and set as innerHTML on quote display + quoteElement.innerHTML = spanWords.join(''); + // Highlight the first word + quoteElement.childNodes[0].className = 'highlight'; + // Clear any prior messages + messageElement.innerText = ''; + + // Setup the textbox + // Clear the textbox + typedValueElement.value = ''; + // set focus + typedValueElement.focus(); + // set the event handler + + // Start the timer + startTime = new Date().getTime(); + }); + + // at the end of script.js +typedValueElement.addEventListener('input', () => { + // Get the current word + const currentWord = words[wordIndex]; + // get the current value + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // end of sentence + // Display success + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // end of word + // clear the typedValueElement for the new word + typedValueElement.value = ''; + // move to the next word + wordIndex++; + // reset the class name for all elements in quote + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // highlight the new word + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // currently correct + // highlight the next word + typedValueElement.className = ''; + } else { + // error state + typedValueElement.className = 'error'; + } + }); \ No newline at end of file diff --git a/typing-game-solution/style.css b/typing-game-solution/style.css new file mode 100644 index 0000000..ed4d988 --- /dev/null +++ b/typing-game-solution/style.css @@ -0,0 +1,8 @@ +.highlight { + background-color: yellow; + } + + .error { + background-color: lightcoral; + border: red; + } \ No newline at end of file From 8ebb3b35db69c2f4e0339afaa514f5464646f966 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Thu, 27 Feb 2025 01:55:35 +0530 Subject: [PATCH 3/7] Added code --- typing-game-solution/index.html | 15 ++++--- typing-game-solution/script.js | 74 +++++++++++++++++++-------------- typing-game-solution/style.css | 54 ++++++++++++++++++++++-- 3 files changed, 103 insertions(+), 40 deletions(-) diff --git a/typing-game-solution/index.html b/typing-game-solution/index.html index 04ec901..dfb0d31 100644 --- a/typing-game-solution/index.html +++ b/typing-game-solution/index.html @@ -2,14 +2,19 @@ Typing game + + + -

Typing game!

-

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

-

-

- +

Typing game !

+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

+

+
+
+
diff --git a/typing-game-solution/script.js b/typing-game-solution/script.js index 6335f6f..e730b1b 100644 --- a/typing-game-solution/script.js +++ b/typing-game-solution/script.js @@ -8,6 +8,9 @@ const quotes = [ 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', + 'Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.', + 'What you do in this world is a matter of no consequence. The question is what can you make people believe you have done.', + 'Crime is common. Logic is rare. Therefore it is upon the logic rather than upon the crime that you should dwell.', ]; // store the list of words and the index of the word the player is currently typing let words = []; @@ -22,6 +25,7 @@ const typedValueElement = document.getElementById('typed-value'); // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote + typedValueElement.className = 'typing-start'; const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words @@ -51,36 +55,42 @@ document.getElementById('start').addEventListener('click', () => { }); // at the end of script.js -typedValueElement.addEventListener('input', () => { - // Get the current word - const currentWord = words[wordIndex]; - // get the current value - const typedValue = typedValueElement.value; - - if (typedValue === currentWord && wordIndex === words.length - 1) { - // end of sentence - // Display success - const elapsedTime = new Date().getTime() - startTime; - const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; - messageElement.innerText = message; - } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { - // end of word - // clear the typedValueElement for the new word - typedValueElement.value = ''; - // move to the next word - wordIndex++; - // reset the class name for all elements in quote - for (const wordElement of quoteElement.childNodes) { - wordElement.className = ''; - } - // highlight the new word - quoteElement.childNodes[wordIndex].className = 'highlight'; - } else if (currentWord.startsWith(typedValue)) { - // currently correct - // highlight the next word - typedValueElement.className = ''; - } else { - // error state - typedValueElement.className = 'error'; +typedValueElement.addEventListener('input', getInput); + + + +function getInput(){ + // Get the current word + const currentWord = words[wordIndex]; + // get the current value + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // end of sentence + // Display success + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + typedValueElement.removeEventListener('input',getInput); + typedValueElement.className = 'typing-end'; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // end of word + // clear the typedValueElement for the new word + typedValueElement.value = ''; + // move to the next word + wordIndex++; + // reset the class name for all elements in quote + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; } - }); \ No newline at end of file + // highlight the new word + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // currently correct + // highlight the next word + typedValueElement.className = 'typing-start'; + } else { + // error state + typedValueElement.className = 'error'; + } +} \ No newline at end of file diff --git a/typing-game-solution/style.css b/typing-game-solution/style.css index ed4d988..26c2c92 100644 --- a/typing-game-solution/style.css +++ b/typing-game-solution/style.css @@ -1,8 +1,56 @@ .highlight { - background-color: yellow; + background-color: rgb(102, 255, 0); } - .error { +.error { background-color: lightcoral; border: red; - } \ No newline at end of file + width: 220px; + height: 45px; + font-size: 25px; + font-weight: bolder; + } + +body{ + background-color: rgb(12, 2, 2); +} + +h1{ + font-family: 'Fondamento',serif; + font-size: 80px; + color: blueviolet; + text-align: center; + } + +p{ + font-family: 'Fondamento',serif; + font-size: 40px; + color: yellow; + text-align: center; +} + +.typing-start { + width: 220px; + height: 45px; + font-size: 25px; + font-weight: bolder; +} + +.typing-end { + width: 0px; + height: 0px; +} + +button{ + height: 45px; + margin-left: 30px; + border-color: white; + width: 70px; + font-size: 20px; + font-weight: bolder; +} + +.typing{ + margin-top: 90px; + margin-left: 40%; +} \ No newline at end of file From e359c9b66d58d7f2c6d37e0a1c6542e68956ef20 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Fri, 28 Feb 2025 17:30:34 +0530 Subject: [PATCH 4/7] Added code --- typing-game-solution/index.html | 2 +- typing-game-solution/script.js | 7 ++++--- typing-game-solution/style.css | 12 +++++++++--- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/typing-game-solution/index.html b/typing-game-solution/index.html index dfb0d31..0e388e3 100644 --- a/typing-game-solution/index.html +++ b/typing-game-solution/index.html @@ -14,7 +14,7 @@

Typing game !

- +
diff --git a/typing-game-solution/script.js b/typing-game-solution/script.js index e730b1b..fd55fa7 100644 --- a/typing-game-solution/script.js +++ b/typing-game-solution/script.js @@ -25,7 +25,7 @@ const typedValueElement = document.getElementById('typed-value'); // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote - typedValueElement.className = 'typing-start'; + typedValueElement.disabled=false; const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words @@ -72,7 +72,7 @@ function getInput(){ const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; typedValueElement.removeEventListener('input',getInput); - typedValueElement.className = 'typing-end'; + typedValueElement.disabled=true; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word @@ -88,7 +88,8 @@ function getInput(){ } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word - typedValueElement.className = 'typing-start'; + typedValueElement.className=''; + typedValueElement.disabled=false; } else { // error state typedValueElement.className = 'error'; diff --git a/typing-game-solution/style.css b/typing-game-solution/style.css index 26c2c92..a366906 100644 --- a/typing-game-solution/style.css +++ b/typing-game-solution/style.css @@ -1,5 +1,5 @@ .highlight { - background-color: rgb(102, 255, 0); + background-color: rgb(7, 182, 235); } .error { @@ -29,16 +29,22 @@ p{ text-align: center; } -.typing-start { +input { width: 220px; height: 45px; font-size: 25px; font-weight: bolder; } -.typing-end { +input:disabled { width: 0px; height: 0px; + background-color: rgb(12, 2, 2); +} + +input:focus{ + outline: none; + border: none; } button{ From f014bebac43e6b4112a66064ea6af7492ef7ba37 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Mon, 3 Mar 2025 23:53:29 +0530 Subject: [PATCH 5/7] Added the assignment folder --- tic-tac-toe/index.html | 33 +++++++++++++++ tic-tac-toe/script.js | 94 ++++++++++++++++++++++++++++++++++++++++++ tic-tac-toe/styles.css | 42 +++++++++++++++++++ 3 files changed, 169 insertions(+) create mode 100644 tic-tac-toe/index.html create mode 100644 tic-tac-toe/script.js create mode 100644 tic-tac-toe/styles.css diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html new file mode 100644 index 0000000..2434b61 --- /dev/null +++ b/tic-tac-toe/index.html @@ -0,0 +1,33 @@ + + + + + + Tic-Tac-Toe + + + +
+ Tic Tac Toe +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

+ +
+
+ + + \ No newline at end of file diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js new file mode 100644 index 0000000..c8214f8 --- /dev/null +++ b/tic-tac-toe/script.js @@ -0,0 +1,94 @@ +const cells = document.querySelectorAll("#box"); +const chance = document.querySelector("#player"); +const newButton = document.querySelector("#newGame"); + +let vict=0; +let symbol; + +let cellX = []; +let cellO = []; + +let options = []; + +const winningPossibilities = [ + ['0','1','2'], + ['3','4','5'], + ['6','7','8'], + ['0','3','6'], + ['1','4','7'], + ['2','5','8'], + ['0','4','8'], + ['2','4','6'], +] + +newButton.addEventListener('click',startGame); + +function startGame(){ + cells.forEach(cell=>{ + cell.innerHTML=''; + }) + chance.innerHTML=''; + symbol='X'; + cellO=[]; + cellX=[] + vict=0; + selectBox(); +} + + +function selectBox(){ + cells.forEach(cell=>{ + cell.addEventListener('click',instantiate); + }) + +} + +function changePlayer(){ + if(symbol=='O'){ + symbol='X'; + }else{ + symbol='O'; + } + chance.innerHTML=`${symbol} 's chance to play`; +} + + + +function winGame(cells, player) { + for (let i = 0; i < winningPossibilities.length; i++) { + if ((hasSubset(cells,winningPossibilities))) { + chance.innerHTML = `${player} has won the game.`; + // Stop further execution after a win + vict+=1; + return; + } + } + changePlayer(); +} + +function hasSubset(x,groups){ + const xSet = new Set(x); + return groups.some(group => group.every(num => xSet.has(num))); +} + +function instantiate(event){ + let cell = event.target; + if (cell.innerHTML !== "") return; // Prevent overwriting + cell.innerHTML=symbol; + if(symbol == 'X'){ + cellX.push(cell.className); + cellX.sort(); + console.log(cellX); + }else{ + cellO.push(cell.className); + cellO.sort(); + console.log(cellO); + } + winGame(cellX,symbol); + if(vict>0){ + cells.forEach(cell =>{ + cell.removeEventListener('click',instantiate); + }) + } +} + diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css new file mode 100644 index 0000000..3a3d84b --- /dev/null +++ b/tic-tac-toe/styles.css @@ -0,0 +1,42 @@ +#canva{ + width: 500px; + height: 500px; + border: solid 2px black; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + justify-self: center; +} + +.title{ + font-size: 40px; + letter-spacing: 8px; + margin: 40px 0px; + font-weight: bolder; + font-family: 'Times New Roman', Times, serif; + text-align: center; +} + +.bottom{ + justify-items: center; + margin-top: 60px; +} + +#box{ + border: solid 2px black; + font-size: 80px; + text-align: center; + line-height: 160px; +} + +#player{ + font-size: 40px;; +} + +button{ + margin-top: 20px; + width: 200px; + height: 50px; + font-size: 30px; + background-color: greenyellow; +} \ No newline at end of file From 1ccbf0042496436dded4e192ec235259d3375696 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Wed, 12 Mar 2025 17:35:20 +0530 Subject: [PATCH 6/7] Updated the code --- tic-tac-toe/index.html | 20 +++--- tic-tac-toe/script.js | 137 +++++++++++++++++++++-------------------- tic-tac-toe/styles.css | 10 ++- 3 files changed, 88 insertions(+), 79 deletions(-) diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html index 2434b61..1a7101f 100644 --- a/tic-tac-toe/index.html +++ b/tic-tac-toe/index.html @@ -12,18 +12,18 @@
-
-
-
-
-
-
-
-
-
- +
+
+
+
+
+
+
+
+
+

*Click on any box and then press enter to start

diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js index c8214f8..ccafa4a 100644 --- a/tic-tac-toe/script.js +++ b/tic-tac-toe/script.js @@ -1,94 +1,95 @@ -const cells = document.querySelectorAll("#box"); +const cells = document.querySelectorAll(".box"); // Change to class selector const chance = document.querySelector("#player"); const newButton = document.querySelector("#newGame"); -let vict=0; +let vict = 0; let symbol; - let cellX = []; let cellO = []; - -let options = []; +let currentIndex = 0; // Keep track of keyboard navigation const winningPossibilities = [ - ['0','1','2'], - ['3','4','5'], - ['6','7','8'], - ['0','3','6'], - ['1','4','7'], - ['2','5','8'], - ['0','4','8'], - ['2','4','6'], -] - -newButton.addEventListener('click',startGame); - -function startGame(){ - cells.forEach(cell=>{ - cell.innerHTML=''; - }) - chance.innerHTML=''; - symbol='X'; - cellO=[]; - cellX=[] - vict=0; - selectBox(); -} + ['0', '1', '2'], + ['3', '4', '5'], + ['6', '7', '8'], + ['0', '3', '6'], + ['1', '4', '7'], + ['2', '5', '8'], + ['0', '4', '8'], + ['2', '4', '6'], +]; +newButton.addEventListener("click", startGame); +document.addEventListener("keydown", handleKeyboardNavigation); -function selectBox(){ - cells.forEach(cell=>{ - cell.addEventListener('click',instantiate); - }) +function startGame() { + cells.forEach(cell => { + cell.innerHTML = ""; + }); + chance.innerHTML = ""; + symbol = "X"; + cellO = []; + cellX = []; + vict = 0; + currentIndex = 0; + highlightCell(); } -function changePlayer(){ - if(symbol=='O'){ - symbol='X'; - }else{ - symbol='O'; - } - chance.innerHTML=`${symbol} 's chance to play`; +function changePlayer() { + symbol = symbol === "O" ? "X" : "O"; + chance.innerHTML = `${symbol}'s turn`; } - - -function winGame(cells, player) { - for (let i = 0; i < winningPossibilities.length; i++) { - if ((hasSubset(cells,winningPossibilities))) { - chance.innerHTML = `${player} has won the game.`; - // Stop further execution after a win - vict+=1; - return; - } +function winGame(playerCells, player) { + if (winningPossibilities.some(pattern => pattern.every(index => playerCells.includes(index)))) { + chance.innerHTML = `${player} has won the game!`; + vict = 1; + return; } changePlayer(); } -function hasSubset(x,groups){ - const xSet = new Set(x); - return groups.some(group => group.every(num => xSet.has(num))); -} - -function instantiate(event){ +function instantiate(event) { let cell = event.target; - if (cell.innerHTML !== "") return; // Prevent overwriting - cell.innerHTML=symbol; - if(symbol == 'X'){ - cellX.push(cell.className); + if (cell.innerHTML !== "" || vict > 0) return; // Prevent overwriting or playing after a win + + let index = cell.getAttribute("data-index"); // Get the cell index + + cell.innerHTML = symbol; + if (symbol === "X") { + cellX.push(index); cellX.sort(); - console.log(cellX); - }else{ - cellO.push(cell.className); + } else { + cellO.push(index); cellO.sort(); - console.log(cellO); } - winGame(cellX,symbol); - if(vict>0){ - cells.forEach(cell =>{ - cell.removeEventListener('click',instantiate); - }) + + winGame(symbol === "X" ? cellX : cellO, symbol); +} + +function handleKeyboardNavigation(event) { + if (vict > 0) return; // Stop if the game is over + + const rowSize = 3; + if (event.key === "ArrowRight") { + currentIndex = (currentIndex + 1) % cells.length; + } else if (event.key === "ArrowLeft") { + currentIndex = (currentIndex - 1 + cells.length) % cells.length; + } else if (event.key === "ArrowDown") { + currentIndex = (currentIndex + rowSize) % cells.length; + } else if (event.key === "ArrowUp") { + currentIndex = (currentIndex - rowSize + cells.length) % cells.length; + } else if (event.key === "Enter") { + instantiate({ target: cells[currentIndex] }); // Fix: Ensure Enter key works } + + highlightCell(); +} + +function highlightCell() { + cells.forEach(cell => cell.classList.remove("highlight")); + cells[currentIndex].classList.add("highlight"); } + diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css index 3a3d84b..12b79e5 100644 --- a/tic-tac-toe/styles.css +++ b/tic-tac-toe/styles.css @@ -8,6 +8,14 @@ justify-self: center; } +.highlight{ + border: solid 2px black; + font-size: 80px; + text-align: center; + line-height: 160px; + background-color: rgb(4, 238, 238); +} + .title{ font-size: 40px; letter-spacing: 8px; @@ -22,7 +30,7 @@ margin-top: 60px; } -#box{ +.box{ border: solid 2px black; font-size: 80px; text-align: center; From c837ca9f330c07eccbe117ccbd8f60f234098230 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Sat, 5 Apr 2025 16:59:17 +0530 Subject: [PATCH 7/7] Made changes --- tic-tac-toe/index.html | 1 - tic-tac-toe/script.js | 26 +++++++++++++++++++------- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html index 1a7101f..0af5e5c 100644 --- a/tic-tac-toe/index.html +++ b/tic-tac-toe/index.html @@ -23,7 +23,6 @@
-

*Click on any box and then press enter to start

diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js index ccafa4a..28521a7 100644 --- a/tic-tac-toe/script.js +++ b/tic-tac-toe/script.js @@ -1,4 +1,4 @@ -const cells = document.querySelectorAll(".box"); // Change to class selector +const cells = document.querySelectorAll(".box"); const chance = document.querySelector("#player"); const newButton = document.querySelector("#newGame"); @@ -22,17 +22,23 @@ const winningPossibilities = [ newButton.addEventListener("click", startGame); document.addEventListener("keydown", handleKeyboardNavigation); + function startGame() { - cells.forEach(cell => { - cell.innerHTML = ""; - }); - chance.innerHTML = ""; - symbol = "X"; + newButton.blur(); + symbol = "O"; cellO = []; cellX = []; vict = 0; currentIndex = 0; - highlightCell(); + chance.innerHTML = `${symbol}'s turn`; + + cells.forEach(cell => { + cell.innerHTML = ""; + cell.classList.remove("highlight"); + cell.removeEventListener("click", instantiate); + cell.addEventListener("click", instantiate); + }); + } @@ -47,6 +53,11 @@ function winGame(playerCells, player) { vict = 1; return; } + if (cellX.length + cellO.length === 9) { + chance.innerHTML = "It's a draw!"; + vict = 1; + return; + } changePlayer(); } @@ -93,3 +104,4 @@ function highlightCell() { } +