Игра 5 точек в ряд

В данном видеоуроке я покажу вам простую реализацию игры 5 точек в ряд. Реализация будет не самая оптимальная с точки зрения производительности, зато самая простая для понимания. В конце я укажу на недостатки нашего кода и дам советы по его улучшению.

Исходники кода

<div id="game">
	<table class="field"></table>
</div>

table {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	table-layout: fixed;
}

td {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid black;
}

.gamer1 {
	background: red;
}
.gamer2 {
	background: green;
}
.gamer3 {
	background: yellow;
}

var game = document.querySelector('#game');
var field = game.querySelector('.field');

var rowsNum = 20;
var colsNum = 30;
var gamers = ['gamer1', 'gamer2'];
var gamerNum = 0;

var rows = fillField(field, rowsNum, colsNum);

var cols = getColumns(rows);
var diag1 = getFirstDiags(rows);
var diag2 = getSecondDiags(rows);
var lines = rows.concat(cols, diag1, diag2);
console.log(lines);

function checkWin(gamer, lines) {
	for (var i = 0; i < lines.length; i++) {
		for (var j = 4; j < lines[i].length; j++) {
			if (
				lines[i][j - 4].classList.contains(gamer) &&
				lines[i][j - 3].classList.contains(gamer) &&
				lines[i][j - 2].classList.contains(gamer) &&
				lines[i][j - 1].classList.contains(gamer) &&
				lines[i][j].classList.contains(gamer)
				) {
					return true;
			}
		}
	}
	
	return false;
}

function isWin(gamers, lines) {
	for (var i = 0; i < gamers.length; i++) {
		if (checkWin(gamers[i], lines)) {
			endGame(gamers[i]);
			break;
		}
	}
}

function endGame(gamer) {
	alert(gamer);
	freezeField(field);
}

function freezeField(field) {
	var cells = field.querySelectorAll('td');
	for (var i = 0; i < cells.length; i++) {
		cells[i].removeEventListener('click', cellClickHandler);
	}
}

function fillField(field, rowsNum, colsNum) {
	var rows = [];
	
	for (var i = 0; i < rowsNum; i++) {
		var tr = document.createElement('tr');
		rows[i] = [];
		
		for (var j = 0; j < colsNum; j++) {
			var td = document.createElement('td');
			tr.appendChild(td);
			
			td.addEventListener('click', cellClickHandler);
			rows[i][j] = td;
		}
		
		field.appendChild(tr);
	}
	
	return rows;
}

function cellClickHandler() {
	this.classList.add(gamers[gamerNum]);
	this.removeEventListener('click', cellClickHandler);
	
	isWin(gamers, lines);
	
	gamerNum++;
	if (gamerNum == gamers.length) {
		gamerNum = 0;
	}
}


function getColumns(arr) {
	var result = [];
	
	for (var i = 0; i < arr.length; i++) {
		for (var j = 0; j < arr[i].length; j++) {
			if (result[j] === undefined) {
				result[j] = [];
			}
			
			result[j][i] = arr[i][j];
		}
	}
	
	return result;
}

function getFirstDiags(arr) {
	var result = [];

	for (var i = 0; i < arr.length; i++) {
		for (var j = 0; j < arr[i].length; j++) {
			if (result[i + j] === undefined) {
				result[i + j] = [];
			}
			
			result[i + j].push(arr[i][j]);
		}
	}
	
	return result;
}

function getSecondDiags(arr) {
	return getFirstDiags(reverseSubArrs(arr));
}

function reverseSubArrs(arr) {
	var result = [];
	
	for (var i = 0; i < arr.length; i++) {
		for (var j = arr[i].length - 1; j >= 0; j--) {
			if (result[i] === undefined) {
				result[i] = [];
			}
			
			result[i].push(arr[i][j]);
		}
	}
	
	return result;
}

Смотрите также

видео
игра 5 точек в ряд на ООП JavaScript
видео
колонки и диагонали таблицы JavaScript