title: While loop starts without requirements
body: <p>This is for tictactoe project . I don't know for how many days I'm trying to fix this it seems like I am making it worse everytime I try. It was working without AI making the moves for the human player. I tried for loop, swicth statement, while loop to write every AI code from stratch to catch what I'm missing. So far, It's only worse than before. At least the code is way more readable. I'd be very happy if any of you guys hinted me about the problem.</p>
  
  <hr>
  
  See the Pen <a href="https://codepen.io/yanekyuk/pen/vZKaJw/" rel="nofollow noreferrer">Ninth Objective - Build a Tic Tac Toe Game</a> by Yanek Yuk (<a href="https://codepen.io/yanekyuk" rel="nofollow noreferrer">@yanekyuk</a>) on <a href="https://codepen.io" rel="nofollow noreferrer">CodePen</a>.</p>
  
  
  
  <hr>
  
  <pre><code>&lt;body&gt;
    &lt;div id="app"&gt;
      &lt;div class="ttt-header" id="players"&gt;
          &lt;div class="active"&gt;{{ player[0].name + " | " + player[0].score }}&lt;/div&gt;
          &lt;div &gt; {{ player[1].name + " | " + player[1].score }} &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ttt-body" v-if="gameStarted"&gt;
          &lt;div class="btn-row"&gt;
              &lt;div @click="playOn(1)" id="1" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(2)" id="2" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(3)" id="3" class="btn"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-row"&gt;
              &lt;div @click="playOn(4)" id="4" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(5)" id="5" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(6)" id="6" class="btn"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-row"&gt;
              &lt;div @click="playOn(7)" id="7" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(8)" id="8" class="btn"&gt;&lt;/div&gt;
              &lt;div @click="playOn(9)" id="9" class="btn"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ttt-body ttt-config" v-else&gt;
          &lt;div class="btn-row"&gt;
              &lt;div class="btn"&gt;&lt;p&gt;O&lt;/p&gt;&lt;/div&gt;
              &lt;div @click="changeType()" class="btn"&gt;&lt;a&gt;&lt;p&gt;X&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-row"&gt;           
              &lt;div class="btn" style="height: 70px"&gt;&lt;input type="text" v-model="player[0].name"/&gt;&lt;/div&gt;
              &lt;div class="btn" style="height: 70px"&gt;&lt;input type="text" v-model="player[1].name"/&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-row"&gt;
              &lt;div @click="startGame()" class="btn btn-block"&gt;&lt;a&gt;START&lt;/a&gt;&lt;br&gt;&lt;a&gt;{{ player[0].name + " vs " + player[1].name }}&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
      &lt;div class="ttt-footer"&gt;
          &lt;div @click="reStart()"&gt;RESTART&lt;/div&gt;
          &lt;div @click="resetAll()"&gt;RESET ALL&lt;/div&gt;        
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>new Vue({
      el: "#app",
      data: {
          win: [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]],
          player: [
              {
                  type: 0,
                  name: "Human",
                  moves: [],
                  score: 0,
              },
              {
                  type: 1,
                  name: "Computer",
                  moves: [],
                  score: 0,
              }
          ],
          turn: 0,
          sym: ["O", "X"],
          gameStarted: false,
          setFinished: false,
          moves: [1,2,3,4,5,6,7,8,9],
          timeOut: null,
          aiTurn: false,
      },
      methods: {
          changeType() { // Change the second player's type to AI to Human 
              this.player[1].type === 0 ? this.player[1].type = 1 : this.player[1].type = 0;
              this.player[1].type === 0 ? this.player[1].name = "Human" : this.player[1].name = "Computer";
          },
          resetAll() {
              $(".btn").empty();
              for (var i = 0; i &lt; this.player.length; i++) {
                  this.player[i].name = "Human";
                  this.player[i].moves = [];
                  this.player[i].score = 0;
              }
              this.turn = 0;
              this.moves = [1,2,3,4,5,6,7,8,9];
              this.gameStarted = false;
          },
          delay(f,t) {
              this.timeOut = window.setTimeout(f,t);
          },
          reStart() {
              $(".btn").empty().removeClass("end").removeClass("win");
              this.turn === 0 ? this.turn = 1 : this.turn = 0;
              for (var i = 0; i &lt; this.player.length; i++) {
                  this.player[i].moves = [];
              }
              this.moves = [1,2,3,4,5,6,7,8,9];
              this.setFinished = false;
          },
          playOn(n) {
              if (this.gameStarted === true &amp;&amp; $('#' + n).children().length === 0) {
  
                      this.player[this.turn].moves.push(n);
                      $("#"+n).html("&lt;p class='animated pulse'&gt;"+this.sym[this.turn]+"&lt;/p&gt;");
                      this.moves.splice(this.moves.indexOf(n), 1);
  
                      this.checkMoves(this.turn);
  
                      if (this.moves.length &lt; 1) {
                          this.setFinished = true;
                      }
  
                      if (!this.setFinished) {
                          this.turn === 0 ? this.turn = 1 : this.turn = 0;
                      } else {
                          $(".btn").addClass("end");
                          this.delay(this.reStart, 750);
                      }
              }
          },
          checkMoves(p) {
              for (var j = 0; j &lt; this.win.length; j++) {
                  if (this.player[p].moves.indexOf(this.win[j][0]) !== -1) {
                      if (this.player[p].moves.indexOf(this.win[j][1]) !== -1) {
                          if (this.player[p].moves.indexOf(this.win[j][2]) !== -1) {
                              $("#" + this.win[j][0] + ",#" + this.win[j][1] + ",#" + this.win[j][2]).addClass("win");
                              this.player[p].score += 1;
                              this.setFinished = true;
                          } 
                      }
                  }
              }
          },
          startGame() {
              this.gameStarted = true;
          }
      },
      watch: {
          turn: function() {
              $("#players").children().toggleClass("active"); // This is for showing whose turn it is.
              if (this.player[1].type === 1) {
                  this.turn === 0 ? this.aiTurn = false : this.aiTurn = true;
              }
          },
          aiTurn: function(ai) {
              while (ai) {
                  // Original moves length is 9, in below it means that it's the AI's first move whether it's first to go or not
                  if (this.moves.length &gt;= 8) {
                      // Always Start playing on center if possible
                      if (this.moves.indexOf(5) !== -1) {
                          this.playOn(5); break;
                      } else { // If occupied play on one of the corners
                          var movs = [1,3,7,9];
                          var random = Math.floor(Math.random() * movs.length);
                          this.playOn(movs[random]); break;
                      }
                      // On the below, it means that AI started the game and this is its second turn. 
                  } else if (this.moves.length === 7) {
                      // This where I decided to give the human player a chance by randomizing AI's behaviour
                      var rand = Math.floor(Math.random() * this.moves.length);
                      this.playOn(this.moves[rand]); break;
                      //  After this, AI starts testing every move there is.
                  } else if (this.moves.length &lt; 7) {
                      // Scanning all the winning combinations
                      for (var w = 0; w &lt; this.win.length; w++) {
                          // Shift &amp; Push three times try all permutations available in the combination
                          for (var p = 0; p &lt; 3; p++) {
                              var shifted = this.win[w].shift();
                              this.win[w].push(shifted);
                              // Checking if the AI moves has the first value of a any mixed up winning combination
                              if (this.player[1].moves.indexOf(this.win[w][0]) !== -1) {
                                  // Checking if it has the second value and whether the move is available
                                  if (this.player[1].moves.indexOf(this.win[w][1]) !== -1 &amp;&amp; this.moves.indexOf(this.win[w][2]) !== -1) {
                                      this.delay(this.playOn(this.win[w][2]),1000); p = 3; break; // Play on the third value ; Break the loop;
                                  }
                                  // Checking if the player moves has the first value of a any mixed up winning combination
                              } else if (this.player[0].moves.indexOf(this.win[w][0]) !== -1) {
                                  // Checking if it has the second value and whether the move is available
                                  if (this.player[0].moves.indexOf(this.win[w][1]) !== -1 &amp;&amp; this.moves.indexOf(this.win[w][2]) !== -1) {
                                      this.delay(this.playOn(this.win[w][2]),1000); p = 3; break; // Play on the third value ; Break the loop;
                                  }
                              }
                          }
                      }
                  }
  
  
  
  
              ai = false;
              }
          }
      }
  });
  </code></pre>
  
  <hr>
  
  <p>Does anybody have any idea what's causing the AI make the move instead of human player?</p>