@PRodion

Как сделать распределение слов по ячейкам таблицы?

Есть многомерный массив.

var array = [
    [
        'один',
        'два',
        'три',
        'четыре'

        // всего 16 букв
    ]
];

Список слов из array[0] должен быть размещен в таблицу, каждая буква - это отдельная ячейка таблицы. Расположение слов в таблице - не имеет значения. Главная задача - оставить их читаемыми по одной из сторон.

|о|д|и|н|     |ч|е|т|ы|
|ч|е|р|т|     |т|д|о|р|
|е|т|ы|р|     |р|в|д|е|
|д|в|а|и| или |и|а|и|н|

Мне кажется что вставить их без разбора на буквы - нереально. Вся проблема в том, что некоторые слова могут быть "закручены" (не знаю как правильно сказать). Пример:

| | | | |     |ч|е|т|ы|
|ч|е|р| |     | | | |р|
|е|т|ы| |     | | | |е|
| | | | | или | | | | |

Разбор слов на буквы:

for(var value = 0; value < array[0].length; value++) { 
    for (var index = 0; index < array[0][value].length; index++) { 
        // console.log(array[0][value][index]);
    } 
}

Важные нюансы:
  1. Общее количество букв может быть больше чем 16.
  2. Ячеек по горизонтали может быть больше чем 4. По задумки их количество указывается опционально var cells = 4;.
  3. Ячеек по вертикали может быть ровно столько - сколько требуется для размещения всех слов.
  4. Пустых ячеек быть не должно.

Пример:
cells = 4     cells = 4
| | | | |     | | | | |
| | | | |     | | | | |
| | | | |     | | | | |
| | | | | или | | | | |
16 букв       | | | | |
              20 букв

Над этой задачей я сижу 3й день, с 10:00 до 23:00. Очень сложный для меня алгоритм. Буду рад любой помощи, любым советам относительно реализации.
  • Вопрос задан
  • 682 просмотра
Решения вопроса 3
0xD34F
@0xD34F Куратор тега JavaScript
Закрутите слова спиралью от краёв к центру. Типа так:

|о|д|и|н|
|е|т|ы|д|
|ч|е|р|в|
|и|р|т|а|

Собираете слова в одну строку, режете на отдельные символы - получаете массив букв всех слов. Создаёте двухмерный массив, изначально заполняете его элементы значениями-заглушками - null, например. Затем начинаете по нему двигаться от левого верхнего угла, заполняя символами слов. На каждом шаге проверяете следующий элемент, если его значение не null - значит вы достигли края массива или уже заполненной его части - меняете направление обхода (поворачиваете направо).

Как это может выглядеть:

function makeTable(data) {
  data = data.join('').split('');

  let width = Math.sqrt(data.length) | 0;
  let height = (data.length / width) | 0;

  while (width * height !== data.length) {
    width--;
    height = (data.length / width) | 0;
  }

  const position = [ 0, 0 ];
  const directions = [
    [  1,  0 ],
    [  0,  1 ],
    [ -1,  0 ],
    [  0, -1 ],
  ];
  let direction = 0;

  const result = Array.from({ length: height }, n => Array(width).fill(null));

  for (const n of data) {
    result[position[1]][position[0]] = n;

    if (null !== (result[position[1] + directions[direction][1]] || {})[position[0] + directions[direction][0]]) {
      direction = (direction + 1) % directions.length;
    }

    position[0] += directions[direction][0];
    position[1] += directions[direction][1];
  }

  return result.map(n => n.join(' ')).join('\n');
}

Примеры использования:

console.log(makeTable([ 'раз', 'два', 'три' ])); /*
р а з
р и д
т а в
*/
console.log(makeTable([ 'один', 'два', 'три', 'четыре' ])); /*
о д и н
е т ы д
ч е р в
и р т а
*/
console.log(makeTable([ 'hello', ',', ' ', 'world', '!!' ])); /*
h e
! l
! l
d o
l ,
r  
o w
*/

Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
Простейшее заполнение змейкой:
function makeSnake(letters, width) {
  var snake = [];
  for (var i = 0; letters.length > 0; i++) {
  	var chunk = letters.splice(0, width)  // отрезаем куски по ширине
    if (i%2) chunk.reverse() // разворачиваем нечетные
    snake = snake.concat(chunk)
  }
  return snake
}

Осталось вывести их в табличку по порядку: https://jsfiddle.net/yvcs3r5n/
Ответ написан
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
Заинтересовал меня ваш вопрос, спортивным интересом =)
Как пример:
https://jsfiddle.net/zq9op1gL/4/

В начале скрипта, если isEditor == true, то будет редактор змейки, для создания пути.
Пользоваться так:
Кликаем по ячейкам как вам нужно по правилам формирования слов
Ниже таблицы будут выводиться координаты ячеек. Что то такое:
1,4 , 1,5 , 2,5 , 2,4 , 3,4 , 3,5 ,

Копируем эту строку с координатами и вставляем в переменную массив "path"
Всё новый путь для формирования слов готов.

Меняем isEditor на false, смотрим результат, поидее должно работать.
Единственное есть недочёт, как проверка конца пути, если больше чем осталось ячеек, то слово впишется не полностью, но это уже мелочи ...

Можно ещё рандомно сами слова переворачивать для усложнения, чтобы путь запутать и т.д.

https://jsfiddle.net/zq9op1gL/6/
Развлекуха, за качеством не гнался =)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@JuniorNoobie
Сижу в поддержке, пишу мелкие проекты
Вот простейший пример: заполняем по порядку.
js fiddle
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы