oilga03

01.05.2021 22:16

Информатика

Есть ответ 👍

объясните как работает этот код (только 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;
}