1

Есть шахматная доска, я вывел все "фигуры" на доску. Подскажите как это можно реализовать с помощью массива в котором будет 4 элемента а не 8. Или улучшенный вариант о котором я не знаю. Были попытки, но не получалось.

Напишите ваши замечания про мой код, пожалуйста, а то хотелось бы качественный и валидный код писать.

Если будете править мой код, не удаляйте его, закоментируйте пожалуйста, и напишите свой.

Спасибо.

https://jsfiddle.net/s2tdfkmb/

let figures = [
  ['typa', 'kony', 'slon', 'korol', 'dama', 'slon', 'kony', 'typa'],
  ['peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka'],
  [],
  [],
  [],
  [],
  ['peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka'],
  ['typa', 'kony', 'slon', 'korol', 'dama', 'slon', 'kony', 'typa']
];

function chees() {
  let main_block = document.querySelector('.main_block');
  let flag = true;

  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      if (j == 0) flag = !flag;

      let block = document.createElement('div');
      let nameFigura = document.createElement('p');

      nameFigura.textContent = figures[i][j];

      if (flag) block.className = ('block black');
      else block.className = ('block white');

      if (i < 2 || i > 5) block.appendChild(nameFigura);


      main_block.appendChild(block);
      flag = !flag;
    }
  }
}

chees();
p {
  color: red;
  text-align: center;
  margin-top: 25px;
}

.main_block {
  width: 560px;
  height: 560px;
  margin: 30px;
  border: 1px solid black;
}

.block {
  width: 70px;
  height: 70px;
  float: left;
}

.black {
  background-color: #000;
}

.white {
  background-color: #fff;
}
<div class="main_block"></div>

6
  • Где код, про который нужны замечания? Какие попытки были и как именно не получились? 28 апр 2018 в 22:44
  • Ссылка на код снизу в тексте, если вы это имели ввиду. @Эникейщик 28 апр 2018 в 22:46
  • Во-первых, это не ссылка, а плоский текст, а во-вторых, код должен быть в самом вопросе. 28 апр 2018 в 22:47
  • Я понял о чем вы говорите, просто я не всегда сюда пишу код. А про ссылку было замечание что ссылка должна объявлена в коде . @Эникейщик 28 апр 2018 в 22:51
  • @Миша Подлевских не очень разбирался в коде но подозреваю, что для сокращения массива до 4 элементов - надо удалить из него 4 лишних элемента и при заполнении одного поля просто его перевернуть
    – user212578
    28 апр 2018 в 23:14

1 ответ 1

1
nameFigura.textContent = (i < 2 || i > 5) ? figures[i < 2 ? i : i - 4][j] : '';

Если i имеет значение 0, 1, 6, или 7 - получаем строку из массива (вычитая из индекса 4 когда i >= 2... То есть, вычитание будет выполнено при значениях 6 и 7, т.к. значения 2..5 "фильтруются" первым условием).

let figures = [
  ['typa', 'kony', 'slon', 'korol', 'dama', 'slon', 'kony', 'typa'],
  ['peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka'],
  /*[],
  [],
  [],
  [],*/
  ['peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka', 'peshka'],
  ['typa', 'kony', 'slon', 'korol', 'dama', 'slon', 'kony', 'typa']
];

function chees() {
  let main_block = document.querySelector('.main_block');
  let flag = true;

  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      if (j == 0) flag = !flag;

      let block = document.createElement('div');
      let nameFigura = document.createElement('p');

      //nameFigura.textContent = figures[i][j];
      nameFigura.textContent = (i < 2 || i > 5) ? figures[i < 2 ? i : i - 4][j] : '';

      if (flag) block.className = ('block black');
      else block.className = ('block white');

      if (i < 2 || i > 5) block.appendChild(nameFigura);


      main_block.appendChild(block);
      flag = !flag;
    }
  }
}

chees();
p {
  color: red;
  text-align: center;
  margin-top: 25px;
}

.main_block {
  width: 560px;
  height: 560px;
  margin: 30px;
  border: 1px solid black;
}

.block {
  width: 70px;
  height: 70px;
  float: left;
}

.black {
  background-color: #000;
}

.white {
  background-color: #fff;
}
<div class="main_block"></div>

При желании, тут можно сократить массив до двух элементов, а не четырех... опять же, работая только с индексом (не создавая промежуточных массивов).

Но на самом деле, нет ничего плохого в том что рабочий массив содержит 8 вложенных, 4 из которых пусты.
Если фигуры впоследствии будут ходить, с 8 элементами реализация этого будет намного проще (роль и имя массива можно изменить на boardGrid, наполняя его объектами фигур вида {type, color}).

2
  • Спасибо, я понял. И хотел поинтересоваться, код у меня вполне хороший, или есть серьезные замечания? @yar85 29 апр 2018 в 8:25
  • 1
    @МишаПодлевских, код как код, я серьезных косяков не вижу. Разве что момент с className спорный... рекомендуется работать с classList, это быстрее и надежнее (хотя строчек кода больше). А если в целом, просто как мнение: добавление элементов я бы сделал через insertAdjacentHTML (с помощью шаблонной строки сразу указывая и класс и содержимое) - чтобы сократить количество ветвлений и обращений к DOM... но тут всего 16 элементов, поэтому не критично.
    – yar85
    29 апр 2018 в 8:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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