CODEWITHSUNDEEP
javascript
user15259537
user15259537

Reputation:

JavaScript Tic Tac Toe game not making player win

I have been working on making a JavaScript Tic Tac Toe game. There's a slight problem with it. In theory it feels it might work but it isn't. So, the problem is, while playing the game if somebody wins then I am not able to detect that win. What I have done is made an array for all Tic Tac Toe game cells and and array for all winning pairs. Now I am using a for loop to go through them and see if a winning pair is formed but I isn't working no matter what I do. I will be really glad if checkout https://codepen.io/Dragonsoup/pen/RwoBBaz and find the problem. Really thankful for you reading my question. Have a good day!

let turn = 1;

function play() {
   const box = []
   for (i = 0; i < 9; i++) {
      box[i] = document.querySelector('.b' + i).value
   }
   const winPairs = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
   ]
   for (i = 0; i < winPairs.length; i++) {
      for (j = 0; j <= 2; j++) {
         if (box[winPairs[i][j]] === "X") {
            e++
         }
         if (e === 3) {
            document.getElementById('alert').innerHTML = "Player X won";
            disableAll();
            winColor(winPairs[i])
         }
      }
   }
   for (i = 0; i < winPairs.length; i++) {
      for (j = 0; j <= 2; j++) {
         if (box[winPairs[i][j]] === "O") {
            e++
         }
         if (e === 3) {
            document.getElementById('alert').innerHTML = "Player O won";
            disableAll();
            winColor(winPairs[i])
         }
      }
   }
   let i;
   for (i = 0; i < 9; i++) {
      if (box[i] === "") {
         break;
      }
   }
   if (i === 9) {
      document.getElementById('alert').innerHTML = 'Match Tie'
      for (i = 0; i < 9; i++) {
         document.querySelector('.b' + i).style.backgroundColor = "#d13232";
      }
   }
}

function disableAll() {
   var cells = document.querySelectorAll(".cell")
   cells.forEach((cell) => {
      cell.disabled = true;
   })
}

function winColor(arr) {
   arr.forEach((cell) => {
      document.querySelector('.b'+cell).style.backgroundColor = "#45d132"
   })
}

function restart() {
   for (i = 0; i < 9; i++){
      document.querySelector('.b' + i).value = "";
      document.querySelector('.b' + i).disabled = true;
      document.querySelector('.b' + i).style.backgroundColor = "";
   }
   document.querySelector('#alert').innerHTML = "Start Playing!";
}

function response(cellNum) {
   if (turn === 1) {
      document.querySelector('.b'+cellNum).value = 'X';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 0;
      document.getElementById('alert').innerHTML = "Player X Turn"
   }
   else {
      document.querySelector('.b'+cellNum).value = 'O';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 1;
      document.getElementById('alert').innerHTML = "Player O Turn"
   }
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: poppins;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

table {
   border-collapse: collapse;
}

input{
   height: 100px;
   width: 100px;
   border: 2px solid black;
   outline: 0;
   cursor: pointer;
   text-align: center;
   font-size: 80px;
   color: black;
   font-weight: 800;
}
input:hover {
   background-color: lightgray;
}

.b0, .b1, .b2 {
   border-top: none;
}

.b6, .b7, .b8 {
   border-bottom: none;
}

.b0, .b3, .b6 {
   border-left: none;
}

.b2, .b5, .b8 {
   border-right: none;
}

#header {
   font-size: 40px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#alert {
   font-size: 30px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#restartBtn {
   background-color: #01a4ff;
   border: 0;
   outline: 0;
   height: 60px;
   width: 100px;
   font-size: 20px;
   font-weight: bolder;
   color: white;
   border-radius: 12px;
   cursor: pointer;
}
#restartBtn:hover{
   background-color: #005c8d;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="index.css">
   <script src="index.js"></script>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tic Tac Toe</title>
</head>
<body>
   
   <table>

      <tr>
         <th colspan="3">
            <h1 id="header">
               Tic Tac Toe
            </h1>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b0" onclick="response('0'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b1" onclick="response('1'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b2" onclick="response('2'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b3" onclick="response('3'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b4" onclick="response('4'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b5" onclick="response('5'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b6" onclick="response('6'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b7" onclick="response('7'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b8" onclick="response('8'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th colspan="3" id="alert">
            Start Playing!
         </th>
      </tr>
      <tr>
         <th colspan="3">
            <button id="restartBtn" onclick="restart()">Restart</button>
         </th>
      </tr>

   </table>

</body>
</html>

Upvotes: 0

Views: 308

Answers (3)

Karthikeyan
Karthikeyan

Reputation: 414

 let turn = 1;
   let playerOne = []
   let playerTwo = []
   const winPairs =  [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
 ];

function play() {
    if (!winPairs.some(pair => {
      if (pair.filter(el => playerOne.includes(el)).length == 3) {
        document.getElementById('alert').innerHTML = "Player X won";
        disableAll();
        winColor(pair);
        return true;
      } else if (pair.filter(el => playerTwo.includes(el)).length == 3) {
        document.getElementById('alert').innerHTML = "Player O won";
        disableAll();
        winColor(pair);
        return true;
      }
    })) {
      if (playerOne.length + playerTwo.length == 9 ) {
        document.getElementById('alert').innerHTML = 'Match Tie'
      }
    }
}

function disableAll() {
   var cells = document.querySelectorAll(".cell")
   cells.forEach((cell) => {
      cell.disabled = true;
   })
}

function winColor(arr) {
   arr.forEach((cell) => {
      document.querySelector('.b'+cell).style.backgroundColor = "#45d132"
   })
}

function restart() {
   for (i = 0; i < 9; i++){
      document.querySelector('.b' + i).value = "";
      document.querySelector('.b' + i).removeAttribute('disabled');
      document.querySelector('.b' + i).style.backgroundColor = "";
   }
   document.querySelector('#alert').innerHTML = "Start Playing!";
   playerOne = []
   playerTwo = []
   
}

function response(cellNum) {
   if (turn === 1) {
      document.querySelector('.b'+cellNum).value = 'X';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 0;
      document.getElementById('alert').innerHTML = "Player X Turn"
      playerOne.push(cellNum);
   }
   else {
      document.querySelector('.b'+cellNum).value = 'O';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 1;
      document.getElementById('alert').innerHTML = "Player O Turn"
      playerTwo.push(cellNum);
   }
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: poppins;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

table {
   border-collapse: collapse;
}

input{
   height: 100px;
   width: 100px;
   border: 2px solid black;
   outline: 0;
   cursor: pointer;
   text-align: center;
   font-size: 80px;
   color: black;
   font-weight: 800;
}
input:hover {
   background-color: lightgray;
}

.b0, .b1, .b2 {
   border-top: none;
}

.b6, .b7, .b8 {
   border-bottom: none;
}

.b0, .b3, .b6 {
   border-left: none;
}

.b2, .b5, .b8 {
   border-right: none;
}

#header {
   font-size: 40px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#alert {
   font-size: 30px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#restartBtn {
   background-color: #01a4ff;
   border: 0;
   outline: 0;
   height: 60px;
   width: 100px;
   font-size: 20px;
   font-weight: bolder;
   color: white;
   border-radius: 12px;
   cursor: pointer;
}
#restartBtn:hover{
   background-color: #005c8d;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="index.css">
   <script src="index.js"></script>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tic Tac Toe</title>
</head>
<body>
   
   <table>

      <tr>
         <th colspan="3">
            <h1 id="header">
               Tic Tac Toe
            </h1>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b0" onclick="response(0); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b1" onclick="response(1); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b2" onclick="response(2); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b3" onclick="response(3); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b4" onclick="response(4); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b5" onclick="response(5); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b6" onclick="response(6); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b7" onclick="response(7); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b8" onclick="response(8); play();" readonly>
         </th>
      </tr>
      <tr>
         <th colspan="3" id="alert">
            Start Playing!
         </th>
      </tr>
      <tr>
         <th colspan="3">
            <button id="restartBtn" onclick="restart()">Restart</button>
         </th>
      </tr>

   </table>

</body>
</html>

Upvotes: 0

Rohit Tingare
Rohit Tingare

Reputation: 21

let turn = 1;

let e=0;
function play() {
   
   const box = []
   for (let i = 0; i < 9; i++) {
      box[i] = document.querySelector('.b' + i).value
   }
   const winPairs = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
   ]
   for ( let i = 0; i < winPairs.length-1 ; i++) {
      for (let j = 0; j <= 2; j++) {
         if (box[winPairs[i][j]] === "X") {
            e++
         }
         if (e === 3) {
            document.getElementById('alert').innerHTML = "Player X won";
            disableAll();
            winColor(winPairs[i])
         }
      }
    e = 0; //made e to zero for checking new condition
   }
   for (let i = 0; i < winPairs.length; i++) {
      for (let j = 0; j <= 2; j++) {
         if (box[winPairs[i][j]] === "O") {
            e++
         }
         if (e === 3) {
            document.getElementById('alert').innerHTML = "Player O won";
            disableAll();
            winColor(winPairs[i])
         }
      }
    e =0; //made e to zero for checking new condition
   }
   
   for (let i = 0; i < 9; i++) {
      if (box[i] === "") {
         break;
      }
   }
   if (i === 9) {
      document.getElementById('alert').innerHTML = 'Match Tie'
      for (let i = 0; i < 9; i++) {
         document.querySelector('.b' + i).style.backgroundColor = "#d13232";
      }
   }
}

function disableAll() {
   var cells = document.querySelectorAll(".cell")
   cells.forEach((cell) => {
      cell.disabled = true;
   })
}

function winColor(arr) {
   arr.forEach((cell) => {
      document.querySelector('.b'+cell).style.backgroundColor = "#45d132"
   })
}

function restart() {
   for (let i = 0; i < 9; i++){
      document.querySelector('.b' + i).value = "";
      document.querySelector('.b' + i).disabled = true;
      document.querySelector('.b' + i).style.backgroundColor = "";
   }
   document.querySelector('#alert').innerHTML = "Start Playing!";
}

function response(cellNum) {
   if (turn === 1) {
      document.querySelector('.b'+cellNum).value = 'X';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 0;
      document.getElementById('alert').innerHTML = "Player O Turn"
   }
   else {
      document.querySelector('.b'+cellNum).value = 'O';
      document.querySelector('.b' + cellNum).disabled = true;
      turn = 1;
      document.getElementById('alert').innerHTML = "Player X Turn"
   }
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: poppins;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

table {
   border-collapse: collapse;
}

input{
   height: 100px;
   width: 100px;
   border: 2px solid black;
   outline: 0;
   cursor: pointer;
   text-align: center;
   font-size: 80px;
   color: black;
   font-weight: 800;
}
input:hover {
   background-color: lightgray;
}

.b0, .b1, .b2 {
   border-top: none;
}

.b6, .b7, .b8 {
   border-bottom: none;
}

.b0, .b3, .b6 {
   border-left: none;
}

.b2, .b5, .b8 {
   border-right: none;
}

#header {
   font-size: 40px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#alert {
   font-size: 30px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#restartBtn {
   background-color: #01a4ff;
   border: 0;
   outline: 0;
   height: 60px;
   width: 100px;
   font-size: 20px;
   font-weight: bolder;
   color: white;
   border-radius: 12px;
   cursor: pointer;
}
#restartBtn:hover{
   background-color: #005c8d;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="index.css">
   <script src="index.js"></script>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tic Tac Toe</title>
</head>
<body>
   
   <table>

      <tr>
         <th colspan="3">
            <h1 id="header">
               Tic Tac Toe
            </h1>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b0" onclick="response('0'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b1" onclick="response('1'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b2" onclick="response('2'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b3" onclick="response('3'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b4" onclick="response('4'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b5" onclick="response('5'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b6" onclick="response('6'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b7" onclick="response('7'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b8" onclick="response('8'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th colspan="3" id="alert">
            Start Playing!
         </th>
      </tr>
      <tr>
         <th colspan="3">
            <button id="restartBtn" onclick="restart()">Restart</button>
         </th>
      </tr>

   </table>

</body>
</html>

Upvotes: 1

Ravikumar
Ravikumar

Reputation: 2205

May be this is not the best solution, but for now seems working fine with less effort.

let turn = 1;

function play() {
    const winPairs = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
   ];

    const allEle = document.querySelectorAll("input.cell");
    //Getting all values into an array
    const filledValues = Array.prototype.map.call(allEle, ele => ele.value);
    let isAnyPlayerWon = false;

    for(const pair of winPairs) {
      const firstIndValue = filledValues[pair[0]];
      //checking all indexes in pair are filled and has same value or not to find the winning pair
      if (firstIndValue && pair.every(pos => filledValues[pos] === firstIndValue)) {
        document.getElementById('alert').innerHTML = `Player ${firstIndValue} won`;
        isAnyPlayerWon = true;
        highlightWinningPair(allEle, pair);
        // break the loop for further checks if we already found the winner
        break;
      }
    }
    
    // checking for Tie, if no play won and every box has value
    if (!isAnyPlayerWon && filledValues.every(value => value)) {
        document.getElementById('alert').innerHTML = 'Match Tie';
        disableAll(allEle);
    }
}

function highlightWinningPair(allEle, wonPair) {
    Array.prototype.forEach.call(allEle, (ele, index) => {
        if (wonPair.includes(index)) {
          ele.style.color = "#008000";
        }
        ele.disabled = true;
    });
}

function disableAll(allEle) {
    Array.prototype.forEach.call(allEle, ele => {
        ele.style.backgroundColor = "#d13232"
        ele.disabled = true;
    });
}

function winColor(arr) {
    arr.forEach((cell) => {
        document.querySelector('.b' + cell).style.backgroundColor = "#45d132"
    })
}

function restart() {
    const allEle = document.querySelectorAll("input.cell");
    Array.prototype.forEach.call(allEle, ele => {
        ele.value = "";
        ele.disabled = false;
        ele.style.color = "";
        ele.style.backgroundColor = "";
    });
    document.querySelector('#alert').innerHTML = "Start Playing!";
}

function response(cellNum) {
    if (turn === 1) {
        document.querySelector('.b' + cellNum).value = 'X';
        document.querySelector('.b' + cellNum).disabled = true;
        turn = 0;
        document.getElementById('alert').innerHTML = "Player O Turn"
    } else {
        document.querySelector('.b' + cellNum).value = 'O';
        document.querySelector('.b' + cellNum).disabled = true;
        turn = 1;
        document.getElementById('alert').innerHTML = "Player X Turn"
    }
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: poppins;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

table {
   border-collapse: collapse;
}

input{
   height: 100px;
   width: 100px;
   border: 2px solid black;
   outline: 0;
   cursor: pointer;
   text-align: center;
   font-size: 80px;
   color: black;
   font-weight: 800;
}
input:hover:not(:disabled) {
   background-color: lightgray;
}

.b0, .b1, .b2 {
   border-top: none;
}

.b6, .b7, .b8 {
   border-bottom: none;
}

.b0, .b3, .b6 {
   border-left: none;
}

.b2, .b5, .b8 {
   border-right: none;
}

#header {
   font-size: 40px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#alert {
   font-size: 30px;
   text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

#restartBtn {
   background-color: #01a4ff;
   border: 0;
   outline: 0;
   height: 60px;
   width: 100px;
   font-size: 20px;
   font-weight: bolder;
   color: white;
   border-radius: 12px;
   cursor: pointer;
}
#restartBtn:hover{
   background-color: #005c8d;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="index.css">
   <script src="index.js"></script>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tic Tac Toe</title>
</head>
<body>
   
   <table>

      <tr>
         <th colspan="3">
            <h1 id="header">
               Tic Tac Toe
            </h1>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b0" onclick="response('0'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b1" onclick="response('1'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b2" onclick="response('2'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b3" onclick="response('3'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b4" onclick="response('4'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b5" onclick="response('5'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th>
            <input type="text" class="cell b6" onclick="response('6'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b7" onclick="response('7'); play();" readonly>
         </th>
         <th>
            <input type="text" class="cell b8" onclick="response('8'); play();" readonly>
         </th>
      </tr>
      <tr>
         <th colspan="3" id="alert">
            Start Playing!
         </th>
      </tr>
      <tr>
         <th colspan="3">
            <button id="restartBtn" onclick="restart()">Restart</button>
         </th>
      </tr>

   </table>

</body>
</html>

Upvotes: 1

Related Questions