Question

我是学生和新人，所以如果我的格式化已关闭，我很抱歉。我的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++
    }

  })
})

这是我游戏的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mario Tic Tac Toe</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div id="allBody">
      <div id="header">
        <div id="title">Tic Tac Toe</div>
      </div>
      <div id="startDiv">
        <button class="button" id="start">Start Game</button>
      </div>
      <div id="cchar">Pick Your Character</div>
      <div id="choose">
        <button class="button" id="mario"></button>
        <button class="button" id="bowser"></button>
      </div>
      <div class="board">
        <table class="tabl">
<!--           <tbody id="tbody"> -->
            <tr id="row1">
              <td class="square " id="square1"></td>
              <td class="square vmiddle" id="square2"></td>
              <td class="square" id="square3"></td>
            </tr>
            <tr id="row2">
              <td class="square hmiddle" id="square4"></td>
              <td class="square vmiddle hmiddle" id="square5"></td>
              <td class="square hmiddle" id="square6"></td>
            </tr>
            <tr id="row3">
              <td class="square" id="square7"></td>
              <td class="square vmiddle" id="square8"></td>
              <td class="square" id="square9"></td>
            </tr>
<!--           </tbody> -->
        </table>

        <!-- Game Here -->
      </div>
      <div id="info">...</div>
    </div>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

这是游戏的CSS

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;
}

Answer 1

将“＆lt; 9”替换为“＆lt; 10”，因为你基本上是说“当我8岁或更少，但不是9”时这样做，而不是你想要的，“当我9岁时这样做或者少，但不是10“。

Answer 2

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

 $(".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++;
  }
});

javascript while while循环不执行

2 个答案: