JavaScript while 循环不执行内部功能

javascript while loop not performing functions inside

本文关键字：内部 功能 执行 while 循环 JavaScript      更新时间：2023-09-26

我是学生和新人，所以如果我的格式关闭，我很抱歉。 我的 while 循环无法执行循环内的主要功能时遇到问题。 我不确定我做错了什么。 我正在制作一个以马里奥为主题的井字游戏，并且相当多的工作正在工作，但我的 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;
}

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

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

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

相关文章：