javascript while循环不执行内部函数

我是一名新学生，如果我的格式设置被关闭，我很抱歉。我的while循环有一个问题，没有执行循环中的主要函数。我不确定我做错了什么。我正在制作一个以马里奥为主题的tic-tac-toe游戏，有相当数量的游戏正在运行，但是我的while循环会自动运行，直到它达到'I=9'，它似乎也会将我的marioCount增加到9，但我的目标是当我点击一个新的框时，让它在不同的类之间交替运行，但这不起作用。我总是喜欢鲍瑟。如果可能的话，请帮助我，对我放松点，我是初学者。提前谢谢

$(document).ready(function() {
  var $quare = $('.square');
  var $brd = $('.board');
  var $tart = $('#start');
  var $bmario = $('#mario');
  var $bbowser = $('#bowser');
  var $cchar = $('#cchar');
  var clickedSquare = 0;
  var bowserCount = 0;
  marioCount = 0;

  $cchar.hide();
  $bmario.hide();
  $bbowser.hide();
  $brd.hide();

  $tart.on('click', function revealButton() {
    $bmario.show();
    $bbowser.show();
    $cchar.show();

  })

  $bmario.on('click', function() {
    $brd.show();
    $bbowser.hide();
    var i = 0
    while (i < 9) {

      if(marioCount % 2 === 0) {
        $quare.on('click', function() {
          $(this).addClass('smario clicked');
        })
      } else {
        $quare.on('click', function() {
          $(this).addClass('sbowser clicked');
        })
      }
      marioCount++
      i++
    }

  })
})

---

将“<9”替换为“<10”，因为你本质上是说“在我8岁或更少的时候做这件事，但不是9岁”，而不是你想要的，“在我9岁或更少的时候做这件事，但不是10岁。”

这里不需要循环。看看这个代码

 $(".square").on("click", function () {
   if (!$(this).hasClass("clicked")) { // do something if this square hasn't been clicked
     if (marioCount % 2 === 0) {
       $(this).addClass("smario clicked");
     } else {
       $(this).addClass('sbowser clicked');
     }

     marioCount++;
  }
});

---

请提供相应的HTML&CSS.marioCount%2==0将此更改为marioCount%2==0。好的，我将添加HTML/CSSnow@Dr.Stitch-为什么<代码>=是有效的运算符。循环代码没有意义。在每次迭代中（所以9次），它会向每个方块添加一个额外的点击处理程序，因为

$quare

是一个包含所有方块的jquery对象。如果你想一次处理每个方块，请使用

$quare.each（）

。Tic Tac Toe通常是3乘3，所以他想要9或更少。@Dr.Stich，我知道我不应该说“我假设”。我想通过说whie（I<9），它将继续循环，直到达到9，然后它将停止，因为9>I。而且，这不是我面临的大问题。我的while循环在没有玩家交互的情况下循环。非常感谢。明亮的

html {
  background: url(http://i1.kym-cdn.com/photos/images/original/000/939/881/cf4.png) no-repeat center center fixed;
  background-size: cover;
}
#title {
  text-align: center;
  color: yellow;
  font-size: 50px;
}

#startDiv {
  text-align: center;
  margin: 0 auto;
}

#choose {
  text-align: center;
  margin: 0 auto;
}

#mario {
  background: url("../images/Mario_super_cool.jpg");
  background-size: cover;
  height: 35px;
  width: 35px;
}

#bowser {
  background: url("../images/Bowser.jpg");
  background-size: cover;
  height: 35px;
  width: 35px;
}

#cchar {
  color: yellow;
  text-align: center;
  font-size: 30px;
}

#start {
  text-align: center;
  margin: 0 auto;
  border-radius: 15px;
  color: yellow;
  font-size: 35px;
}

.smario {
  background: url("../images/Mario_super_cool.jpg");
  background-size: cover;
  height: 125px;
  width: 125px;
}

.sbowser {
  background: url("../images/Bowser.jpg");
  background-size: cover;
  height: 125px;
  width: 125px;
}

.board {
}

table {
  margin: auto;
  background: rgba(171, 39, 7, 0.5);
}



.square {
  float: left;
  font-family: 'Londrina Shadow', cursive;
  font-size: 50px;
  height: 125px;
  margin: 0px;
  text-align: center;
  vertical-align: middle;
  width: 125px;
}

.vmiddle {
  border-left: 5px solid yellow;
  border-right: 5px solid yellow;
  opacity: 1.4;
}

.hmiddle {
  border-top: 5px solid yellow;
  border-bottom: 5px solid yellow;
}

 $(".square").on("click", function () {
   if (!$(this).hasClass("clicked")) { // do something if this square hasn't been clicked
     if (marioCount % 2 === 0) {
       $(this).addClass("smario clicked");
     } else {
       $(this).addClass('sbowser clicked');
     }

     marioCount++;
  }
});