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

Как правильно сделать возможность бить несколько фигур(шашки на 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";
    }

}
  • Вопрос задан
  • 1373 просмотра
Пригласить эксперта
Ответы на вопрос 1
baskerville42
@baskerville42
Учусь работать (Junior)
У вас 4 функции идентичные, почему не сократить код до двух? Вам же самому будет удобней править.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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