Как правильно сделать возможность бить несколько фигур(шашки на js)?

Question

Николай @tryvols

Front-End разработчик

JavaScript

Как правильно сделать возможность бить несколько фигур(шашки на js)?

Что код некрасивый - не сердчайте, первая версия)

<!DOCTYPE html>
<html>
   <head>
       <title>Checkers</title>
       <link rel="stylesheet" href="style.css">
       <script src="checkers.js"></script>
   </head>
   <body></body>
</html>

table.board {
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle;
    cursor: pointer;
}
table.board tr td {
    width: 50px;
    height: 50px;
    background: #ffd800;
}
table.board tr:nth-child(odd) td:nth-child(even){
    background: #000;
}
table.board tr:nth-child(even) td:nth-child(odd){
    background: #000;
}

div.checker 
{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border: 0;
}
    div.checker.white {
    background: #fff;
    }
    div.checker.black {
    background: red;
    }

    td.highlight {
        background: #0094ff;
    }

function addCheckerToCell(cell, color) {
    var checker = document.createElement('div');
    checker.className = " checker " + color;
    cell.appendChild(checker);
}

function DrawBoard() {
    var boardTable = document.createElement('table');
    boardTable.className += " board";
    var size = 8;

    for (var i = 0; i < size; i++)
    {
        var row = boardTable.insertRow(-1);
        for (var j = 0; j < size; j++)
        {
            var cell = row.insertCell(-1);
            cell.setAttribute("onclick", "coord(" + i + "," + j + ");"); // Устанавливает функцию  coord(), которая принимает координаты и производит основные вычисления 
            cell.setAttribute("id", "" + i + j);

            if (((i == 2 || i == 0) && j % 2 == 1) || 
                (i == 1 && j % 2 == 0))
            {
                addCheckerToCell(cell, 'black');
            }
            if (((i == 5 || i == 7) && j % 2 == 0) ||
                (i == 6 && j % 2 == 1))
            {
                addCheckerToCell(cell, 'white');
            }
        }
    }

    document.body.appendChild(boardTable);

}

window.addEventListener('load', DrawBoard);

// Logic of game

var Data = { // Хранилище данных игры
    PreviousColor: "black",
    PlayerColor: "",
    ClickCoord: "",
    Row: 0,
    Cell: 0,
    Bool: 1
}

function coord(row, cell) { // Принимает координаты клика. Реализовывает основную логику игры

    Data.Row = row;
    Data.Cell = cell;

    RightCell(Data.Row, Data.Cell); // Проверка на цвет поля, на который был совершен клик

    if (CheckPlayer()) { // Проверка на игрока

        Data.ClickCoord = "" + Data.Row + Data.Cell;

    } else {

        if (Data.PlayerColor == "black") {
            Algorithm_Black();
        } else {
            Algorithm_White();
        }

    }

}

function RightCell(row, cell) { // Проверка на правильность поля

    if (row % 2 == 0) {

        if (cell % 2 == 0) {
            Data.Cell = null;
            alert("Вы ошиблись!");
            return;
        }

    } else {

        if (cell % 2 == 1) {
            Data.Cell = null;
            alert("Вы ошиблись!");
            return;
        }

    }

}

function CheckPlayer() {

    if (Data.Cell != null) {

        var element = document.getElementById("" + Data.Row + Data.Cell);

        if (element.firstChild != undefined) {
            var color = element.firstChild.getAttribute("class");
        } else {
            return false;
        }

    }

    if (color == " checker black" && Data.PreviousColor == "black" ||
        color == " checker white" && Data.PreviousColor == "white") {

        alert("Это не ваш ход!");
        Data.Cell = null;
        return;

    } else {

        if (color == " checker black") {
            Data.PlayerColor = "black";
        } else {
            Data.PlayerColor = "white";
        }

        return true;

    }
    
}

function Algorithm_Black() {

    var FieldCoord = "" + Data.Row + Data.Cell;

    if (Data.ClickCoord == "" + (Data.Row - 1) + (Data.Cell + 1) ||
        Data.ClickCoord == "" + (Data.Row - 1) + (Data.Cell - 1)) {

        document.getElementById(Data.ClickCoord).innerHTML = "";
        var Field = document.getElementById(FieldCoord);
        addCheckerToCell(Field, Data.PlayerColor);
        Data.PreviousColor = "black";

    }

    Black_Fight(FieldCoord);

}

function Algorithm_White() {

    var FieldCoord = "" + Data.Row + "" + Data.Cell;

    if (Data.ClickCoord == "" + (Data.Row + 1) + (Data.Cell + 1) ||
        Data.ClickCoord == "" + (Data.Row + 1) + (Data.Cell - 1))
    {

        document.getElementById(Data.ClickCoord).innerHTML = "";
        var Field = document.getElementById(FieldCoord);
        addCheckerToCell(Field, Data.PlayerColor);
        Data.PreviousColor = "white";

    }

    White_Fight(FieldCoord);

}

function White_Fight(FieldCoord) {

    var num = +Data.ClickCoord - +FieldCoord;

    if (num == 18) {
        var Black_Check = document.getElementById("" + (Data.Row + 1) + "" + (Data.Cell - 1)).firstChild.getAttribute("class") == " checker black";
        if (Black_Check) {
            document.getElementById("" + (Data.Row + 1) + "" + (Data.Cell - 1)).innerHTML = "";
        }
    } else if (num == 22) {
        var Black_Check = document.getElementById("" + (Data.Row + 1) + "" + (Data.Cell + 1)).firstChild.getAttribute("class") == " checker black";
        if (Black_Check) {
            document.getElementById("" + (Data.Row + 1) + "" + (Data.Cell + 1)).innerHTML = "";
        }
    }
    if (num == 18 || num == 22) {
        document.getElementById(Data.ClickCoord).innerHTML = "";
        var Field = document.getElementById(FieldCoord);
        addCheckerToCell(Field, Data.PlayerColor);
        Data.PreviousColor = "white";
    }

}

function Black_Fight(FieldCoord) {

    var num = +FieldCoord - +Data.ClickCoord;

    if (num == 18) {
        var Black_Check = document.getElementById("" + (Data.Row - 1) + "" + (Data.Cell + 1)).firstChild.getAttribute("class") == " checker white";
        if (Black_Check) {
            document.getElementById("" + (Data.Row - 1) + "" + (Data.Cell + 1)).innerHTML = "";
        }
    } else if (num == 22) {
        var Black_Check = document.getElementById("" + (Data.Row - 1) + "" + (Data.Cell - 1)).firstChild.getAttribute("class") == " checker white";
        if (Black_Check) {
            document.getElementById("" + (Data.Row - 1) + "" + (Data.Cell - 1)).innerHTML = "";
        }
    }
    if (num == 18 || num == 22) {
        document.getElementById(Data.ClickCoord).innerHTML = "";
        var Field = document.getElementById(FieldCoord);
        addCheckerToCell(Field, Data.PlayerColor);
        Data.PreviousColor = "black";
    }

}