主页 / 问题 / 881396
Accepted
Steg_Brind
Asked:2020-09-15 00:12:09 +0000 UTC2020-09-15 00:12:09 +0000 UTC

循环工作不正常。JS

  • 772

var flag = 1;
//var w_f = document.getElementById("width_of_field").value;
//var h_f = document.getElementById("height_of_field").value;
var w_f = 3;
var h_f = 3;
var acr1 = w_f * h_f;
function gameover(fr, sec, thr) {
  $("#go").css('display', 'block');
  $("#" + fr).css('background-color', 'red');
  $("#" + sec).css('background-color', 'red');
  $("#" + thr).css('background-color', 'red')
}

function case1() {
  var attemps_of_one_string = Math.floor(w_f / 3 * 2);
  //var attemps = 0;
  for (var d = 0; d < acr1; d++) {
    /*if (attemps === attemps_of_one_string) {
      d = d + 2;
      attemps = 0;
    }
    attemps++;*/
    var first = document.getElementById(String(d + 1)).innerHTML;
    var second = document.getElementById(String(d + 2)).innerHTML;
    var third = document.getElementById(String(d + 3)).innerHTML;
    if (first == second && first == third && first != "&nbsp;") {
      if (first == "X") {
        document.getElementById("live").innerHTML = "КРЕСТИКS WIN";
        gameover(d + 1, d + 2, d + 3)
      } else {
        document.getElementById("live").innerHTML = "НОЛИКS WIN";
        gameover(d + 1, d + 2, d + 3)
      }
    }
  }
}

function case2() {
  for (var k = 0; k < acr1; k++) {
    var first = document.getElementById(String(k + 1)).innerHTML;
    var second = document.getElementById(String(k + w_f + 1)).innerHTML;
    var third = document.getElementById(String(k + (w_f * 2) + 1)).innerHTML;
    if (first == second && first == third && first != "&nbsp;") {
      if (first == "X") {
        document.getElementById("live").innerHTML = "КРЕСТИКS WIN";
        gameover(k + 1, k + w_f + 1, k + (w_f * 2) + 1)
      } else {
        document.getElementById("live").innerHTML = "НОЛИКS WIN";
        gameover(k + 1, k + w_f + 1, k + (w_f * 2) + 1)
      }
    }
  }
}

function x_o(num) {
  if (flag === 1) {
    flag = 0;
    document.getElementById(num).innerHTML = "X";
    document.getElementById("live").innerHTML = "<b>НОЛИК</b>";
    $("#" + num).attr('disabled', "disabled");
    case1();
    case2()
  } else {
    flag = 1;
    document.getElementById(num).innerHTML = "O";
    document.getElementById("live").innerHTML = "<b>КРЕСТИК</b>";
    $("#" + num).attr('disabled', "disabled");
    case1();
    case2()
  }
}
html,
body {
  margin: 0;
  padding: 0;
  background: #878787
}

.container {
  max-width: 423px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center
}

.sqr {
  text-align: center;
  line-height: 200%;
  background-color: transparent;
  border: black solid 0.5px;
  width: 33.33333333333333%;
  font-family: "arial";
  font-size: 10vh
}

.sqr:disabled {
  color: black
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>КРЕСТИК И НОЛИК</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

  <body>
    <div class="container">
      <button class="sqr" id="1" onclick="x_o(1)">&nbsp;</button>
      <button class="sqr" id="2" onclick="x_o(2)">&nbsp;</button>
      <button class="sqr" id="3" onclick="x_o(3)">&nbsp;</button>
      <button class="sqr" id="4" onclick="x_o(4)">&nbsp;</button>
      <button class="sqr" id="5" onclick="x_o(5)">&nbsp;</button>
      <button class="sqr" id="6" onclick="x_o(6)">&nbsp;</button>
      <button class="sqr" id="7" onclick="x_o(7)">&nbsp;</button>
      <button class="sqr" id="8" onclick="x_o(8)">&nbsp;</button>
      <button class="sqr" id="9" onclick="x_o(9)">&nbsp;</button>
      <p id="live" style="display: block; margin-left: 43%"><b>КРЕСТИК</b></p>
      <p id="go" style="cursor: pointer; display: none; margin-top: 10%; font-family: 'arial'" onclick="$(this).hide(50), $('button').text('&#160').css('background-color', 'transparent').attr('disabled', false), $('#live').text('КРЕСТИК'), flag=1"><b>ПОПРОБОВАТЬ СНОВА</b></p>
    </div>
  </body </html>

我正在尝试创建一个三分球游戏。我第一次想做 3 对 3 场。然后让用户可以选择字段的宽度和高度。但现在不是这样。case1 函数（它计算水平边距并尝试选择获胜者）正常工作。case2 函数应该做同样的事情，只是垂直计算字段。所以case2根本行不通。不知道为什么

javascript

1 个回答

  1. Best Answer

    对原始代码进行最少的更改：

    var flag = 1;
//var w_f = document.getElementById("width_of_field").value;
//var h_f = document.getElementById("height_of_field").value;
var w_f = 3;
var h_f = 3;
var acr1 = w_f * h_f;

function gameover(fr, sec, thr) {
  $("#go").css('display', 'block');
  $("#" + fr).css('background-color', 'red');
  $("#" + sec).css('background-color', 'red');
  $("#" + thr).css('background-color', 'red')
}

function case1() {
  for (var i = 1; i <= 3; i++) {
    var first = document.getElementById(i + "_1").innerHTML;
    var second = document.getElementById(i + "_2").innerHTML;
    var third = document.getElementById(i + "_3").innerHTML;
    if (first == second && first == third && first != "&nbsp;") {
      document.getElementById("live").innerHTML =
        (first == "X") ? "КРЕСТИКS WIN" : "НОЛИКS WIN";
      gameover(i + "_1", i + "_2", i + "_3");
      break;
    }
  }
}

function case2() {
  for (var j = 1; j <= 3; j++) {
    var first = document.getElementById("1_" + j).innerHTML;
    var second = document.getElementById("2_" + j).innerHTML;
    var third = document.getElementById("3_" + j).innerHTML;
    if (first == second && first == third && first != "&nbsp;") {
      document.getElementById("live").innerHTML =
        (first == "X") ? "КРЕСТИКS WIN" : "НОЛИКS WIN";
      gameover("1_" + j, "2_" + j, "3_" + j);
      break;
    }
  }
}

function x_o(num) {
  if (flag === 1) {
    flag = 0;
    document.getElementById(num).innerHTML = "X";
    document.getElementById("live").innerHTML = "<b>НОЛИК</b>";
    $("#" + num).attr('disabled', "disabled");
    case1();
    case2();
  } else {
    flag = 1;
    document.getElementById(num).innerHTML = "O";
    document.getElementById("live").innerHTML = "<b>КРЕСТИК</b>";
    $("#" + num).attr('disabled', "disabled");
    case1();
    case2();
  }
}
    html,
body {
  margin: 0;
  padding: 0;
  background: #878787
}

.container {
  max-width: 423px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center
}

.sqr {
  text-align: center;
  line-height: 200%;
  background-color: transparent;
  border: black solid 0.5px;
  width: 33.33333333333333%;
  font-family: "arial";
  font-size: 10vh
}

.sqr:disabled {
  color: black
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>КРЕСТИК И НОЛИК</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

  <body>
    <div class="container">
      <button class="sqr" id="1_1" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="1_2" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="1_3" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="2_1" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="2_2" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="2_3" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="3_1" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="3_2" onclick="x_o(this.id)">&nbsp;</button>
      <button class="sqr" id="3_3" onclick="x_o(this.id)">&nbsp;</button>
      <p id="live" style="display: block; margin-left: 43%"><b>КРЕСТИК</b></p>
      <p id="go" style="cursor: pointer; display: none; margin-top: 10%; font-family: 'arial'" onclick="$(this).hide(50), $('button').text('&#160').css('background-color', 'transparent').attr('disabled', false), $('#live').text('КРЕСТИК'), flag=1"><b>ПОПРОБОВАТЬ СНОВА</b></p>
    </div>
  </body </html>

    • 1

相关问题