Конем ходи. JavaScript задача на собеседовании 

Ну, как задача для очень новичков - прикольно. Случайно наткнулся, искал стажёрам всякие задачки. Если собеседование не на джуна, то уже не так интересно. Немного критики вашего решения: Во-первых, как-то странно, на собеседовании писать вручную двумерный массив, из 64 элементов. Можно же let a=Array(8).fill(Array(8).fill(0)); Это работает везде где работают шаблонные строки, которые вы используете. Раз уж обозначили что будете использовать es6 - прекрасно. Но, собственно, не понятно зачем этот массив вообще нужен? Во-вторых. Селект по атрибутам тегов (по data-атрибутам) - очень очень плохая идея, это медленно. Фулскан всего дерева документа. На пустой страничке, по клику - может и ок, но на собеседовании это вызовет сразу много вопросов. Задайте классы. Ещё лучше конечно сверстать это таблицей. Потому что это таблица. Вы сразу и расцветку сделаете через css в два селектора, а не яваскриптами. 3) Можно конечно и в вашей вёрстке задать через css, просто селектор будет немного громоздкий: .chess-block:nth-child(16n-1),.chess-block:nth-child(16n-3),[...всего 8 элементов] {background:gray;} Это избавит вас от лишнего класса .bg-black 4) Ну, и подчищание конечно лучше сделать только нужное, в две строки. Зачем все элементы трогать? document.querySelectorAll('.chess-block.green').forEach(e=>e.classList.remove('green')); document.querySelectorAll('.chess-block.active').forEach(e=>e.classList.remove('active')); 5) Циклы for(let i =0;i{ if(xx>=0 && xx=0 && yy

Спасибо Александр, таких как вы на ютубе не хватает. Подача информации на высоте.

Я качаю эти видосы и консервирую в zip , как что то ценное храню на сервере . Александр , спасибо вам , думаю не грех задонатить на поддержку такого канала !

Топовый учитель, однозначный лайк! По оптимизации: вместо грядки из if'ов сделал бы цикл, который перебирает х и у от -2 до 2 (исключая ноль), собираем координаты ячеек в массив, и для всех ячеек, не равных null присваиваем класс с конем. Первый массив с нулями не совсем понял. Точнее логика ясна, но непонятно почему вместо массива не использовать просто х-max и у-max. Я всегда так делаю, если нужно раздать координаты для ячеек, вроде работает. И в случае масштабирования поля нужно поменять всего два значения. upd. Кстати упустил один момент, если просто крутить цикл от -2 до 2, то в массив попадут нежелательные ячейки с координатами (1; 1), (2;2) и т.д. Избавиться от них можно с помощью условия, которое проверяет на четность сумму х и у. Если сумма нечётная - записываем ячейку в массив.

Вот таким мог бы быть более или менее приличный код: function draw() { for (let i = 0; i < 8; i++) { for (let k = 0; k < 8; k++) { let out = ''; } } document.querySelectorAll('.chess-block').forEach(function (element) { element.onclick = horse; }) } function horse() { const dx = [2,1,-1,-2,-2,-1,1,2], dy = [1,2,2,1,-1,-2,-2,-1]; document.querySelectorAll('.chess-block').forEach(function (element) { element.classList.remove('active'); element.classList.remove('green'); }) let x = +this.dataset.x, y = +this.dataset.y; this.classList.add('green'); for (let i = 0; i < 8; i++) { let xx = x + dx[i], yy = y + dy[i]; if (xx >=0 && yy >=0 && xx < 8 && yy < 8) { document.querySelector('.chess-block[data-x="' + xx + '"][data-y="' + yy + '"]').classList.add('active'); } } } Просто. Коротко. Прозрачно.

Когда закрашиваем клетки можно не вводить m, а проверять, если i + k не делится нацело на два, то закрашиваем

Полезное и очень интересное видео! Благодарим!

Как вариант для раскраски доски можно просто проверять на чётность сумму координат.

Однозначный стопудовый лайк))) Как раз недавно решал её. Ваше решение мне нравится больше

Классная работа! Но мне кажется, все эти условия было бы проще сделать отдельной функцией, и передавать туда "координаты" элемента. Не знаю, может, я чего-то не учёл, но это проще чем копипаст, и не так громоздко

Можно более подробно объяснить что тут происходит: data-x="${k}" data-y="${i}, и в циклах с теми датами, @ WebDev с нуля. Канал Алекса Лущенко пожалуйста рассказывай более подробнее свои действия, а не делает "так или вот так")

может у верстальщиков другие собеседования, но мне кажется, что если не знать как это делать, то можно на долго зависнуть.

Отличный урок, спасибо. Смотрел и делал параллельно - все получилось. Лайк.

Конем ходи, век воли не видать)))

Благадарим за вашу работу!!!

урок хорош, и как всегда можна что то улучшить: 1 юзайте больше ES6, можна юзать стрелочный функцыи 2 соблюдать один стиль, скобки " " либо ' ' 3 место того чтоб каждый раз писать + можна один раз поставить в 41 и в 42 строках 4 посмотрите метод Array.from() он уменшить код спасибо за интересный урок пример как можна уменшить код Array.from(Array(8).fill(0),() => Array(8).fill(0).map(item => item + 1))

С удовольствием посмотрел, спасибо большое

Мне страшно читать комменты в которых вы пишите что это очень легкая задача на 15 минут. Вы с ума сошли чтоли? Не выпендривайтесь! Задачка нетрудная, это да, но не на 15 мин.

Это интересно , хороший пример , для практики и наработки.

как всегда ВЫ СУПЕР!

На самом деле бОльшую сложность вызвало прописывание ходов пешки. По крайней мере у меня. Фигуры - это фигня. Наткнулся на видео вчера вечером, решил мозги размять какой-нибудь заковыристой задачкой. За пару часов накатал скриптик, который отрисовывает доску, подписывает каждую клетку (пустая или занятая, если занятая, то чьей и какой фигурой) и по клику на свою фигуру/пешку отрисовывает все её возможные маршруты с учётом всех фигур/пешек на доске и все возможные направления атаки. Без рокировки (у неё игровые условия есть, которые пока не отслеживаю). Отрисовку путей запихал в общую функцию для всех фигур, для пешек пришлось писать отдельно. Весь скрипт без комментариев и визуальных разделителей 260 строк. Прогнал по различным стоп-кадрам с игр. Полностью корректно отрабатывает, ошибок не возникает. Спустя некоторое время решил развить скриптик и теперь это полноценная игра для двух игроков за одним монитором. Спасибо за подгон идеи. Только вот задача про коня заключается не в том, чтобы отрисовать доску и подсветить клетки хода, а в том, чтобы конём обойти всю доску, не наступив на одну клетку дважды. Задача заключается в реализации алгоритма прохода доски

Можно на каждую клеточку написать варианты ходов)

это для джунов такие задания дают? и сколько на это времени отводят?

Спасибо! Очень понравилось!

просто оставляю комент, но задачку я делал синхронно, спасибо

Спасибо за подробное изложение! Главное - донести суть. Но про "10-15 минут" меня поразило. Тогда, наверно, на задачу "написать скрипт, обыгрывающий Каспарова" дадут минут 20?

Очень понравилось. Лайк и комментарий. Подписан уже )))

Отличный пример. Спасибо.

Спасибо большое за урок. Попробую повторить. Одна рекомендация, если позволите :) разберитесь, пожалуйста со словами СКОБКА и КАВЫЧКА. Это разные вещи, особенно в JS

За який час на співбесіді потрібно розв'язати цю задачу? Чи задають її на дом?

отлично как всегда!

дійсно цікавий урок, дякую

модулями можно сделать всего за 2 условия

Делал похожую задачу только в моей алгоритм имел опридилиты куда становиться лошади 64 раза так чтобы ни разу не стать на ячейку на которой уже были. Делал через массив чисел где затем каждое число превращал в объект

function horse() { let x = this.dataset.x; let y = this.dataset.y; document.querySelectorAll('td').forEach(function(element) { element.classList.remove('green'); element.classList.remove('active'); if (Math.pow(element.dataset.x - x, 2) + Math.pow(element.dataset.y - y, 2) == 5) { element.classList.add('green'); } }); this.classList.add('active'); }

Доброго дня, урок хороший, спасибо. Вопрос не по теме, но как у вас после сохранения в VSCode работает beautify? это плагин или что?

Скажите пожалуйста , в функции horse(), на что указывает this? И почему так? Я не понимаю.

хорошо объясняешь

профи

такой цикл не требует создания никаких массивов - у нас кол-во клеток всегда фиксированное for ( let i=0; i

Лучшего обьяснения не найти)

спаибо, очень круто 😊

*ИМХО!* Массив в начале совсем бесполезен, ф-ию draw можно вызвать сразу при инициализации, и раз уж сами создаем поле, то логичнее было бы и родительский блок тоже создать скриптом. (() => { const HEIGHT = 8, WIDTH = 8; const base = document.createElement('div'); base.classList.add('field'); document.body.appendChild(base); let out = ''; for (let y = HEIGHT-1, x; y > -1; y--) { for (x = 0; x < WIDTH; x++) { out += ` `; } } base.innerHTML = out; base.querySelectorAll('.chess-block').forEach( el => el.onclick = horse ); })();

.chess-block:nth-child(even) {...} не проще сделать?

а. нахрен нужен массив chess, если он нигде не используется? б. копи-паста при раскраске массива - отвратительна, правильнее будет добавлять класс bg-black интерполяцей в. вместо грядки ифов нужно создать массив дельт х и y, и бегать по массиву г. проверка на выход за границы поля вообще не нужна: querySelector просто не найдет элемент, если он не существует

Спасибо

Замінити всі іфи однією функцією і викликати її з різними параметрами

Ох уж эти джуны, суют свой m++ куда попало. Не умеют искать оптимальное решение без ввода новых переменных. А ведь достаточно много задач в программировании решаются без изобретения велосипеда математически. Просто взять сумму координат клетки и определить чётная она или нет этого было бы достаточно. Но джуны как добавляли лишние сущности так и добавляют. Не хотят учить математику. Найти коня можно одной проверкой прямо в главном цикле генерации поля, опять же джуны это не могут так как не знают математику. Находим положительную разницу координат: dx = abs(newX - x) dy = abs(newY - x) И создаём любую проверку по типу если сумма разниц координат 3, но при этом одна из разниц координат не нуль (в моём случае проверка на нуль это просто умножение) Вышла единая формула для всех случаев: if dx + dy == dx * dy + 1

Хороший пример. Не могли бы разъяснить, если использовать es6 const horse = () => { // someting } - теряется контекст (this ссылается на window) не могу понять, почему. Заранее спасибо!

Ладно, ладно, конечно, все не так плохо, но два решения вызывают недоумение. 1) Если бы доска была 100 на 100 клеток, вы бы тоже вручную этот массив заполняли? Почему не при помощи цикла с push? 2) Добавление класса черным клеткам при помощи js - это просто дичь. Еще хуже, чем заполнение массива вручную. Почему не CSS'овские odd и even?

Просто кращий)

Спс! Для дубов самое оно!

Я недопонял, зачем в функцию в foreach передавать element и что вообще такое element?

А ведь я правильно понимаю, что для пущей надежности стоит дождаться полной загрузки DOM?

Лол, недельку назад решал эту же задачку для устройства) Видимо, задачи для собеседований берут от куда-то из открытого набора в инете) Для новичков: учитесь программировать, а не решать конкретные задачи

Это собес на джуна?

Шахматы это такая дичь . Есть всего лишь 64 ячейки. Можно даже поведение лошади реализовать на реакцию ближайших к ней фигур.

Я б try catch повесил)

Крутая задача! Смотреть не стал, самое сложное это отрисовать. Матрица, и 8 позиций коня. Простенько. Есть интересней задачка. Клацаете на клетку, там ставится еденица, на все ходы коня увеличиваете на 1, и т д.

Ужасный код, из-за не знания замыкания. Зачем выносить функцию horse из функции draw основываясь на замыкании ?? В функции horse нету dataset, из-за замыкания, код не понятен пользователю , после такого, вас не возьмут на собеседование

збс

Лайк

Оставляю комент,

Какой у тебя аккаун в телеграм

спасибо