Honestly, I could not understand your checks. But, I am sure, they are not even close workers. I tried to rewrite your condition, but I got 5 times more comparisons. Ten-story incomprehensible footcloth code. And I decided to rewrite it in a different way.
Flexible and simple option, not depending on the number of cells
With a fresh mind, he wrote a much simpler and concise version. It does not depend on the number of cells and does not require any configuration.
The logic of the work is based on the following rule for determining the victory in the game:
- the winning combination is either a complete set of cells of a single row (the index is the same for the row, the cells are iterated from 0 to the maximum in turn)
- or by a set of cells of one column (the same index of the column, the rows are iterated from 0 to the maximum)
- or a diagonal from the top-left corner to the bottom right (we iterate through all the cells that are located at the intersection of the same row and column indices: 0x0, 1x1, 2x2, etc)
- or diagonal from the left-bottom to the right-top corner (cell coordinates can be expressed in
[max - n - 1] x [n] . That is, for a 3x3 table, you need to sort the cells (n is the iteration number) n = 0: [3 - 0 - 1] x [0] (2x0), n = 1: [3 - 1 - 1] x [1] (1x1), n = 2: [3 - 2 - 1] x [2] (0x2)
Jsfiddle working example: https://jsfiddle.net/ipshenicyn/ds08m36y/1/
The example is supplemented with an input in which you need to enter a number, after which the table will be redrawn with the appropriate number of column rows.
The full js-code from the example (except for the function proverka added the functionality of redrawing the table and hanging listeners):
var table = document.getElementById("myTable"); function proverka() { var flag; var count = table.getElementsByTagName('tr').length; for(var i = 0; i < count; i++){ var winRow = true, winColumn = true, winLeftTop = true, winLeftBottom = true; for(var k = 0; k < count; k++){ if(table.rows[i].cells[k].innerHTML !== 'X') winRow = false; if(table.rows[k].cells[i].innerHTML !== 'X') winColumn = false; if(table.rows[k].cells[k].innerHTML !== 'X') winLeftTop = false; if(table.rows[count-1-k].cells[k].innerHTML !== 'X') winLeftBottom = false; } if(winRow || winColumn || winLeftTop || winLeftBottom){ flag = true; break; } } if (flag) { alert("победа"); } } //вешаем слушатели события click на поля таблицы после ее перерисовки var setTdListeners = function(){ var tds = document.getElementsByTagName('td'); for(var i = 0; i < tds.length; i++){ tds[i].addEventListener('click', function(){ if(this.innerHTML !== 'X'){ this.innerHTML = 'X'; } else { this.innerHTML = ''; } proverka(); }) }; }; //перерисовка таблицы после потери фокуса полем input document.getElementById('count').addEventListener('blur', function(){ var count = this.value; table.innerHTML = ''; for(var i = 0; i < count; i++){ var tr = document.createElement('tr'); for(var k = 0; k < count; k++){ var td = document.createElement('td'); tr.appendChild(td); } table.appendChild(tr); } setTdListeners(); });
The first option is not scalable.
But the presented version, at least in this form, is difficult to scale. To make a 4x4 field you have to hammer in combinations with your hands. True, there are only 10, so it is not difficult.
Jsfiddle working example: https://jsfiddle.net/ipshenicyn/ds08m36y/
var pos = [ //перечисление комбинаций выигрыша. массивы из двух элементов указывают позицию ячейки [строка, столбец] [[0,0],[0,1],[0,2]], //1 строка [[1,0],[1,1],[1,2]], //2 строка [[2,0],[2,1],[2,2]], //3 строка [[0,0],[1,0],[2,0]], //1 столбец [[0,1],[1,1],[2,1]], //2 столбец [[0,2],[1,2],[2,2]], //3 столбец [[0,0],[1,1],[2,2]], //лево-верх - право-низ [[2,0],[1,1],[0,2]], //лево-низ - право-верх ]; function proverka() { var table = document.getElementById("myTable"); var flag; for(var i = 0; i < pos.length; i++){ var win = true; for(var k = 0; k < pos[i].length; k++){ if(table.rows[pos[i][k][0]].cells[pos[i][k][1]].innerHTML !== 'X') win = false; } if(win){ flag = true; break; } } if (flag) { alert("победа"); } }
