2

Есть 9 блоков для расстановки крестиков и ноликов, при расстановке добавляется класс "х" (крестик) или "о"(нолик). mainBox - родитель. Функция, которая проверяет выигрыш:

function check() {

    if (mainBox.children[0].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if (mainBox.children[1].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[7].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if (mainBox.children[2].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if (mainBox.children[0].classList.contains("x") && mainBox.children[3].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if (mainBox.children[0].classList.contains("x") && mainBox.children[1].classList.contains("x") && mainBox.children[2].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if(mainBox.children[3].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[5].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if (mainBox.children[6].classList.contains("x") && mainBox.children[7].classList.contains("x") &&
        mainBox.children[8].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    } else if(mainBox.children[2].classList.contains("x") && mainBox.children[5].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
        winner = "X";
        exitGame(winner);
    }

    ////////////////
     else if (mainBox.children[0].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if (mainBox.children[1].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[7].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if (mainBox.children[2].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if (mainBox.children[0].classList.contains("o") && mainBox.children[3].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if (mainBox.children[0].classList.contains("o") && mainBox.children[1].classList.contains("o") && mainBox.children[2].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if(mainBox.children[3].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[5].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if (mainBox.children[6].classList.contains("o") && mainBox.children[7].classList.contains("o") &&
        mainBox.children[8].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else if(mainBox.children[2].classList.contains("o") && mainBox.children[5].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
        winner = "O";
        exitGame(winner);
    } else {
        winner = "Draw";
        return;
    };


}

Всё поэтапно и очень много кода. Как бы сделали функцию проверки Вы ?
P.S. Если вместо mainBox.children[0].classList.contains(class)написать mainBox.childNodes[0].classList.contains(class), то будет ошибка - нельзя узнать наличие класса у undefined. Почему childNodes[0] будет undefined?

Рабочий пример:

var mainBox = document.getElementById("main");
var winner = null;
var steps = 0;
mainBox.onclick = function(e) {
  var targetBox = e.target;
  if (targetBox == mainBox) return false;
  if (targetBox.classList.contains("x") || targetBox.classList.contains("o")) return false;
  targetBox.classList.add("x");
  computerStep();
  steps++;
  check();
  if (steps == 4 && winner == 'Draw') {
    //  winner = "Draw";
    exitGame(winner);
  }
  console.log(steps + " step")
}

function computerStep() {
  var computerChoose = Rand(0, 8);
  console.log(computerChoose);
  console.log(mainBox.children[computerChoose]);
  if (mainBox.children[computerChoose].classList.contains("x") || mainBox.children[computerChoose].classList.contains("o")) {
    computerStep();
  } else {
    mainBox.children[computerChoose].classList.add('o');
  }
}

function Rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function check() {

  if (mainBox.children[0].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[1].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[7].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[2].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[0].classList.contains("x") && mainBox.children[3].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[0].classList.contains("x") && mainBox.children[1].classList.contains("x") && mainBox.children[2].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[3].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[5].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[6].classList.contains("x") && mainBox.children[7].classList.contains("x") &&
    mainBox.children[8].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  } else if (mainBox.children[2].classList.contains("x") && mainBox.children[5].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
    winner = "X";
    exitGame(winner);
  }

  ////////////////
  else if (mainBox.children[0].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[1].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[7].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[2].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[0].classList.contains("o") && mainBox.children[3].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[0].classList.contains("o") && mainBox.children[1].classList.contains("o") && mainBox.children[2].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[3].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[5].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[6].classList.contains("o") && mainBox.children[7].classList.contains("o") &&
    mainBox.children[8].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else if (mainBox.children[2].classList.contains("o") && mainBox.children[5].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
    winner = "O";
    exitGame(winner);
  } else {
    winner = "Draw";
    return;
  };


}

function exitGame(winner) {
  //  if(winner == 'undefined') winner=="Draw";
  alert("Game over. Winner: " + winner);
  window.location.href = window.location.href;
}
#main {
  position: relative;
  margin: 2% auto;
  width: 470px;
  height: auto;
  text-align: center;
  background-color: #fff;
}
.box {
  position: relative;
  padding: 10px;
  border: 1px solid #ccc;
  width: 120px;
  height: 120px;
  display: inline-block;
  cursor: pointer;
  background-color: floralwhite;
}
.box:hover {
  background-color: aliceblue;
}
.x {
  background: url('https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png');
  background-size: cover;
}
.o {
  background: url('https://upload.wikimedia.org/wikipedia/commons/b/be/Sundanese_digit_0.png');
  background-size: cover;
}
<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

8
  • стоит добавить описание что такое mainBox, и возможно разметку для которой это все происходит
    – Grundy
    Commented 9 авг. 2016 в 14:44
  • children - это у Element, childNodes - это у Node.
    – user207618
    Commented 9 авг. 2016 в 14:48
  • @Grundy, добавил фидл Commented 9 авг. 2016 в 14:52
  • @SergeyAlekseev, ага, а почему без кода? как узнать что когда вызывается?
    – Grundy
    Commented 9 авг. 2016 в 14:55
  • 2
    в двух словах лучше все переписать и отделить разметку от самой логики игры :)
    – Grundy
    Commented 9 авг. 2016 в 15:14

2 ответа 2

3
<div id="field">
    <div class="x"></div><div class="o"></div><div class="x"></div>
    <div class="o"></div><div class="x"></div><div class="o"></div>
    <div class="x"></div><div class="o"></div><div class="x"></div>
</div>

<script>
var mainBox = document.getElementById("field");

var winCombinations = [
    [ 1, 0, 0,
      0, 1, 0,
      0, 0, 1 ],
    [ 0, 0, 1,
      0, 1, 0,
      1, 0, 0 ],
    [ 1, 1, 1,
      0, 0, 0,
      0, 0, 0 ],
    [ 0, 0, 0,
      1, 1, 1,
      0, 0, 0 ],
    [ 0, 0, 0,
      0, 0, 0,
      1, 1, 1 ],
    [ 1, 0, 0,
      1, 0, 0,
      1, 0, 0 ],
    [ 0, 1, 0,
      0, 1, 0,
      0, 1, 0 ],
    [ 0, 0, 1,
      0, 0, 1,
      0, 0, 1 ]
];

function exitGame(won) {
    alert(won + " won!");
}

function check() {
    var xs = new Array();
    var os = new Array();
    for (var cellIdx = 0; cellIdx < 9; cellIdx++) {
        xs[cellIdx] = mainBox.children[cellIdx].classList.contains("x");
        os[cellIdx] = mainBox.children[cellIdx].classList.contains("o");
    }

    for (var combinationIdx = 0; combinationIdx < winCombinations.length; combinationIdx++) {
        var xsFit = true;
        var osFit = true;
        for (var cellIdx = 0; cellIdx < 9; cellIdx++) {
            if (winCombinations[combinationIdx][cellIdx] == 1) {
                if (!xs[cellIdx]) {
                    xsFit = false;
                }
                if (!os[cellIdx]) {
                    osFit = false;
                }
                if (!xsFit && !osFit) break;
            }
        }
        if (xsFit) {
            exitGame("X");
            return;
        } else if (osFit) {
            exitGame("O");
            return;
        }
    }
}

check();
</script>
3
  • Можно уменьшить кол-во итераций, если вместо матрицы в winCombinations использовать только 3 индекса ячеек (например, 0,1,2 или 0,4,8) и проверять только их, но для крестиков-ноликов это не существенно повлияет на производительность. Поэтому я бы сделал так, потому что так понятнее и красивее Commented 9 авг. 2016 в 15:27
  • на счет понятнее и красивее это ты погорячился
    – Grundy
    Commented 9 авг. 2016 в 15:49
  • @Grundy, возможно. Однозначно понятнее, если смотреть на winCombinations - кто играл в крестики-нолики, без проблем его сможет отредактировать, а если бы было "0,1,2 / 0,4,8...", надо было бы это представлять в уме, просчитывать индексы для ячеек (не сложно, но неприятно). Да и красивее по той же причине, вместо непонятных на первый взгляд цифр - матрица из единичек и нулей, как поле в самой игре. Commented 9 авг. 2016 в 15:53
3
var WIN_POSITIONS = [
  0b111000000,
  0b000111000,
  0b000000111,
  0b100100100,
  0b010010010,
  0b001001001,
  0b100010001,
  0b001010100
];

function isWin(side) {
  // childNodes не подходит из-за наличия текстовых элементов внутри mainBox
  // если их закомментировать, то подойдёт и childNodes
  var boxes = mainBox.children;
  // если reduce и some считаете политически не верными,
  // то замените их на цикл for
  var currentPosition = [].reduce.call(boxes, function (result, box) {
    return result + +box.classList.contains(side);
  }, "");
  var currentPositionBinary = parseInt(currentPosition, 2);

  return WIN_POSITIONS.some(function (pos) {
    return (pos & currentPositionBinary) == pos;
  });
}

function check() {
  if (isWin("x")) {
    exitGame("X");
  } else if (isWin("o")) {
    exitGame("O");
  }
}
1
  • Извиняюсь, не сразу сообразил как правильно. pegoopik, спасибо! Commented 11 авг. 2016 в 10:26

Ваш ответ

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

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