2

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 просто не работает. Не могу понять почему

5
  • Не переживайте. Функция case1 тоже "не работает". Что, кстати, это значит - "не работает"?
    – user176262
    14 сен 2018 в 17:25
  • Вопрос задан хорошо: +1. В нем есть все, чтобы Вам самим на него ответить. Особенно - ошибки в консоли.
    – user176262
    14 сен 2018 в 17:28
  • Я имею ввиду что case2 не высчитывает крестики или нолики по вертикали. И про case1. Да, я осознал свою ошибку, изменил код, теперь case1 высчитывает по горизонтали.
    – Steg_Brind
    14 сен 2018 в 17:28
  • Нет, не высчитывает. Вы нажимали кнопку "Выполнить код" в вопросе? Как Вам нравятся ошибки в консоли?
    – user176262
    14 сен 2018 в 17:31
  • Попробуйте или 3 крестика или 3 нолика по горизонтали выстроить. Я знаю что ошибки выскакивают. Просто цикл по нажатию какого-либо квадратика(button) проверяет все 9 квадратиков и сравнивает их по условию
    – Steg_Brind
    14 сен 2018 в 17:39

1 ответ 1

1

С минимумом изменений первоначального кода:

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.