Здравствуйте! Я написал рабочий код и хотел бы получить конструктивную критику о том, что можно изменить или улучшить. Например, я хотел бы узнать, следовал ли я общепринятым практикам написания кода. <br/> <br/> let sum = 0; <br/> let playerOne = 1; <br/> let playerTwo = 2; <br/> <br/> let arrayCheker = [ <br/> [0, 0, 0], <br/> [0, 0, 0], <br/> [0, 0, 0] <br/> ]; <br/> <br/> function krestik(krest) { <br/> let div = document.createElement("div"); <br/> let divRight = document.createElement("div"); <br/> <br/> div.style.position = "absolute"; <br/> div.style.top = "52%"; <br/> div.style.left = "50%"; <br/> div.style.transform = "translate(-50%,-50%) rotate(45deg)"; <br/> div.style.width = "5%"; <br/> div.style.height = "60%"; <br/> div.style.backgroundColor = "#ffd0fe"; <br/> div.style.border = "2px solid #ffd0fe"; <br/> <br/> divRight.style.position = "absolute"; <br/> divRight.style.top = "50%"; <br/> divRight.style.left = "50%"; <br/> divRight.style.transform = "translateX(-50%) rotate(45deg)"; <br/> divRight.style.width = "60%"; <br/> divRight.style.height = "5%"; <br/> divRight.style.backgroundColor = "#fe8eff"; <br/> divRight.style.border = "2px solid #fe8eff"; <br/> <br/> krest.appendChild(divRight); <br/> krest.appendChild(div); <br/> return krest; <br/> } <br/> <br/> function nolik(nol) { <br/> let div = document.createElement("div"); <br/> div.style.position = "absolute"; <br/> div.style.top = "10px"; <br/> div.style.left = "50%"; <br/> div.style.transform = "translateX(-50%)"; <br/> div.style.borderStyle = "solid"; <br/> div.style.borderWidth = "10px"; <br/> div.style.backgroundImage = "linear-gradient(to left, #fe8eff, #ffd0fe)"; <br/> div.style.borderColor = "#a12d91"; <br/> div
Спасибо за предоставленный код. Давайте разберёмся с тем, что можно улучшить, и какие ошибки могут быть.
### Общие рекомендации
1. **Ясность по имени переменных:**
Избегайте использования термина "playerOne" и "playerTwo" без контекста. Если это игроки в игре, лучше использовать более понятные имена, например, "playerX" и "playerO", если это игра в "крестики-нолики".
2. **Избегайте повторяющегося кода:**
В функции `krestik` и `nolik` много дублирующихся стилей и структуры. Создайте функцию, которая бы принимала параметры для стилизации и создавала элементы, чтобы избежать дублирования.
3. **Используйте классы/стили CSS:**
Вместо того чтобы задавать стили через JavaScript, вы можете создать стили в CSS и использовать классы для этих элементов. Это сделает код более читаемым и упростит изменение стилей.
4. **Структурная организация:**
Часть кода, например, определение массива `arrayCheker`, не имеет четкой связи с остальным кодом. Если значением этого массива управляют функции, сделайте его локальной переменной внутри функциональности, которая её использует.
5. **Используйте `const` и `let`:**
Используйте `const` для переменных, значение которых не изменяется, и `let` для изменяемых переменных. Это улучшает читаемость кода и предотвращает ошибки.
6. **Отсутствие закругления `nolik`:**
Код функции `nolik` обрывается, и, судя по всему, там не все предусмотрено. Убедитесь, что все функции завершены и логика игры охватывает все остальные нужные правила.
### Исправленный пример
Вот пример, как улучшить одну из функций, используя класс и сокращая дублирование:
```javascript
const createDiv = (styles) => {
let div = document.createElement("div");
Object.assign(div.style, styles);
return div;
}
function krestik(krest) {
const div = createDiv({
position: "absolute",
top: "52%",
left: "50%",
transform: "translate(-50%,-50%) rotate(45deg)",
width: "5%",
height: "60%",
backgroundColor: "#ffd0fe",
border: "2px solid #ffd0fe",
});
const divRight = createDiv({
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%) rotate(45deg)",
width: "60%",
height: "5%",
backgroundColor: "#fe8eff",
border: "2px solid #fe8eff",
});
krest.appendChild(divRight);
krest.appendChild(div);
return krest;
}
// Повторите аналогичное для nolik()
```
### Заключение
Кратко: организуйте код, избегайте дублирования, используйте CSS для стилей и обеспечьте завершённость всех функций. Код становится аккуратнее, его легче поддерживать и модифицировать.
сугубо по коду -
1) вынести предикаты в отдельные функции для улучшения читаемости.
2) вообще код разбить на функции. Если только начинаешь учиться - перенеси все это в классы. Создай класс игрока, поля и тд. Заодно ознакомишься с SOLID (уточнения по мелочам и правда лучше к чату гпт)
3) если правда учишься и САМ написал код - переведи его в typescript. Это стандарт индустрии, мастхев.
4)if (confirm("Хотите сыграть еще раз?"))
вынести в отдельные переменные. Учиться не оставлять в коде прописаных от руки строк.
Основа основ - переписать это на мелкие ф-кции с нормальными названиями и четким назначением, чтобы код стал приятно читаем.
пока у меня все )