-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
163 lines (159 loc) · 15.3 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
const cells = [ // Создание двумерного массива со ссылками на ноды клеток доски.
document.querySelectorAll('tr.row_0 > td'),
document.querySelectorAll('tr.row_1 > td'),
document.querySelectorAll('tr.row_2 > td'),
document.querySelectorAll('tr.row_3 > td'),
document.querySelectorAll('tr.row_4 > td'),
document.querySelectorAll('tr.row_5 > td'),
document.querySelectorAll('tr.row_6 > td'),
document.querySelectorAll('tr.row_7 > td')
];
const turn = document.querySelectorAll('.turn'); // Нод индикации очереди хода.
const white_score = document.querySelector('.white_score'); // Нод счёта белых.
const black_score = document.querySelector('.black_score'); // Нод счёта чёрных.
const link = document.querySelector('link'); // Нод подключения css скрипта.
let board; // Стартовая доска.
let turnFlag; // Флаг очереди хода.
let captureFlag; // Флаг повторного взятия.
let queue = []; // Очередь кликов по доске.
let whiteScore; // Счёт белых.
let blackScore; // Счёт чёрных.
// Бинды для удобства работы с кодом.
const click1 = () => queue[0][0]; // Объект с клеткой, которая выбрана первой.
const click2 = () => queue[1][0]; // Объект с клеткой, которая выбрана второй.
const row1 = () => +queue[0][1]; // Горизонталь первого клика.
const row2 = () => +queue[1][1]; // Горизонталь второго клика.
const col1 = () => +queue[0][2]; // Вертикаль первого клика.
const col2 = () => +queue[1][2]; // Вертикаль второго клика.
const whose = () => (turnFlag? '<p class="white"></p>': '<p class="black"></p>'); // HTML код шашки цвета очереди хода.
const whoseKing = () => (turnFlag? '<p class="white_king"></p>': '<p class="black_king"></p>'); // HTML код дамки цвета очереди хода.
const whomCapture = () => (turnFlag? '<p class="black"></p>': '<p class="white"></p>'); // HTML код шашки цвета противоположного очереди хода.
start()
function start() { // Начало партии.
whiteScore = 0; // Обнуляем счёт белых.
blackScore = 0; // Обнуляем счёт чёрных.
turn[0].style.color = 'black'; // Выделение очереди хода чёрным цветом.
turn[1].style.color = 'lightgrey';
captureFlag = false; // Инициализируем флаг повторного взятия. (false - повторного взятия нет)
if (link.getAttribute('href') == 'css/style1.css') { // Проверка поворота доски.
turnFlag = true; // Иннициализация флага очереди хода. (true - ход белых)
} else { turnFlag = false; }
board = [ // Массив со стартовой позицией.
[null, '<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>'],
['<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>', null],
[null, '<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>', null, '<p class="black"></p>'],
['', null , '', null , '', null , '', null ],
[null, '' , null, '' , null, '' , null, '' ],
['<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>', null],
[null, '<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>'],
['<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>', null, '<p class="white"></p>', null]
];
for (let row in cells) { // Проходим по массиву доски.
for (let col in cells[row]) {
if (board[row][col] == null) { // Если клетка пустая, то в HTML код нода ячейки таблицы сохраняем пустую строку.
cells[row][col].innerHTML = '';
continue;
}
cells[row][col].innerHTML = board[row][col]; // Если не пустая, то записываем значения из стартового массива,
cells[row][col].onclick = function() { // и создаём событие реагирующе на нажатие по ячейкам доски,
action(this, +row, +col); // передающее в метод action текущий нод и значения горизонтали\вертикали.
}
}
}
}
function action(it, row, col) {
queue.push([it, +row, +col]); // Добавлям в очередь массив из текущего объекта нода и значений горизонтали\вертикали.
if (queue.length > 2) { queue.shift(); } // Если в очереди больше двух объектов, то удаляем самый старый.
if (click2().innerHTML != '') { return; } // Если HTML код второй выбранной ячейки не пустой, то ждём следующего нажатия.
if (click1().innerHTML == whose()) { // Проверяем совпадает ли цвет выбранной шашки с очередью хода.
move() // Если совпадает, то запускаем метод хода.
} else if (click1().innerHTML == whoseKing()) { // Если первой нажатие это дамка,
kingMove() // то запускаем метод хода дамкой.
}
}
function move() { // Метод хода шашкой.
if (Math.abs(col1() - col2()) == 2 && Math.abs(row1() - row2()) == 2) { // Проверка взятие ход или нет. (+-2 горизонтали и вертикали)
let row = (row2() - row1() > 0)? row1() + 1: row1() - 1; // Соседняя горизонталь в направлении взятия
let col = (col2() - col1() > 0)? col1() + 1: col1() - 1; // Соседняя вертикаль в направлении взятия
if (cells[row][col].innerHTML.slice(10, 15) == whomCapture().slice(10, 15)) { // Проверка что соседняя шашка в направлении взятия противоположного цвета
cells[row][col].innerHTML = ''; // Заполняем HTML код нода соседней шашки пустой строкой. (стираем взятую шашку)
plusScore(); // Метод счёта взятий и сообщений о победе.
captureTurn(row2(), col2()); // Возвращает очередь хода той же стороне, если есть следующее взятие.
swap(); // Обмен ссылко на ноды клеток первого и второго нажатия.
}
} else if (!captureFlag && Math.abs(col1() - col2()) == 1) { // Проверка на обычный ход. (+-1 по вертикали)
if (turnFlag && row1() - row2() == 1 || !turnFlag && row1() - row2() == -1) { swap(); } // (+-1 по горизонтали, учитывая очередность хода). Обмен.
}
}
function kingMove() { // Метод хода дамкой.
let vRow = (row2() - row1() > 0)? +1: -1; // направление сдвига по горизонтали в сторону хода.
let vCol = (col2() - col1() > 0)? +1: -1; // направление сдвига по вертикали в сторону хода.
let own = []; // Массив(вектор) хода своих(чья очередь хода) шашек.
let enemy = []; // Массив(вектор) хода чужих(противополжных очереди хода) шашек.
for (let row = row1(), col = col1(); row != row2(), col != col2(); row += vRow, col += vCol) { // Проходим по диагонали от первого нажатия, до второго.
if (cells[row][col].innerHTML.slice(10, 15) == whose().slice(10, 15)) own.push(cells[row][col]); // Добавляем встречающиеся "свои" шашки.
if (cells[row][col].innerHTML.slice(10, 15) == whomCapture().slice(10, 15)) enemy.push(cells[row][col]); // Добавляем встречающиеся "чужие" шашки.
}
if (own.length == 1) { // Если "своя" шашка одна(которая ходит),
if (enemy.length == 1) { // Если "чужая" одна(которую бьём),
enemy[0].innerHTML = ''; // то стираем убитую шашку
plusScore(); // Метод счёта взятий и сообщений о победе.
captureTurn(row2(), col2()); // Возвращает очередь хода той же стороне, если есть следующее взятие.
swap(); // Обмениваем клетки первого и второго нажатия местами.
} else if (!captureFlag) {
swap(); // Обмениваем клетки первого и второго нажатия местами.
}
}
}
function captureTurn(row, col) { // Возвращает очередь хода той же стороне, если есть следующее взятие.
captureFlag = false; // Если нет повторного взятие, то флаг false.
if (hasCapture(row, col)) { // Проверяем, есть ли следующее взятие.
[turn[0].style.color, turn[1].style.color] = [turn[1].style.color, turn[0].style.color]; // Меняем местами цвета индикации хода.
turnFlag = !turnFlag; // Инвентируем флаг очереди хода.
captureFlag = true; // Есть повторное взятие.
}
}
function plusScore() { // Метод подсчитывающий взятые шашки и объявляющий победу.
if (cells[row1()][col1()].innerHTML.slice(10, 15) == 'black') { // Если шашка чёрная
blackScore = blackScore + 1; // Прибавляем единичку к счёту чёрных
black_score.innerHTML = blackScore; // Изменяем счёт на странице
if (blackScore == 12) { alert('Чёрные победили!'); } // Если счёт равено 12, выдаём диалоговое сообщение о победе
} else if (cells[row1()][col1()].innerHTML.slice(10, 15) == 'white') { // Иначе тоже самое за белых.
whiteScore = whiteScore + 1;
white_score.innerHTML = whiteScore;
if (whiteScore == 12) { alert('Белые победили!'); }
}
}
function hasCapture(row, col) { // Метод проверки возможности повторных взятий.
return row+2 <= 7 && col+2 <= 7 && cells[row+2][col+2].innerHTML == '' && // Если по какому-то направлению, через одну клетку, не выходит за пределы доски и клетка пустая
cells[row+1][col+1].innerHTML.slice(10, 15) == whomCapture().slice(10, 15) || // и на соседней клетке, в том же направлении, есть вражеская шашка.
row-2 >= 0 && col-2 >= 0 && cells[row-2][col-2].innerHTML == '' &&
cells[row-1][col-1].innerHTML.slice(10, 15) == whomCapture().slice(10, 15) ||
row-2 >= 0 && col+2 <= 7 && cells[row-2][col+2].innerHTML == '' &&
cells[row-1][col+1].innerHTML.slice(10, 15) == whomCapture().slice(10, 15) ||
row+2 <= 7 && col-2 >= 0 && cells[row+2][col-2].innerHTML == '' &&
cells[row+1][col-1].innerHTML.slice(10, 15) == whomCapture().slice(10, 15);
}
function swap() { // Метод обмена.
toKing(); // Если шашка дошла до последней горизонтали, превращается в дамку.
[click1().innerHTML, click2().innerHTML] = [click2().innerHTML, click1().innerHTML]; // Обмениваем значения клеток первого и второго нажатия.
[turn[0].style.color, turn[1].style.color] = [turn[1].style.color, turn[0].style.color]; // Изменяем индикатор очереди хода.
turnFlag = !turnFlag;
}
function toKing() { // Метод превращения в дамку.
if (click1().innerHTML == '<p class="black"></p>' && row2() == 7) { // Если шашка чёрная и дошла до 8й горизонтали,
click1().innerHTML = '<p class="black_king"></p>'; // то превращается в чёрную дамку.
}
else if (click1().innerHTML == '<p class="white"></p>' && row2() == 0) { // Иначе, если шашка белая и дошла до 1й горизонтали,
click1().innerHTML = '<p class="white_king"></p>'; // то превращается в белую дамку.
}
}
function turnColor() { // Метод поворота доски.
if (link.getAttribute('href') == 'css/style1.css') { // Проверяем первый ли стиль загружен,
link.href = 'css/style2.css'; // Если первый, то загружаем второй стиль
start() // Перезапускаем метод начала игры.
} else {
link.href = 'css/style1.css'; // Иначе загружаем первый стиль.
start()
}
}