объясните как работает этот код (только js код) ( js код "Крестики нолики")
const area = document.getElementById('area');
let move = 0;
let result = '';
const contentWrapper = document.getElementById('content');
const overlay = document.getElementById('overlay');
const btnClose = document.getElementById('btn-close');
const modalResult = document.getElementById('modal-result-wrapper');

area.addEventListener('click', e => {
if(e.target.className = 'box') {
if (move % 2 === 0) {
e.target.innerHTML = 'X';
e.target.style.color = 'blue';
e.target.classList.add('disabledbutton');
} else {
e.target.innerHTML = '0';
e.target.classList.add('disabledbutton');
}
move++;
check();
}
});

const check = () => {
const boxes = document.getElementsByClassName('box');
const arr = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
for(i = 0; i < arr.length; i++) {
if (
boxes[arr[i][0]].innerHTML == 'X' && boxes[arr[i][1]].innerHTML == 'X' && boxes[arr[i][2]].innerHTML == 'X'
) {
result = 'крестики';
prepareResult(result);
} else if (
boxes[arr[i][0]].innerHTML == '0' && boxes[arr[i][1]].innerHTML == '0' && boxes[arr[i][2]].innerHTML == '0'
) {
result = 'нолики';
prepareResult(result);
} else if (
move == 9
) {
result = 'ничья';
prepareResultfriendship(result);
}
}
}

const prepareResultfriendship = winner => {
contentWrapper.innerHTML = `У вас ${winner} !`;
modalResult.style.display = 'block';
}

const prepareResult = winner => {
contentWrapper.innerHTML = `Победили ${winner} !`;
modalResult.style.display = 'block';
}

const closeModal = () => {
modalResult.style.display = 'none';
location.reload();
}

overlay.addEventListener('click', closeModal);
btnClose.addEventListener('click', closeModal);

(Код CSS)
/размер и выравнивание шрифта/
.content {
text-align: center;
font-size: 33px;
}

/выстраиваем квадраты по центру/
.area-wrapper {
display: flex;
justify-content: center;
}

/настройки квадратов "местоположение, цвет"тд /
#area {
width: 600px;
height: 600px;
background-color: #86a2e1;
display: flex;
flex-wrap: wrap;
}

/размер квадратов/
.box {
width: 200px;
height: 200px;
border: 1px solid white;
box-sizing: border-box;
font-size: 75px;
color: brown;
display: flex;
justify-content: center;
align-items: center;
}

/размер шрифта в конце игры/
#modal-result-wrapper {
display: none;
font-size: 25px;
}

/настройки окна в конце игры/
#modal-window {
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
width: 300px;
padding: 20px;
}

/настройки кнопки "начать новую игру"/
#btn-close {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 50px;
background-color: #86a2e1;
color: white;
}

.disabledbutton {
pointer-events: none;
}

248

469

Посмотреть ответы 1

Ответы на вопрос:

lover7

Информатика

4,6(52 оценок)

1var a: array[1..10]of integer; s,i: integer; beginfor i: =1 to 10 do readln(a[i]); for i: =1 to 10 do if a[i]> 0 then begin s: =s+a[i]; write(a[i],' '); end; writeln; writeln('сумма: ',s); end.2var a: array[1..20]of integer; s,i: integer; begin writeln('исходный массив: '); for i: =1 to 20 do begin a[i]: =random(20); write(a[i],' '); end; writeln; write('искомые элементы: '); for i: =1 to 20 do if i mod 2=1 then begin s: =s+a[i]; write(a[i],' '); end; writeln; writeln('их сумма: ',s); end. 3var a: array[1..20]of integer; s,i: integer; begin writeln('исходный массив: '); for i: =1 to 20 do begin a[i]: =random(-50,50); write(a[i],' '); end; writeln; write('меньше 25: '); for i: =1 to 20 do if a[i]< 25 then begin s: =s+1; write(a[i],' '); end; writeln; writeln('их количество: ',s); end.

Реши свою проблему, спроси otvet5GPT

Быстро
Мгновенный ответ на твой вопрос
Точно
Бот обладает знаниями во всех сферах
Бесплатно
Задай вопрос и получи ответ бесплатно

Задай свой вопрос

Популярно: Информатика

Есть вопросы?

Как otvet5GPT работает?

otvet5GPT использует большую языковую модель вместе с базой данных GPT для обеспечения высококачественных образовательных результатов. otvet5GPT действует как доступный академический ресурс вне класса.
Сколько это стоит?

Проект находиться на стадии тестирования и все услуги бесплатны.
Могу ли я использовать otvet5GPT в школе?

Конечно! Нейросеть может помочь вам делать конспекты лекций, придумывать идеи в классе и многое другое!
В чем отличия от ChatGPT?

otvet5GPT черпает академические источники из собственной базы данных и предназначен специально для студентов. otvet5GPT также адаптируется к вашему стилю письма, предоставляя ряд образовательных инструментов, предназначенных для улучшения обучения.