Урал Гиззатуллин

README.md

@@ -3,15 +3,24 @@
 Сейчас в коде описаны функции для рисования поля любого размера и рисования любого символа в клетке этого поля.
 Твоя задача дописать код, чтобы это стало полноценной игрой в Крестики-нолики.
 
-1. Реши, как будешь хранить поле. Тебе нужна будет такая структура, в которой удобно понимать есть ли победитель: три клетки по горизонтали, вертикали или диагонали, заполненные одинаковыми символами.
-2. Допиши функцию cellClickHandler, чтобы после клика ставился крестик или нолик в соответствующее поле.
-3. Если поле, по которому кликнули, не пустое, символ ставиться не должен.
-4. Если кончились ходы, выведи alert с текстом "Победила дружба".
-5. Напиши функцию, которая считает: есть ли уже победитель. Если есть победитель, выведи alert с названием победителя.
-6. Если есть победитель, покрась победные значения в клетках в красный.
-7. После победы, клик по полю больше не должен ставить крестик или нолик.
-8. Обрабатывай клик по кнопке "Сначала": допиши метод resetClickHandler, чтобы поле очищалось.
-9. \* Сделай так, чтобы можно было в начале игры задавать поле произвольного размера.
-10. \* Напиши "искусственный интеллект" — функцию, которая будет ставить нолики в случайное пустое поле.
-11. \* Напиши чуть более умный искусственный интеллект — функция, ставящая нолики в случайном месте обязана поставить нолик в такое поле, нолик в котором приведет к выигрышу "ИИ".
-12. \* Сделай так, чтобы при заполнении больше половины клеток на поле, оно бы расширялось: добавлялось бы по одному ряду с каждой стороны.
++1. Реши, как будешь хранить поле. Тебе нужна будет такая структура, в которой удобно понимать есть ли победитель: три клетки по горизонтали, вертикали или диагонали, заполненные одинаковыми символами.
+
++2. Допиши функцию cellClickHandler, чтобы после клика ставился крестик или нолик в соответствующее поле.
+
++3. Если поле, по которому кликнули, не пустое, символ ставиться не должен.
+
++4. Если кончились ходы, выведи alert с текстом "Победила дружба".
+
++5. Напиши функцию, которая считает: есть ли уже победитель. Если есть победитель, выведи alert с названием победителя.
+
++6. Если есть победитель, покрась победные значения в клетках в красный.
+
++7. После победы, клик по полю больше не должен ставить крестик или нолик.
+
++8. Обрабатывай клик по кнопке "Сначала": допиши метод resetClickHandler, чтобы поле очищалось.
+
++9. \* Сделай так, чтобы можно было в начале игры задавать поле произвольного размера.
+
+10. \* Напиши "искусственный интеллект" — функцию, которая будет ставить нолики с случайное пустое поле.
+12. \* Напиши чуть более умный искусственный интеллект — функция, ставящая нолики в случайном месте обязана поставить нолик в такое поле, нолик в котором приведет к выигрышу "ИИ".
+14. \* Сделай так, чтобы при заполнении больше половины клеток на поле, оно бы расширялось: добавлялось бы по одному ряду с каждой стороны.

index.js

@@ -1,14 +1,24 @@
 const CROSS = 'X';
 const ZERO = 'O';
 const EMPTY = ' ';
+let countClick = 0;
+let sizeArray = prompt("Введите размерность масссива", 3);
+let winSymbolCross = CROSS.repeat(sizeArray);
+let winSymbolZero = ZERO.repeat(sizeArray);
+
+let isCross = true;                                             //для чередования
+let win = false;
+let arrayClick = [];                                            //хранение кода
+createArray(sizeArray);
+let winLine = [];
 
 const container = document.getElementById('fieldWrapper');
 
 startGame();
 addResetListener();
 
 function startGame () {
-    renderGrid(3);
+    renderGrid(sizeArray);
 }
 
 function renderGrid (dimension) {
@@ -28,12 +38,122 @@ function renderGrid (dimension) {
 
 function cellClickHandler (row, col) {
     // Пиши код тут
+    move(row, col, sizeArray)
     console.log(`Clicked on cell: ${row}, ${col}`);
+}
+
+function move(row, col, sizeArray){
+    if(arrayClick[col][row] === " " && !win){               //если поле пустое и никто еще не выйграл, то допускается ход
+        if (isCross){
+            renderSymbolInCell(CROSS, row, col);
+            addSimbolInArray(CROSS, row, col);
+            isCross=false;
+            checked(CROSS, arrayClick, sizeArray);
+        }
+        else{
+            renderSymbolInCell(ZERO, row, col);
+            addSimbolInArray(ZERO, row, col);
+            isCross = true;
+            checked(ZERO, arrayClick, sizeArray)
+        }
+    }
+}
+
+
+function createArray(sizeArray){
+    for(let i = 0; i < sizeArray; i++){
+        arrayClick[i] = []
+    }
+    for(let i = 0; i < sizeArray; i++){
+        for(let j = 0; j < sizeArray; j++){
+          arrayClick[i][j] = ' ';
+        }
+    }
+}
+
+function addSimbolInArray(symbol, row, col){
+    arrayClick[col][row] = symbol;
+}
+
+function checked(symbol, arrayClick, sizeArray){
+    countClick++;
+    let diagonal = checkDiagonal(symbol, arrayClick, sizeArray);
+    let lines = checkLines(symbol, arrayClick, sizeArray);
+
+    if (diagonal || lines) {
+        colorSymbolsWinLines(symbol, arrayClick, sizeArray)
+        win = true; 
+        alert(`Winning for ${symbol}`);                                         //выйгрыш за ...
+    }
+    if(countClick === sizeArray**2 && win === false) alert('Победила дружба!'); //если все поля заполнены
+}
+
+function checkDiagonal(symbol, arrayClick, sizeArray){
+    let toRight = true;
+    let toLeft = true;
+    for(let i=0; i<sizeArray; i++){
+        toRight = toRight && (arrayClick[i][i] === symbol);
+        toLeft = toLeft && (arrayClick[sizeArray-i-1][i] === symbol);
+
+        if(toLeft && winLine.indexOf(i)===-1){
+            winLine.push(i);
+            if(winLine.length === 3) colorSymbolsWinDiag(symbol, winLine, direction = 'left', sizeArray);
+        }
 
+        if(toRight && winLine.indexOf(i)===-1){
+            winLine.push(i);
+            if(winLine.length === 3) colorSymbolsWinDiag(symbol, winLine, direction = 'right', sizeArray);
+        }
+    }
+    if (toLeft || toRight) return true;
+    return false;
+}
+
+function checkLines(symbol, arrayClick, sizeArray){
+    for(let i=0; i<sizeArray; i++){
+        cols = true;
+        rows = true;
+        for(let j=0; j<sizeArray; j++){
+            cols = cols && (arrayClick[i][j] === symbol);
+            rows = rows && (arrayClick[j][i] === symbol);
+        }
+        if(cols || rows) {return true}
+    }
+    return false;
+}
+
+//покрас победных значений в линиях в красный
+function colorSymbolsWinLines(symbol, arrayClick, sizeArray){
+    let testCol = [];
+    let testRow = [];
+
+    for(let s in arrayClick){
+        testCol.push(arrayClick[s].join(''));
+        let str ='';
+        for(let j=0; j<sizeArray; j++){str += arrayClick[j][s]};
+        testRow.push(str);
+    }
+
+    if(testRow.indexOf(winSymbolCross) !== -1) {
+        for(let i=0; i<sizeArray; i++) renderSymbolInCell (symbol, testRow.indexOf(winSymbolCross), i, color = '#f00');
+    }
+    if(testRow.indexOf(winSymbolZero) !== -1) {
+        for(let i=0; i<sizeArray; i++) renderSymbolInCell (symbol, testRow.indexOf(winSymbolZero), i, color = '#f00');
+    }
+    if(testCol.indexOf(winSymbolCross) !== -1){
+        for(let i=0; i<sizeArray; i++) renderSymbolInCell (symbol, i, testCol.indexOf(winSymbolCross), color = '#f00');
+    }
+    if(testCol.indexOf(winSymbolZero) !== -1){
+        for(let i=0; i<sizeArray; i++) renderSymbolInCell (symbol, i, testCol.indexOf(winSymbolZero), color = '#f00');
+    }
 
-    /* Пользоваться методом для размещения символа в клетке так:
-        renderSymbolInCell(ZERO, row, col);
-     */
+}
+//покрас победных значений в диагоналях в красный
+function colorSymbolsWinDiag(symbol, winLine, direction, sizeArray){
+    for(let item in winLine){
+        if (direction === 'left') renderSymbolInCell (symbol, sizeArray-item-1, item, color = '#f00');
+        if (direction === 'right') renderSymbolInCell (symbol, item, item, color = '#f00');
+    }
 }
 
 function renderSymbolInCell (symbol, row, col, color = '#333') {
@@ -55,9 +175,14 @@ function addResetListener () {
 
 function resetClickHandler () {
     console.log('reset!');
+    win = false;
+    sizeArray = prompt("Введите размерность масссива", 3);
+    startGame();
+    createArray(sizeArray)
+    for(i=0;i<sizeArray;i++)
+        for(j=0;j<sizeArray;j++)
+            renderSymbolInCell(EMPTY, i, j);
 }
-
-
 /* Test Function */
 /* Победа первого игрока */
 function testWin () {
@@ -69,7 +194,6 @@ function testWin () {
     clickOnCell(1, 2);
     clickOnCell(2, 1);
 }
-
 /* Ничья */
 function testDraw () {
     clickOnCell(2, 0);