Берем 4 направления - [0,-1],[1,-1],[1,0],[1,1], к примеру - [0,-1] - это вверх. Инвертируем все цифры - получаем противоположное [0,1] - вниз.
Поставили, к примеру крестик.
Изменяем стартовые координаты на "направление". если там тоже крестик - идем дальше. Если нет - прекращаем.
Переключаемся на противоположное направление, считаем крестики. Если досчитали до 4-х - победа крестиков.
Если прошли все направления - отдаем ход. Ну и координатную сетку как-то надо вбить в разметку, например как-то так
// Создаю клетки 49 клеток с классом "cell"
for(let i = 1; i <= 49; i++) {
var x=Math.floor((i-1)/7)+1,y=((i-1)%7)+1;
area.innerHTML += `<div class='cell' id='id-`+x+`-`+y+`'></div>`
}
// Отслеживаю клик по клетке и выполняю функцию cellClick()
const cells = document.querySelectorAll('.cell')
cells.forEach(cell => {
cell.addEventListener('click', cellClick, false)
})
// Первый игрок - X
let player = 'x'
// В функции cellClick() я проверяю занята ли клетка, и если нет, то
// вставляю в неё текущего игрока.
function cellClick() {
/**
* проверяем, что по координатам x,y стоит нужный знак
*
* @param x
* @param y - координаты
* @param player - крестик
* @returns {boolean} true - стоит
*/
function check(x,y,player){
return document.getElementById('id-'+x+'-'+y).innerHTML==player;
}
/**
* считаем количество крестиков(player) от координаты x,y в "направлении" dx,dy
* @param dx
* @param dy
* @param x
* @param y
* @param player
* @returns {number}
*/
function countit(dx,dy,x,y, player){
var total=0;
x+=dx; y+=dy;
while (x>0 && x<=7 && y>0 && y<=7 ){
if(check(x,y,player))
total++;
else
break;
x+=dx; y+=dy;
}
return total;
}
if (!this.innerHTML) {
this.innerHTML = player;
// so checkit
var dirs=[[0,1],[-1,1],[-1,0],[-1,-1]],
// вычисляем текущие координаты клика
m=this.getAttribute('id').match(/id-(\d+)-(\d+)/),
// вот они - координаты. Умножение для преобразования строк в числа
x=1*m[1], y=1*m[2];
for(var d=0;d<dirs.length;d++){
if(5>1+ // 1 - мы поставили крестик
// число крестиков в направлении
countit(dirs[d][0],dirs[d][1], x, y, player) +
// и инвертированном направлении
countit([-dirs[d][0],-dirs[d][1]],x ,y , player)
){
// если меньше чем надо для победы - считаем дальше
continue;
}
// если нашли больше 5 крестиков в ряд - победа.
alert('Победа '+player);
break;
}
}
// Меняю игрока, если текущий игрок сходил.
player = player == "x" ? "o" : "x"
}
