Как улучшить код и что в нём может быть не так?

Question

[Khetag_d]

Написал код (рабочий) и я хочу услышать конструктивную критику от знающих что поменять или как улучшить код (тоесть написал ли я так как не принято писать и т.п.)

let sum = 0;
let playerOne = 1;
let playerTwo = 2;

let arrayCheker = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

function krestik(krest) {
    let div = document.createElement("div");
    let divRight = document.createElement("div");

    div.style.position = "absolute";
    div.style.top = "52%";
    div.style.left = "50%";
    div.style.transform = "translate(-50%,-50%) rotate(45deg)";
    div.style.width = "5%";
    div.style.height = "60%";
    div.style.backgroundColor = "#ffd0fe";
    div.style.border = "2px solid #ffd0fe";

    divRight.style.position = "absolute";
    divRight.style.top = "50%";
    divRight.style.left = "50%";
    divRight.style.transform = "translateX(-50%) rotate(45deg)";
    divRight.style.width = "60%";
    divRight.style.height = "5%";
    divRight.style.backgroundColor = "#fe8eff";
    divRight.style.border = "2px solid #fe8eff";

    krest.appendChild(divRight);
    krest.appendChild(div);
    return krest;
}

function nolik(nol) {
    let div = document.createElement("div");
    div.style.position = "absolute";
    div.style.top = "10px";
    div.style.left = "50%";
    div.style.transform = "translateX(-50%)";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "10px";
    div.style.backgroundImage = "linear-gradient(to left, #fe8eff, #ffd0fe)";
    div.style.borderColor = "#a12d91";
    div.style.borderRadius = "50%";
    div.style.width = "80%";
    div.style.height = "80%";
    nol.appendChild(div);
    return nol;
}

function arrCompletion(index, arr, perem) {
    let row = Math.floor(index / 3);
    let col = index % 3;
    if (arr[row][col] === 0) {
        arr[row][col] = perem;
        return true;
    }
    return false;
}

function checkWinner() {

    for (let i = 0; i < 3; i++) {
        if (arrayCheker[i][0] !== 0 && arrayCheker[i][0] === arrayCheker[i][1] && arrayCheker[i][1] === arrayCheker[i][2]) {
            return arrayCheker[i][0];
        }
        if (arrayCheker[0][i] !== 0 && arrayCheker[0][i] === arrayCheker[1][i] && arrayCheker[1][i] === arrayCheker[2][i]) {
            return arrayCheker[0][i];
        }
    }


    if (arrayCheker[0][0] !== 0 && arrayCheker[0][0] === arrayCheker[1][1] && arrayCheker[1][1] === arrayCheker[2][2]) {
        return arrayCheker[0][0];
    }
    if (arrayCheker[0][2] !== 0 && arrayCheker[0][2] === arrayCheker[1][1] && arrayCheker[1][1] === arrayCheker[2][0]) {
        return arrayCheker[0][2];
    }

    return 0;
}

function displayWinner(winner) {
    const message = winner === playerOne ? "Игрок 1 победил!" : "Игрок 2 победил!";
    alert(message);


    groupCell.forEach(el => {
        el.removeEventListener("click", handleClick);
    });


    if (confirm("Хотите сыграть еще раз?")) {
        resetGame();
    }
}

function handleClick(el, index) {
    if (arrCompletion(index, arrayCheker, (sum % 2 === 1) ? playerOne : playerTwo)) {
        if (sum % 2 === 1) {
            nolik(el);
        } else {
            krestik(el);
        }
        sum++;

        const winner = checkWinner();
        if (winner !== 0) {
            displayWinner(winner);
        }
    }
}

let groupCell = document.querySelectorAll(".game__monitor--krestnol div");
groupCell.forEach((el, index) => {
    el.addEventListener("click", function() {
        handleClick(el, index);
    });
});
function resetGame() {

    groupCell.forEach(el => {
        el.innerHTML = '';
        el.addEventListener("click", function() {
            handleClick(el, index);
        });
    });


    arrayCheker = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
    ];
    sum = 0;
}

Comments

[StreetWanderer]

что поменять или как улучшить код

Вставить в специальный тег.

[Refguser]

Если человек не может (не знает как?) даже оформить код, то уже понятно, что не стоит ломать глаза об это.

[Mors Clamor]

Пытаюсь заставить админов сделать тег "Легко решается с помощью GPT" день 7

[VoidVolker]

Khetag_d Правила #3.8. Улучшить для чего именно? "Не так" в нём может быть всё что угодно - зависит от конкретных критериев "не таковости".

Answer 1

[Kentavr16]

сугубо по коду -
1) вынести предикаты в отдельные функции для улучшения читаемости.
2) вообще код разбить на функции. Если только начинаешь учиться - перенеси все это в классы. Создай класс игрока, поля и тд. Заодно ознакомишься с SOLID (уточнения по мелочам и правда лучше к чату гпт)
3) если правда учишься и САМ написал код - переведи его в typescript. Это стандарт индустрии, мастхев.
4) if (confirm("Хотите сыграть еще раз?"))
вынести в отдельные переменные. Учиться не оставлять в коде прописаных от руки строк.

Основа основ - переписать это на мелкие ф-кции с нормальными названиями и четким назначением, чтобы код стал приятно читаем.

пока у меня все )