Как перемещать шахматные фигуры с помощью JS?

Question

[LevG0r]

Здравствуйте, как можно переместить фигуру на шахматной доске с помощью JS? Код приведен тут -- https://jsfiddle.net/v8yacfst/ . Как я понимаю, при клике на фигуру должен перемещаться текст ячейки(т.е. фигура) в другую ячейку. Также вопрос -- как сделать так, чтобы можно было указать правила хождения фигуры, а также то, что фигура съедает другую фигуру.

Comments

[Alex]

Опишите всё, что вы уже сделали для решения проблемы. Не забудьте рассказать, почему тот или иной вариант действий не сработал. Это даст окружающим дополнительную информацию о вашей проблеме и сократит время поиска решения.

[LevG0r]

Alex, я ещё не пробовал сам писать, так как сам не очень знаю JS.

[Alex]

LevG0r, Тогда в чем смысл заданного вопроса? Вы обучаетесь JS? Тогда учитесь. Вы хотите чтобы кто-то сделал за вас? Тогда вам на фриланс. Вы столкнулись с какой-то проблемой и не можете найти решение -- опишите проблему и тут вам помогут.

[LevG0r]

Alex, не, я просто хотел бы, чтобы дали какие-то наводки что делать -- какой порядок действий и что для этого нужно знать.

[WapSter]

LevG0r, js наверное стоит знать

[Ankhena]

Смотрите как сделано https://codepen.io/search/pens?q=chess и т.д.

Answer 1

[Alex]

На вскидку, я бы сделал как-то так:

1. Пропишите id для каждой клетки. Так будет проще работать с DOM деревом
   
2. Напишите общий class "Фигура". В нем будет свойство указывающее на то, где сейчас находится фигура, и простой метод "Переместить". Этот метод, просто учищает текужую ячейку таблицы и вставляет фигуру в указанную.
   
3. Напишите class для каждого типа фигуры. Он наследуется от базового.
   
4. В классе конкретной фигуры опишите метод который будет проверять может ли текущая данная фигура, на основе правил игры и текущей позиции, переместится на указанную клетку.
   
5. В классе конкретной фигуры опишите метод "Переместить", который будет выполнять проверку (см. предыдущий пунк) после чего вызывать родительский метод "Переместить".
   
   

Почитать:

1. https://learn.javascript.ru/dom-nodes
   
2. https://learn.javascript.ru/basic-dom-node-properties
   
3. https://learn.javascript.ru/dom-navigation
   
4. https://learn.javascript.ru/searching-elements-dom
   
5. https://learn.javascript.ru/classes