Игра Морской бой на JavaScript. Выстрел компьютера.

Вступление.

Заключительная статья из цикла «Игра Морской бой на чистом JavaScript». В этой статье мы рассмотрим:

Выбор координат для выстрела компьютера.
Обработка результата выстрела.
Определение гарантированно пустых клеток, в которых не может быть кораблей противника.
Вычисление координат следующего выстрела после попадания.
Анализ количества оставшихся кораблей противника (игрока) и их тип.

Для реализации всех выше перечисленных действий будем использовать Искусственный Интеллект (ИИ) или, другими словами, некий гибкий алгоритм действий, меняющийся в зависимости от обстановки на игровом поле.

Внимание.
Перед изучением JavaScript, реализующего выстрел компьютера, необходимо ознакомится со статьёй «Игра Морской бой на JavaScript. Выстрел игрока.». Ряд функций используется как для выстрела игрока, так и для выстрела компьютера и в данной статье повторно рассматриваться не будут.

Игра «Морской бой». Оптимальная тактика ведения морского боя компьютера.

Для того, чтобы компьютер мог, как минимум, играть на равных с человеком, он (компьютер) должен иметь некую тактику игры. Причём, данная тактика должна быть оптимальна применительно к игре «Морской бой» и обеспечивать высокие шансы на победу над человеком.
Исходя из этого, сразу же откажемся от рандомного обстрела поля игрока в начальной стадии игры. В рандомном формировании координат выстрела компьютера в полной мере присутствует элемент случайности, а нам, для победы компьютера над человеком, нужно свести этот элемент к минимуму.
В чём же будет заключаться оптимальная тактика игры? А в том, что компьютер будет методично обстреливать поле игрока по определённому алгоритму. Посмотрите внимательно на рисунок.

Игра Морской бой. Выбор координат для выстрела компьютера.

Заштрихованные клетки отображают координаты выстрелов компьютера. При такой тактике, компьютер максимум за 24 выстрела попадёт в четырёхпалубный корабль, и это в худшем варианте. В реальности, будут попадания и в другие корабли. Конечно, если игрок знает про такую тактику, то он может расположить все корабли, за исключением четырёх палубного, в клетках, которые не подвергнутся обстрелу.
Давайте усложним задачу и изменим наклон диагоналей, по которым будет вестись стрельба, и сведём полученные координаты в единый массив.

Игра Морской бой. Оптимальные координаты выстрела компьютера.

После такого обстрела, добить оставшиеся корабли игрока не составит труда, т. к. необстрелянных клеток, где может располагаться корабль, практически не останется.

Игра «Морской бой». Инициализация ведения морского боя компьютером.

Для формирования и хранения координат выстрела компьютера нам понадобится несколько несколько массивов и объектов, являющимися свойствами экземпляра comp конструктора Field. Рассмотрим подробно их название и назначение:

comp.shootMatrixAI — массив с заранее сгенерированными координатами выстрелов.
comp.shootMatrix — данный массив координат будет использован для рандомного обстрела, после того, как будут использованы все координаты из массива comp.shootMatrixAI. Изначально в данном массиве содержаться координаты всех клеток игрового поля. При каждом выстреле компьютера, координата выстрела будет удаляться из данного массива. Так же будут удаляться и координаты гарантированно пустых клеток. В результате, после того, как будут использованы все значения массива comp.shootMatrixAI, в массиве comp.shootMatrix останутся лишь те координаты, где реально может быть расположен корабль игрока. Вот эти оставшиеся координаты и будут использоваться для следующего выстрела.
comp.shootMatrixAround — в данный массив будут записаны координаты клеток, расположенных вокруг попадания.
comp.startPoints — служебный массив, в котором находятся координаты начала диагоналей. Эти данные используется для формирования координат, которые будут записываться в массив comp.shootMatrixAI.
comp.tempShip — временный объект для хранения первого и второго попадания (данная информация необходима для определения положения корабля), координаты первой палубы и количество попаданий.

Теперь инициализируем эти массивы и объекты. Делать это будем в свойстве init объекта battle, который находится в модуле Controller.

Внимание.
Более подробно о модуле Controller и его объекте battle изложено в статье «Игра Морской бой на JavaScript. Редактирование положения корабля и начало игры.»

Добавим следующий JS-код в свойство init:


// инициализация игры
init: function() {
	self = this;
	// рандомно определяем кто будет стрелять первым: человек или компьютер 
	var rnd = getRandom(1);
	player = (rnd == 0) ? user : comp;
	// определяем, кто будет противником, т.е. чей выстрел следующий
	enemy = (player === user) ? comp : user;

	// массив с координатами выстрелов при рандомном выборе
	comp.shootMatrix = [];
	// массив с координатами выстрелов для ИИ
	comp.shootMatrixAI = [];
	// массив с координатами вокруг клетки с попаданием
	comp.shootMatrixAround = [];
	// массив координат начала циклов
	comp.startPoints = [
		// начальные координаты "красных" диагоналей
		[ [6,0], [2,0], [0,2], [0,6] ],
		// начальные координаты "синих" диагоналей
		[ [3,0], [7,0], [9,2], [9,6] ]
	];
	// объект для хранения информация по обстреливаемому кораблю
	// в момент инициализации вся информации обнулена
	comp.tempShip = {
		// количество попаданий в корабль
		totalHits: 0,
		// объекты для хранения координат первого и второго попадания
		// необходимы для вычисления положения корабля
		firstHit: {},
		nextHit: {},
		// значения коэффициентов зависит от положения корабля
		// данные значения используются для вычисления координат
		// обстрела "раненого" корабля
		kx: 0,
		ky: 0
	};
	
	// генерируем координаты выстрелов компьютера в соответствии
	// с рассмотренной стратегией и заносим их в массивы
	// shootMatrix и shootMatrixAI
	self.setShootMatrix();

	// первым стреляет человек
	if (player === user) {
		// устанавливаем на игровое поле компьютера обработчики событий
		// регистрируем обработчик выстрела
		compfield.addEventListener('click', self.shoot);
		// регистрируем обработчик визуальной отметки клеток, в которых
		// однозначно не может быть кораблей противника
		compfield.addEventListener('contextmenu', self.setEmptyCell);
		// выводим сообщение о том, что первый выстрел за пользователем
		self.showServiseText('Вы стреляете первым.');
	}
}

// инициализация игры

init: function() {

self = this;

// рандомно определяем кто будет стрелять первым: человек или компьютер

var rnd = getRandom(1);

player = (rnd == 0) ? user : comp;

// определяем, кто будет противником, т.е. чей выстрел следующий

enemy = (player === user) ? comp : user;

// массив с координатами выстрелов при рандомном выборе

comp.shootMatrix = [];

// массив с координатами выстрелов для ИИ

comp.shootMatrixAI = [];

// массив с координатами вокруг клетки с попаданием

comp.shootMatrixAround = [];

// массив координат начала циклов

comp.startPoints = [

// начальные координаты "красных" диагоналей

[ [6,0], [2,0], [0,2], [0,6] ],

// начальные координаты "синих" диагоналей

[ [3,0], [7,0], [9,2], [9,6] ]

];

// объект для хранения информация по обстреливаемому кораблю

// в момент инициализации вся информации обнулена

comp.tempShip = {

// количество попаданий в корабль

totalHits: 0,

// объекты для хранения координат первого и второго попадания

// необходимы для вычисления положения корабля

firstHit: {},

nextHit: {},

// значения коэффициентов зависит от положения корабля

// данные значения используются для вычисления координат

// обстрела "раненого" корабля

kx: 0,

ky: 0

};

// генерируем координаты выстрелов компьютера в соответствии

// с рассмотренной стратегией и заносим их в массивы

// shootMatrix и shootMatrixAI

self.setShootMatrix();

// первым стреляет человек

if (player === user) {

// устанавливаем на игровое поле компьютера обработчики событий

// регистрируем обработчик выстрела

compfield.addEventListener('click', self.shoot);

// регистрируем обработчик визуальной отметки клеток, в которых

// однозначно не может быть кораблей противника

compfield.addEventListener('contextmenu', self.setEmptyCell);

// выводим сообщение о том, что первый выстрел за пользователем

self.showServiseText('Вы стреляете первым.');

}

Игра «Морской бой». Формирование массивов с координатами выстрела компьютера.

Для заполнения массивов shootMatrixAI и shootMatrix координатами выстрелов запускается функция setShootMatrix, являющаяся методом объекта battle и использующая в своей работе данные массива startPoints. Прежде чем рассматривать работу данной функции, давайте сначала более подробно разберём содержание массива startPoints.

Массив startPoints содержит в себе всего лишь два элемента, каждый из которых, в свою очередь, так же является массивом. Первый массив содержит координаты начальных точек четырёх диагоналей направленных вправо-вниз. На рисунке они изображены красным цветом. Второй — координаты начальных точек четырёх диагоналей направленных вправо-вверх. На рисунке они отображены синим цветом.

Добавим в конец объекта battle следующий JS-код:


setShootMatrix: function() {
	// заполняем массив shootMatrix координатами каждой из
	// 100 клеток игрового поля
	for (var i = 0; i < 10; i++) {
		for(var j = 0; j < 10; j++) {
			comp.shootMatrix.push([i, j]);
		}
	}

	// заполняем массив shootMatrixAI
	for (var i = 0, length = comp.startPoints.length; i < length; i++) {
		// получаем массив координат начальных точек диагоналей
		var arr = comp.startPoints[i];
		for (var j = 0, lh = arr.length; j < lh; j++) {
			// координаты текущей начальной точки диагонали
			var x = arr[j][0],
				y = arr[j][1];

			// в зависимости от направления диагонали используется разный алгоритм
			// получения и проверки следующей координаты клетки расположенной на
			// диагонали
			switch(i) {
				// получаем координаты клеток находящиеся на диагоналях направленных
				// вправо-вниз, при этом и координата 'X', и координата 'Y' увеличиваются
				// на единицу при каждом цикле, пока не достигнут своих предельных
				// значений
				case 0:
					while(x <= 9 && y <= 9) {
						comp.shootMatrixAI.push([x,y]);
						x = (x <= 9) ? x : 9;
						y = (y <= 9) ? y : 9;
						x++; y++;
					};
					break;

				// получаем координаты клеток находящиеся на диагоналях направленных
				// вправо-вверх, при этом у координты 'X' при каждом цикле значение
				// уменьшается на единицу, а у координаты 'Y' - увеличивается,
				// пока не достигнут своих предельных значений
				case 1:
					while(x >= 0 && x <= 9 && y <= 9) {
						comp.shootMatrixAI.push([x,y]);
						x = (x >= 0 && x <= 9) ? x : (x < 0) ? 0 : 9;
						y = (y <= 9) ? y : 9;
						x--; y++;
					};
					break;
			}
		}
	}

	// перемешиваем полученные массивы shootMatrix и shootMatrixAi,
	// чтобы игрок не мог определить тактику компьютера 
	function compareRandom(a, b) {
		return Math.random() - 0.5;
	}
	comp.shootMatrix.sort(compareRandom);
	comp.shootMatrixAI.sort(compareRandom);
}

setShootMatrix: function() {

// заполняем массив shootMatrix координатами каждой из

// 100 клеток игрового поля

for (var i = 0; i < 10; i++) {

for(var j = 0; j < 10; j++) {

comp.shootMatrix.push([i, j]);

}

// заполняем массив shootMatrixAI

for (var i = 0, length = comp.startPoints.length; i < length; i++) {

// получаем массив координат начальных точек диагоналей

var arr = comp.startPoints[i];

for (var j = 0, lh = arr.length; j < lh; j++) {

// координаты текущей начальной точки диагонали

var x = arr[j][0],

y = arr[j][1];

// в зависимости от направления диагонали используется разный алгоритм

// получения и проверки следующей координаты клетки расположенной на

// диагонали

switch(i) {

// получаем координаты клеток находящиеся на диагоналях направленных

// вправо-вниз, при этом и координата 'X', и координата 'Y' увеличиваются

// на единицу при каждом цикле, пока не достигнут своих предельных

// значений

case 0:

while(x <= 9 && y <= 9) {

comp.shootMatrixAI.push([x,y]);

x = (x <= 9) ? x : 9;

y = (y <= 9) ? y : 9;

x++; y++;

};

break;

// получаем координаты клеток находящиеся на диагоналях направленных

// вправо-вверх, при этом у координты 'X' при каждом цикле значение

// уменьшается на единицу, а у координаты 'Y' - увеличивается,

// пока не достигнут своих предельных значений

case 1:

while(x >= 0 && x <= 9 && y <= 9) {

comp.shootMatrixAI.push([x,y]);

x = (x >= 0 && x <= 9) ? x : (x < 0) ? 0 : 9;

y = (y <= 9) ? y : 9;

x--; y++;

};

break;

}

// перемешиваем полученные массивы shootMatrix и shootMatrixAi,

// чтобы игрок не мог определить тактику компьютера

function compareRandom(a, b) {

return Math.random() - 0.5;

}

comp.shootMatrix.sort(compareRandom);

comp.shootMatrixAI.sort(compareRandom);

}

Игра «Морской бой». Получение координат для выстрела компьютера.

Добавим в конец свойства init JS-код, который выводит сообщение о том, что первым стреляет компьютер и после небольшой задержки, запускающий первый выстрел компьютера в игре «Морской бой»:


// инициализация игры
init: function() {
	self = this;
	// рандомно определяем кто будет стрелять первым: человек или компьютер 
	var rnd = getRandom(1);
	player = (rnd == 0) ? user : comp;
	// определяем, кто будет противником, т.е. чей выстрел следующий
	enemy = (player === user) ? comp : user;

	// массив с координатами выстрелов при рандомном выборе
	comp.shootMatrix = [];
	// массив с координатами выстрелов для AI
	comp.shootMatrixAI = [];
	// массив с координатами вокруг клетки с попаданием
	comp.shootMatrixAround = [];
	// массив координат начала циклов
	comp.startPoints = [
		// начальные координаты "красных" диагоналей
		[ [6,0], [2,0], [0,2], [0,6] ],
		// начальные координаты "синих" диагоналей
		[ [3,0], [7,0], [9,2], [9,6] ]
	];
	// объект для хранения информация по обстреливаемому кораблю
	// в момент инициализации вся информации обнулена
	comp.tempShip = {
		// количество попаданий в корабль
		totalHits: 0,
		// объекты для хранения координат первого и второго попадания
		// необходимы для вычисления положения корабля
		firstHit: {},
		nextHit: {},
		// значения коэффициентов зависит от положения корабля
		// данные значения используются для вычисления координат
		// обстрела "раненого" корабля
		kx: 0,
		ky: 0
	};
	
	// генерируем координаты выстрелов компьютера в соответствии
	// с рассмотренной стратегией и заносим их в массивы
	// shootMatrix и shootMatrixAI
	self.setShootMatrix();

	// первым стреляет человек
	if (player === user) {
		// устанавливаем на игровое поле компьютера обработчики событий
		// регистрируем обработчик выстрела
		compfield.addEventListener('click', self.shoot);
		// регистрируем обработчик визуальной отметки клеток, в которых
		// однозначно не может быть кораблей противника
		compfield.addEventListener('contextmenu', self.setEmptyCell);
		// выводим сообщение о том, что первый выстрел за пользователем
		self.showServiseText('Вы стреляете первым.');
	} else {
		// выводим сообщение о том, что первым стреляет компьютер
		self.showServiseText('Первым стреляет компьютер.');
		// через одну секунду вызываем функцию выстрела
		setTimeout(function() {
			return self.shoot();
		}, 1000);
	}
}

// инициализация игры

init: function() {

self = this;

// рандомно определяем кто будет стрелять первым: человек или компьютер

var rnd = getRandom(1);

player = (rnd == 0) ? user : comp;

// определяем, кто будет противником, т.е. чей выстрел следующий

enemy = (player === user) ? comp : user;

// массив с координатами выстрелов при рандомном выборе

comp.shootMatrix = [];

// массив с координатами выстрелов для AI

comp.shootMatrixAI = [];

// массив с координатами вокруг клетки с попаданием

comp.shootMatrixAround = [];

// массив координат начала циклов

comp.startPoints = [

// начальные координаты "красных" диагоналей

[ [6,0], [2,0], [0,2], [0,6] ],

// начальные координаты "синих" диагоналей

[ [3,0], [7,0], [9,2], [9,6] ]

];

// объект для хранения информация по обстреливаемому кораблю

// в момент инициализации вся информации обнулена

comp.tempShip = {

// количество попаданий в корабль

totalHits: 0,

// объекты для хранения координат первого и второго попадания

// необходимы для вычисления положения корабля

firstHit: {},

nextHit: {},

// значения коэффициентов зависит от положения корабля

// данные значения используются для вычисления координат

// обстрела "раненого" корабля

kx: 0,

ky: 0

};

// генерируем координаты выстрелов компьютера в соответствии

// с рассмотренной стратегией и заносим их в массивы

// shootMatrix и shootMatrixAI

self.setShootMatrix();

// первым стреляет человек

if (player === user) {

// устанавливаем на игровое поле компьютера обработчики событий

// регистрируем обработчик выстрела

compfield.addEventListener('click', self.shoot);

// регистрируем обработчик визуальной отметки клеток, в которых

// однозначно не может быть кораблей противника

compfield.addEventListener('contextmenu', self.setEmptyCell);

// выводим сообщение о том, что первый выстрел за пользователем

self.showServiseText('Вы стреляете первым.');

} else {

// выводим сообщение о том, что первым стреляет компьютер

self.showServiseText('Первым стреляет компьютер.');

// через одну секунду вызываем функцию выстрела

setTimeout(function() {

return self.shoot();

}, 1000);

}

Координаты очередного выстрела компьютера будем получать, в зависимости от игровой обстановки, в одном из трёх массивов: shootMatrixAround, shootMatrixAI или shootMatrix.

В-первую очередь обращаемся к массиву shootMatrixAround в котором хранятся координаты выстрелов для обстрела клетки с попаданием, получаем его элемент и считываем из него координаты выстрела.
Если попадания ещё не было или координаты, хранившиеся в данном массиве, уже использованы для предыдущих выстрелов, т. е. массив shootMatrixAround в данный момент пустой, то обращаемся к массиву shootMatrixAI и получаем элемент с координатами из него.
Если и массив shootMatrixAI пустой (все диагонали обстреляны), то координаты выстрела берём из массива shootMatrix.
Данные из массивов получаем используя метод pop. Данный метод удаляет последний элемент из массива и возвращает его.

В предыдущей статье мы рассматривали работу функции shoot применительно к выстрелу игрока. Теперь рассмотрим JS-код, который относится к выстрелу компьютера:


shoot: function(e) {
	// e !== undefined - значит выстрел производит игрок
	if (e !== undefined) {
		// если клик сделан не левой кнопкой мыши, прекращаем работу функции
		if (e.which != 1) return false;
		// преобразуем координаты выстрела в координаты матрицы
		coords = self.transformCoordinates(e, enemy);
	} else {
		// получаем координаты выстрела компьютера в формате объекта
		// с двумя свойствами: X и Y
		coords = self.getCoordinatesShot();
	}

	// значение матрицы по полученным координатам
	var val	= enemy.matrix[coords.x][coords.y];

	...
}

shoot: function(e) {

// e !== undefined - значит выстрел производит игрок

if (e !== undefined) {

// если клик сделан не левой кнопкой мыши, прекращаем работу функции

if (e.which != 1) return false;

// преобразуем координаты выстрела в координаты матрицы

coords = self.transformCoordinates(e, enemy);

} else {

// получаем координаты выстрела компьютера в формате объекта

// с двумя свойствами: X и Y

coords = self.getCoordinatesShot();

}

// значение матрицы по полученным координатам

var val = enemy.matrix[coords.x][coords.y];

...

}

Внимание.
Все рассматриваемые ниже функции, являются методами объекта battle и будут записываться в конец объекта в формате простой литеральной нотации.


getCoordinatesShot: function() {
	// в первую очередь, обращаемся к массиву shootMatrixAround и получаем
	// координаты для обстрела попадания, если данный массив пустой, то
	// если ещё есть координаты выстрелов для реализации оптимальной
	// тактики, получаем их, в противном случае
	// берём координаты очередного выстрела из массива shootMatrix
	coords = (comp.shootMatrixAround.length > 0) : comp.shootMatrixAround.pop() ? (comp.shootMatrixAI.length > 0) ? comp.shootMatrixAI.pop() : comp.shootMatrix.pop();

	// заносим полученные координаты в объект
	var obj = {
		x: coords[0],
		y: coords[1]
	};

	// удаляем выбранные координаты из массивов shootMatrixAI и shootMatrix
	// для исключения повторной стрельбы по этим координатам в дальнейшем
	if (comp.shootMatrixAI.length != 0) {
		self.deleteElementMatrix(comp.shootMatrixAI, obj);
	}
	self.deleteElementMatrix(comp.shootMatrix, obj);

	return obj;
}

getCoordinatesShot: function() {

// в первую очередь, обращаемся к массиву shootMatrixAround и получаем

// координаты для обстрела попадания, если данный массив пустой, то

// если ещё есть координаты выстрелов для реализации оптимальной

// тактики, получаем их, в противном случае

// берём координаты очередного выстрела из массива shootMatrix

coords = (comp.shootMatrixAround.length > 0) : comp.shootMatrixAround.pop() ? (comp.shootMatrixAI.length > 0) ? comp.shootMatrixAI.pop() : comp.shootMatrix.pop();

// заносим полученные координаты в объект

var obj = {

x: coords[0],

y: coords[1]

};

// удаляем выбранные координаты из массивов shootMatrixAI и shootMatrix

// для исключения повторной стрельбы по этим координатам в дальнейшем

if (comp.shootMatrixAI.length != 0) {

self.deleteElementMatrix(comp.shootMatrixAI, obj);

}

self.deleteElementMatrix(comp.shootMatrix, obj);

return obj;

}

Как видно из приведённого кода, у нас появилась ещё одна новая функция — deleteElementMatrix, с помощью которой можно удалить элемент массива содержащий определённые координаты. Данная функции имеет два аргумента:
— массив, из которого нужно удалить элемент;
— объект с координатами выстрела.

Рассмотрим подробно код функции:


deleteElementMatrix: function(array, obj) {
	// перебираем массив
	for (var i = 0, lh = array.length; i < lh; i++) {
		// находим ячейку массива, в которой содержатся координаты равные
		// переданным во втором аргументе и удаляем эту ячейку
		if (array[i][0] == obj.x && array[i][1] == obj.y) {
			array.splice(i, 1);
			// нужный элемент массива удалён, поэтому перебирать массив
			// далее нет смысла, поэтому прерываем цикл
			break;
		}
	}
}

deleteElementMatrix: function(array, obj) {

// перебираем массив

for (var i = 0, lh = array.length; i < lh; i++) {

// находим ячейку массива, в которой содержатся координаты равные

// переданным во втором аргументе и удаляем эту ячейку

if (array[i][0] == obj.x && array[i][1] == obj.y) {

array.splice(i, 1);

// нужный элемент массива удалён, поэтому перебирать массив

// далее нет смысла, поэтому прерываем цикл

break;

}

Итак, координаты для выстрела получены. Теперь рассмотрим сам выстрел и оценку его результатов.

Игра «Морской бой». Выстрел компьютера и оценка его результата.

Внимание.
Ещё раз настоятельно рекомендую ознакомится со статьёй «Игра Морской бой на JavaScript. Выстрел игрока.», в частности, с разделом «Игра «Морской бой». Обработка результатов выстрела.»

Выстрел представляет из себя извлечение значения двумерного массива игрового поля противника (user.matrix) по координатам, взятым из одного из трёх массивов: shootMatrixAround, shootMatrixAI или shootMatrix. Для обработки полученного значения будем использовать конструкцию switch, аргументом которой является переменная val.

Игра «Морской бой». Промах.

Промах подробно я рассматривать не буду, т. к. JS-код в этом случае является практически общим, как для игрока, так и для компьютера. Всё отличие в устанавливаемых и удаляемых обработчиках событий. Всё это описано в предыдущей статье. Единственное, что я сделаю — это добавлю несколько строчек кода, которые сбрасывают свойства объекта comp.tempShip в исходное состояние, если массив shootMatrixAround пустой.
Этот сброс имеет значение в том случае, если происходит обстрел вокруг попадания и, если все координаты из массива использованы, значит корабль потоплен.


case 0:
	// устанавливаем иконку промаха и записываем промах в матрицу
	self.showIcons(enemy, coords, 'dot');
	enemy.matrix[coords.x][coords.y] = 3;

	// выводим сообщение о промахе в нижней части экрана
	text = (player === user) ? 'Вы промахнулись. Стреляет компьютер.' : 'Компьютер промахнулся. Ваш выстрел.';
	self.showServiseText(text);

	// определяем, чей выстрел следующий
	player = (player === user) ? comp : user;
	enemy = (player === user) ? comp : user;

	// следующий выстрел компьютера
	if (player == comp) {
		// снимаем обработчики событий для пользователя
		compfield.removeEventListener('click', self.shoot);
		compfield.removeEventListener('contextmenu', self.setEmptyCell);

		// проверяем, есть ли ещё координаты для обстрела вокруг попадания
		if (comp.shootMatrixAround.length == 0) {
			// если массив пустой, считаем обстреливаемый корабль потопленным
			// сбрасываем свойства объекта tempShip в исходное состояние
			self.resetTempShip();
		}

		// запускаем функцию shoot для выстрела компьютера
		setTimeout(function() {
			return self.shoot();
		}, 1000);

	// следующий выстрел игрока
	} else {
		// устанавливаем обработчики событий для пользователя
		compfield.addEventListener('click', self.shoot);
		compfield.addEventListener('contextmenu', self.setEmptyCell);
	}
break;

case 0:

// устанавливаем иконку промаха и записываем промах в матрицу

self.showIcons(enemy, coords, 'dot');

enemy.matrix[coords.x][coords.y] = 3;

// выводим сообщение о промахе в нижней части экрана

text = (player === user) ? 'Вы промахнулись. Стреляет компьютер.' : 'Компьютер промахнулся. Ваш выстрел.';

self.showServiseText(text);

// определяем, чей выстрел следующий

player = (player === user) ? comp : user;

enemy = (player === user) ? comp : user;

// следующий выстрел компьютера

if (player == comp) {

// снимаем обработчики событий для пользователя

compfield.removeEventListener('click', self.shoot);

compfield.removeEventListener('contextmenu', self.setEmptyCell);

// проверяем, есть ли ещё координаты для обстрела вокруг попадания

if (comp.shootMatrixAround.length == 0) {

// если массив пустой, считаем обстреливаемый корабль потопленным

// сбрасываем свойства объекта tempShip в исходное состояние

self.resetTempShip();

}

// запускаем функцию shoot для выстрела компьютера

setTimeout(function() {

return self.shoot();

}, 1000);

// следующий выстрел игрока

} else {

// устанавливаем обработчики событий для пользователя

compfield.addEventListener('click', self.shoot);

compfield.addEventListener('contextmenu', self.setEmptyCell);

}

break;

У нас появилась новая функция — resetTempShip, которая приводит все свойства объекта tempShip в исходные значения, которые были установлены при инициализации морского боя.


resetTempShip: function() {
	// обнуляем массив с координатами обстрела клеток
	// вокруг попадания
	comp.shootMatrixAround = [];
	comp.tempShip = {
		// количество попаданий в корабль
		totalHits: 0,
		// объекты для хранения координат первого и второго попадания
		// необходимы для вычисления положения корабля
		firstHit: {},
		nextHit: {},
		// значения коэффициентов зависит от положения корабля
		// данные значения используются для вычисления координат
		// обстрела "раненого" корабля
		kx: 0,
		ky: 0
	};
}

resetTempShip: function() {

// обнуляем массив с координатами обстрела клеток

// вокруг попадания

comp.shootMatrixAround = [];

comp.tempShip = {

// количество попаданий в корабль

totalHits: 0,

// объекты для хранения координат первого и второго попадания

// необходимы для вычисления положения корабля

firstHit: {},

nextHit: {},

// значения коэффициентов зависит от положения корабля

// данные значения используются для вычисления координат

// обстрела "раненого" корабля

kx: 0,

ky: 0

};

}

Если вы обратили внимание, то код этой функции, кроме одной строчки, совпадает с инициализацией обекта tempShip в функции init. Логично будет заменить код инициализации, вызовом функции resetTempShip.


// инициализация игры
init: function() {
	self = this;
	// рандомно определяем кто будет стрелять первым: человек или компьютер 
	var rnd = getRandom(1);
	player = (rnd == 0) ? user : comp;
	// определяем, кто будет противником, т.е. чей выстрел следующий
	enemy = (player === user) ? comp : user;

	// массив с координатами выстрелов при рандомном выборе
	comp.shootMatrix = [];
	// массив с координатами выстрелов для AI
	comp.shootMatrixAI = [];
	// массив с координатами вокруг клетки с попаданием
	comp.shootMatrixAround = [];
	// массив координат начала циклов
	comp.startPoints = [
		// начальные координаты "красных" диагоналей
		[ [6,0], [2,0], [0,2], [0,6] ],
		// начальные координаты "синих" диагоналей
		[ [3,0], [7,0], [9,2], [9,6] ]
	];
	// объект для хранения информация по обстреливаемому кораблю
	// в момент инициализации вся информации обнулена
	self.resetTempShip();
	
	// генерируем координаты выстрелов компьютера в соответствии
	// с рассмотренной стратегией и заносим их в массивы
	// shootMatrix и shootMatrixAI
	self.setShootMatrix();

	// первым стреляет человек
	if (player === user) {
		// устанавливаем на игровое поле компьютера обработчики событий
		// регистрируем обработчик выстрела
		compfield.addEventListener('click', self.shoot);
		// регистрируем обработчик визуальной отметки клеток, в которых
		// однозначно не может быть кораблей противника
		compfield.addEventListener('contextmenu', self.setEmptyCell);
		// выводим сообщение о том, что первый выстрел за пользователем
		self.showServiseText('Вы стреляете первым.');
	} else {
		// выводим сообщение о том, что первым стреляет компьютер
		self.showServiseText('Первым стреляет компьютер.');
		// через одну секунду вызываем функцию выстрела
		setTimeout(function() {
			return self.shoot();
		}, 1000);
	}
}

// инициализация игры

init: function() {

self = this;

// рандомно определяем кто будет стрелять первым: человек или компьютер

var rnd = getRandom(1);

player = (rnd == 0) ? user : comp;

// определяем, кто будет противником, т.е. чей выстрел следующий

enemy = (player === user) ? comp : user;

// массив с координатами выстрелов при рандомном выборе

comp.shootMatrix = [];

// массив с координатами выстрелов для AI

comp.shootMatrixAI = [];

// массив с координатами вокруг клетки с попаданием

comp.shootMatrixAround = [];

// массив координат начала циклов

comp.startPoints = [

// начальные координаты "красных" диагоналей

[ [6,0], [2,0], [0,2], [0,6] ],

// начальные координаты "синих" диагоналей

[ [3,0], [7,0], [9,2], [9,6] ]

];

// объект для хранения информация по обстреливаемому кораблю

// в момент инициализации вся информации обнулена

self.resetTempShip();

// генерируем координаты выстрелов компьютера в соответствии

// с рассмотренной стратегией и заносим их в массивы

// shootMatrix и shootMatrixAI

self.setShootMatrix();

// первым стреляет человек

if (player === user) {

// устанавливаем на игровое поле компьютера обработчики событий

// регистрируем обработчик выстрела

compfield.addEventListener('click', self.shoot);

// регистрируем обработчик визуальной отметки клеток, в которых

// однозначно не может быть кораблей противника

compfield.addEventListener('contextmenu', self.setEmptyCell);

// выводим сообщение о том, что первый выстрел за пользователем

self.showServiseText('Вы стреляете первым.');

} else {

// выводим сообщение о том, что первым стреляет компьютер

self.showServiseText('Первым стреляет компьютер.');

// через одну секунду вызываем функцию выстрела

setTimeout(function() {

return self.shoot();

}, 1000);

}

Игра «Морской бой». Попадание в корабль игрока.

JS-код обработки попадания в корабль игрока во многом совпадает с JS-кодом обработки попадания в корабль компьютера, но есть существенные дополнения, касающиеся ИИ компьютера.

Алгоритм обработка результата попадания в корабль игрока:

1
Визуально отображаем попадание и записываем в матрицу игрового поля игрока по этим координатам значение 4. Выводим сообщение о попадании.
2
Перебираем массив эскадры игрока — user.squadron, в котором храниться информация о каждом корабле, и определяем корабль в который произошло попадание. Увеличиваем счётчик попадания на 1. Если количество попаданий в корабль становится равным количеству палуб, считаем этот корабль уничтоженным и удаляем его из эскадры, но перед этим сохраняем координаты первой палубы удаляемого корабля в объект comp.tempShip. Эти координаты понадобятся для отметки клеток по краям корабля.
3
Проверяем, все ли корабли игрока потоплены. Если эскадра игрока полностью уничтожена, выводим оставшиеся корабли компьютера на экран и заканчиваем игру. В противном случае, переходим к следующему пункту нашего алгоритма.
4
Увеличиваем счётчик попаданий, являющийся свойством объекта comp.tempShip и отмечаем гарантированно пустые клетки вокруг попадания.
5
Проверяем, остались ли в эскадре игрока корабли, количество палуб которых больше, чем значение сётчика попаданий. Если таких кораблей не найдено, то:
1. считаем, что обстреливаемый корабль потоплен;
2. помечаем клетки вокруг корабля, как гарантированно пустые;
3. сбрасываем значения свойств объекта comp.tempShip в исходное состояние;
4. переходим к следующему выстрелу по игровому полю игрока.
6
Если найдены корабли, у которых количество палуб больше, чем количество попаданий, то продолжаем уничтожение текущего корабля путём обстрела вокруг палубы, в которую было сделано попадание.

Игра «Морской бой». Сохраняем координаты первой палубы потопленного корабля.

На первом и втором пунктах приведённого алгоритма я останавливаться не буду, т. к. JS-код используется тот же самый, что и при выстреле игрока. Рассмотрим только сохранение координат первой палубы корабля в объект comp.tempShip. Напомню, что каждый элемент массива squadron представляет из себя объект (ассоциативный массив), в котором хранится вся информация по кораблю. В частности, координаты первой палубы находятся в свойствах x0 и y0.


case 1:
	// записываем в матрицу значение '4', которое соответствует попаданию
	enemy.matrix[coords.x][coords.y] = 4;
	// отображаем иконку попадания
	self.showIcons(enemy, coords, 'red-cross');
	// выводим сообщение о попадании в нижней части экрана
	text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';
	self.showServiseText(text);

	// необходимо найти корабль, в который попали
	// перебор массива начнём с конца, для получения корректных значений
	// при возможном удалении его элементов
	for (var i = enemy.squadron.length - 1; i >= 0; i--) {
		var warship		= enemy.squadron[i], // полная информация о корабле
			arrayDescks	= warship.matrix; // массив с координатами палуб

		// перебираем координаты палуб корабля
		for (var j = 0, length = arrayDescks.length; j < length; j++) {
			// сравниваем координаты палубы с координатами выстрела
			if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {
				// если координаты одной из палуб совпали с координатами выстрела
				// увеличиваем счётчик попаданий
				warship.hits++;

				// если кол-во попаданий в корабль становится равным кол-ву палуб
				// считаем этот корабль уничтоженным и удаляем его из эскадры,
				// но перед этим сохраняем координаты первой палубы удаляемого корабля
				// понадобятся для отметки клеток по краям корабля
				if (warship.hits == warship.decks) {
					if (player === comp) {
						// сохраняем координаты первой палубы
						comp.tempShip.x0 = warship.x0;
						comp.tempShip.y0 = warship.y0;
					}
					enemy.squadron.splice(i, 1);
				}
				// выходим из цикла, т.к. палуба найдена
				break;
			}
		}
	}

	// все корабли эскадры противника уничтожены, игра закончена
	if (enemy.squadron.length == 0) {
		text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';
		srvText.innerHTML = text;

		// победа игрока
		if (player == user) {
			// удаляем обработчики событий для пользователя
			compfield.removeEventListener('click', self.shoot);
			compfield.removeEventListener('contextmenu', self.setEmptyCell);
		// победа компьютера
		} else {
			// если выиграл комп., показываем оставшиеся корабли компьютера
			// подробно рассмотрим ниже
			.....
		}
	// бой продолжается
	} else {
		// следующий выстрел компьютера
		if (player === comp) {
			// подготовка к выстрелу и сам выстрел
			// подробно рассмотрим ниже
			.....
		}
	}
	break;

case 1:

// записываем в матрицу значение '4', которое соответствует попаданию

enemy.matrix[coords.x][coords.y] = 4;

// отображаем иконку попадания

self.showIcons(enemy, coords, 'red-cross');

// выводим сообщение о попадании в нижней части экрана

text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';

self.showServiseText(text);

// необходимо найти корабль, в который попали

// перебор массива начнём с конца, для получения корректных значений

// при возможном удалении его элементов

for (var i = enemy.squadron.length - 1; i >= 0; i--) {

var warship = enemy.squadron[i], // полная информация о корабле

arrayDescks = warship.matrix; // массив с координатами палуб

// перебираем координаты палуб корабля

for (var j = 0, length = arrayDescks.length; j < length; j++) {

// сравниваем координаты палубы с координатами выстрела

if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {

// если координаты одной из палуб совпали с координатами выстрела

// увеличиваем счётчик попаданий

warship.hits++;

// если кол-во попаданий в корабль становится равным кол-ву палуб

// считаем этот корабль уничтоженным и удаляем его из эскадры,

// но перед этим сохраняем координаты первой палубы удаляемого корабля

// понадобятся для отметки клеток по краям корабля

if (warship.hits == warship.decks) {

if (player === comp) {

// сохраняем координаты первой палубы

comp.tempShip.x0 = warship.x0;

comp.tempShip.y0 = warship.y0;

}

enemy.squadron.splice(i, 1);

}

// выходим из цикла, т.к. палуба найдена

break;

}

// все корабли эскадры противника уничтожены, игра закончена

if (enemy.squadron.length == 0) {

text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';

srvText.innerHTML = text;

// победа игрока

if (player == user) {

// удаляем обработчики событий для пользователя

compfield.removeEventListener('click', self.shoot);

compfield.removeEventListener('contextmenu', self.setEmptyCell);

// победа компьютера

} else {

// если выиграл комп., показываем оставшиеся корабли компьютера

// подробно рассмотрим ниже

.....

}

// бой продолжается

} else {

// следующий выстрел компьютера

if (player === comp) {

// подготовка к выстрелу и сам выстрел

// подробно рассмотрим ниже

.....

}

break;

Игра «Морской бой». Выводим корабли компьютера на экран.

Внимание.
Для лучшего понимания ниже изложенного материала, рекомендую ещё раз прочитать раздел «Игра Морской бой. Вывод корабля на экран монитора» в статье «Игра Морской бой на JavaScript. Рандомная расстановка кораблей.»

Для вывода оставшихся кораблей компьютера, в случае его победы, необходимо перебрать в цикле массив comp.squadron. При каждой итерации будет создаваться элемент DIV, к которому присвоим класс и применим стили на основе информации, находящейся в объекте, являющемся элементом массива comp.squadron.

Обновлённый и дополненный JS-код обработки попадания при выстреле компьютера:


case 1:
	// записываем в матрицу значение '4', которое соответствует попаданию
	enemy.matrix[coords.x][coords.y] = 4;
	// отображаем иконку попадания
	self.showIcons(enemy, coords, 'red-cross');
	// выводим сообщение о попадании в нижней части экрана
	text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';
	self.showServiseText(text);

	// необходимо найти корабль, в который попали
	// перебор массива начнём с конца, для получения корректных значений
	// при возможном удалении его элементов
	for (var i = enemy.squadron.length - 1; i >= 0; i--) {
		var warship		= enemy.squadron[i], // полная информация о корабле
			arrayDescks	= warship.matrix; // массив с координатами палуб

		// перебираем координаты палуб корабля
		for (var j = 0, length = arrayDescks.length; j < length; j++) {
			// сравниваем координаты палубы с координатами выстрела
			if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {
				// если координаты одной из палуб совпали с координатами выстрела
				// увеличиваем счётчик попаданий
				warship.hits++;

				// если кол-во попаданий в корабль становится равным кол-ву палуб
				// считаем этот корабль уничтоженным и удаляем его из эскадры,
				// но перед этим сохраняем координаты первой палубы удаляемого корабля
				// понадобятся для отметки клеток по краям корабля
				if (warship.hits == warship.decks) {
					if (player === comp) {
						// сохраняем координаты первой палубы
						comp.tempShip.x0 = warship.x0;
						comp.tempShip.y0 = warship.y0;
					}
					enemy.squadron.splice(i, 1);
				}
				// выходим из цикла, т.к. палуба найдена
				break;
			}
		}
	}

	// все корабли эскадры противника уничтожены, игра закончена
	if (enemy.squadron.length == 0) {
		text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';
		srvText.innerHTML = text;

		// победа игрока
		if (player == user) {
			// удаляем обработчики событий для пользователя
			compfield.removeEventListener('click', self.shoot);
			compfield.removeEventListener('contextmenu', self.setEmptyCell);
		// победа компьютера
		} else {
			// если выиграл комп., показываем оставшиеся корабли компьютера
			// перебираем массив эскадры компьютера
			for (var i = 0, length = comp.squadron.length; i < length; i++) {
					// при каждой итерации создаём новый элемент с указанным тегом
				var div			= document.createElement('div'),
					// присваиваем имя класса в зависимости от направления расположения корабля
					dir			= (comp.squadron[i].kx == 1) ? ' vertical' : '',
					classname	= comp.squadron[i].shipname.slice(0, -1);

				// собираем в одну строку все классы 
				div.className = 'ship ' + classname + dir;
				// через атрибут 'style' задаём позиционирование кораблю относительно
				// его родительского элемента
				// смещение вычисляется путём умножения координаты первой палубы на
				// размер клетки игрового поля, этот размер совпадает с размером палубы
				div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';
				// вставляем созданный элемент корабля в 'document'
				comp.field.appendChild(div);
			}
		}
	// бой продолжается
	} else {
		// следующий выстрел компьютера
		if (player === comp) {
			// подготовка к выстрелу и сам выстрел
			// подробно рассмотрим ниже
			.....
		}
	}
	break;

case 1:

// записываем в матрицу значение '4', которое соответствует попаданию

enemy.matrix[coords.x][coords.y] = 4;

// отображаем иконку попадания

self.showIcons(enemy, coords, 'red-cross');

// выводим сообщение о попадании в нижней части экрана

text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';

self.showServiseText(text);

// необходимо найти корабль, в который попали

// перебор массива начнём с конца, для получения корректных значений

// при возможном удалении его элементов

for (var i = enemy.squadron.length - 1; i >= 0; i--) {

var warship = enemy.squadron[i], // полная информация о корабле

arrayDescks = warship.matrix; // массив с координатами палуб

// перебираем координаты палуб корабля

for (var j = 0, length = arrayDescks.length; j < length; j++) {

// сравниваем координаты палубы с координатами выстрела

if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {

// если координаты одной из палуб совпали с координатами выстрела

// увеличиваем счётчик попаданий

warship.hits++;

// если кол-во попаданий в корабль становится равным кол-ву палуб

// считаем этот корабль уничтоженным и удаляем его из эскадры,

// но перед этим сохраняем координаты первой палубы удаляемого корабля

// понадобятся для отметки клеток по краям корабля

if (warship.hits == warship.decks) {

if (player === comp) {

// сохраняем координаты первой палубы

comp.tempShip.x0 = warship.x0;

comp.tempShip.y0 = warship.y0;

}

enemy.squadron.splice(i, 1);

}

// выходим из цикла, т.к. палуба найдена

break;

}

// все корабли эскадры противника уничтожены, игра закончена

if (enemy.squadron.length == 0) {

text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';

srvText.innerHTML = text;

// победа игрока

if (player == user) {

// удаляем обработчики событий для пользователя

compfield.removeEventListener('click', self.shoot);

compfield.removeEventListener('contextmenu', self.setEmptyCell);

// победа компьютера

} else {

// если выиграл комп., показываем оставшиеся корабли компьютера

// перебираем массив эскадры компьютера

for (var i = 0, length = comp.squadron.length; i < length; i++) {

// при каждой итерации создаём новый элемент с указанным тегом

var div = document.createElement('div'),

// присваиваем имя класса в зависимости от направления расположения корабля

dir = (comp.squadron[i].kx == 1) ? ' vertical' : '',

classname = comp.squadron[i].shipname.slice(0, -1);

// собираем в одну строку все классы

div.className = 'ship ' + classname + dir;

// через атрибут 'style' задаём позиционирование кораблю относительно

// его родительского элемента

// смещение вычисляется путём умножения координаты первой палубы на

// размер клетки игрового поля, этот размер совпадает с размером палубы

div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';

// вставляем созданный элемент корабля в 'document'

comp.field.appendChild(div);

}

// бой продолжается

} else {

// следующий выстрел компьютера

if (player === comp) {

// подготовка к выстрелу и сам выстрел

// подробно рассмотрим ниже

.....

}

break;

Игра «Морской бой». Отмечаем гарантированно пустые клетки вокруг попадания.

После каждого удачного выстрела ИИ компьютера определяет координаты клеток, находящихся по диагонали от клетки с попаданием. Таких клеток может быть от одной до четырёх, в зависимости от координат попадания — в центре, на краю или в углу игрового поля.

Игра Морской бой. Гарантированно пустые клетки.

Полученные координаты передаются в качестве аргумента в функцию markEmptyCell.

Обновлённый и дополненный JS-код обработки попадания при выстреле компьютера:


case 1:
	// записываем в матрицу значение '4', которое соответствует попаданию
	enemy.matrix[coords.x][coords.y] = 4;
	// отображаем иконку попадания
	self.showIcons(enemy, coords, 'red-cross');
	// выводим сообщение о попадании в нижней части экрана
	text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';
	self.showServiseText(text);

	// необходимо найти корабль, в который попали
	// перебор массива начнём с конца, для получения корректных значений
	// при возможном удалении его элементов
	for (var i = enemy.squadron.length - 1; i >= 0; i--) {
		var warship		= enemy.squadron[i], // полная информация о корабле
			arrayDescks	= warship.matrix; // массив с координатами палуб

		// перебираем координаты палуб корабля
		for (var j = 0, length = arrayDescks.length; j < length; j++) {
			// сравниваем координаты палубы с координатами выстрела
			if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {
				// если координаты одной из палуб совпали с координатами выстрела
				// увеличиваем счётчик попаданий
				warship.hits++;

				// если кол-во попаданий в корабль становится равным кол-ву палуб
				// считаем этот корабль уничтоженным и удаляем его из эскадры,
				// но перед этим сохраняем координаты первой палубы удаляемого корабля
				// понадобятся для отметки клеток по краям корабля
				if (warship.hits == warship.decks) {
					if (player === comp) {
						// сохраняем координаты первой палубы
						comp.tempShip.x0 = warship.x0;
						comp.tempShip.y0 = warship.y0;
					}
					enemy.squadron.splice(i, 1);
				}
				// выходим из цикла, т.к. палуба найдена
				break;
			}
		}
	}

	// все корабли эскадры противника уничтожены, игра закончена
	if (enemy.squadron.length == 0) {
		text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';
		srvText.innerHTML = text;

		// победа игрока
		if (player == user) {
			// удаляем обработчики событий для пользователя
			compfield.removeEventListener('click', self.shoot);
			compfield.removeEventListener('contextmenu', self.setEmptyCell);
		// победа компьютера
		} else {
			// если выиграл комп., показываем оставшиеся корабли компьютера
			// перебираем массив эскадры компьютера
			for (var i = 0, length = comp.squadron.length; i < length; i++) {
					// при каждой итерации создаём новый элемент с указанным тегом
				var div			= document.createElement('div'),
					// присваиваем имя класса в зависимости от направления расположения корабля
					dir			= (comp.squadron[i].kx == 1) ? ' vertical' : '',
					classname	= comp.squadron[i].shipname.slice(0, -1);

				// собираем в одну строку все классы 
				div.className = 'ship ' + classname + dir;
				// через атрибут 'style' задаём позиционирование кораблю относительно
				// его родительского элемента
				// смещение вычисляется путём умножения координаты первой палубы на
				// размер клетки игрового поля, этот размер совпадает с размером палубы
				div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';
				// вставляем созданный элемент корабля в 'document'
				comp.field.appendChild(div);
			}
		}
	// бой продолжается
	} else {
		// следующий выстрел компьютера
		if (player === comp) {
			// увеличиваем счётчик попаданий, равный кол-ву уничтоженных палуб
			comp.tempShip.totalHits++;
			// отмечаем клетки, где точно не может стоять корабль
			var points	= [
				[coords.x - 1, coords.y - 1],
				[coords.x - 1, coords.y + 1],
				[coords.x + 1, coords.y - 1],
				[coords.x + 1, coords.y + 1]
			];
			self.markEmptyCell(points);
			.....
		}
	}
	break;

case 1:

// записываем в матрицу значение '4', которое соответствует попаданию

enemy.matrix[coords.x][coords.y] = 4;

// отображаем иконку попадания

self.showIcons(enemy, coords, 'red-cross');

// выводим сообщение о попадании в нижней части экрана

text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';

self.showServiseText(text);

// необходимо найти корабль, в который попали

// перебор массива начнём с конца, для получения корректных значений

// при возможном удалении его элементов

for (var i = enemy.squadron.length - 1; i >= 0; i--) {

var warship = enemy.squadron[i], // полная информация о корабле

arrayDescks = warship.matrix; // массив с координатами палуб

// перебираем координаты палуб корабля

for (var j = 0, length = arrayDescks.length; j < length; j++) {

// сравниваем координаты палубы с координатами выстрела

if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {

// если координаты одной из палуб совпали с координатами выстрела

// увеличиваем счётчик попаданий

warship.hits++;

// если кол-во попаданий в корабль становится равным кол-ву палуб

// считаем этот корабль уничтоженным и удаляем его из эскадры,

// но перед этим сохраняем координаты первой палубы удаляемого корабля

// понадобятся для отметки клеток по краям корабля

if (warship.hits == warship.decks) {

if (player === comp) {

// сохраняем координаты первой палубы

comp.tempShip.x0 = warship.x0;

comp.tempShip.y0 = warship.y0;

}

enemy.squadron.splice(i, 1);

}

// выходим из цикла, т.к. палуба найдена

break;

}

// все корабли эскадры противника уничтожены, игра закончена

if (enemy.squadron.length == 0) {

text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';

srvText.innerHTML = text;

// победа игрока

if (player == user) {

// удаляем обработчики событий для пользователя

compfield.removeEventListener('click', self.shoot);

compfield.removeEventListener('contextmenu', self.setEmptyCell);

// победа компьютера

} else {

// если выиграл комп., показываем оставшиеся корабли компьютера

// перебираем массив эскадры компьютера

for (var i = 0, length = comp.squadron.length; i < length; i++) {

// при каждой итерации создаём новый элемент с указанным тегом

var div = document.createElement('div'),

// присваиваем имя класса в зависимости от направления расположения корабля

dir = (comp.squadron[i].kx == 1) ? ' vertical' : '',

classname = comp.squadron[i].shipname.slice(0, -1);

// собираем в одну строку все классы

div.className = 'ship ' + classname + dir;

// через атрибут 'style' задаём позиционирование кораблю относительно

// его родительского элемента

// смещение вычисляется путём умножения координаты первой палубы на

// размер клетки игрового поля, этот размер совпадает с размером палубы

div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';

// вставляем созданный элемент корабля в 'document'

comp.field.appendChild(div);

}

// бой продолжается

} else {

// следующий выстрел компьютера

if (player === comp) {

// увеличиваем счётчик попаданий, равный кол-ву уничтоженных палуб

comp.tempShip.totalHits++;

// отмечаем клетки, где точно не может стоять корабль

var points = [

[coords.x - 1, coords.y - 1],

[coords.x - 1, coords.y + 1],

[coords.x + 1, coords.y - 1],

[coords.x + 1, coords.y + 1]

];

self.markEmptyCell(points);

.....

}

break;

Как вы обратили внимание, у нас появилась новая функция — markEmptyCell, которая выполняет следующие задачи:

Перебирает полученный массив и удаляет из него координаты по которым уже установлены ранее отметки пустых клеток, попаданий или промахов, а так же, если эти координаты оказываются за пределами игрового поля игрока.
Записывает по этим координатам в двумерный массив игрового поля игрока значение ‘2’, что соответствует отметке пустой клетки.
Вызывает функцию showIcons, для визуального отображения гарантированно пустых клеток на игровом поле игрока.
Удаляет эти координаты из массивов shootMatrixAround, shootMatrixAI и shootMatrix, чтобы исключить в дальнейшем стрельбу по однозначно пустым клеткам.

Ниже представлен полный JS-код функции markEmptyCell:


markEmptyCell: function(points) {
	var obj;

	// перебираем массив с координатами
	for (var i = 0, lh = points.length ; i < lh ; i++) {
		// записываем координаты в объект
		obj = {
			x: points[i][0],
			y: points[i][1]
		};
		// если выполняется хотя бы одно из условий, значит координата находится
		// за пределами игрового поля и она нам не нужна
		// такое возможно, если клетка с попаданием расположена в углу
		// или на краю игрового поля
		// прерываем текущую итерацию и переходим к следующей
		if (obj.x < 0 || obj.x > 9 || obj.y < 0 || obj.y > 9) continue;

		// если по данным координатам прописано уже какое-то значение отличное
		// от нуля, значит в этом месте уже стоит отметка или промаха, или попадания,
		// или ранее поставленной пустой клетки
		// прерываем текущую итерацию и переходим к следующей
		if (user.matrix[obj.x][obj.y] != 0) continue;

		// отображаем по данным координатам иконку гарантированно пустой клетки
		self.showIcons(enemy, obj, 'shaded-cell');
		// записываем в двумерный массив игрового поля игрока по данным координатам
		// значение '2', соответствующее пустой клетке
		user.matrix[obj.x][obj.y] = 2;

		// удаляем из массивов выстрелов данные координаты, чтобы исключить
		// в дальнейшем их обстрел
		self.deleteElementMatrix(comp.shootMatrix, obj);
		if (comp.shootMatrixAround.length != 0) {
			self.deleteElementMatrix(comp.shootMatrixAround, obj);
		}
		if (comp.shootMatrixAI.length != 0) {
			self.deleteElementMatrix(comp.shootMatrixAI, obj);
		}
		self.deleteElementMatrix(comp.shootMatrix, obj);
	}
}

markEmptyCell: function(points) {

var obj;

// перебираем массив с координатами

for (var i = 0, lh = points.length ; i < lh ; i++) {

// записываем координаты в объект

obj = {

x: points[i][0],

y: points[i][1]

};

// если выполняется хотя бы одно из условий, значит координата находится

// за пределами игрового поля и она нам не нужна

// такое возможно, если клетка с попаданием расположена в углу

// или на краю игрового поля

// прерываем текущую итерацию и переходим к следующей

if (obj.x < 0 || obj.x > 9 || obj.y < 0 || obj.y > 9) continue;

// если по данным координатам прописано уже какое-то значение отличное

// от нуля, значит в этом месте уже стоит отметка или промаха, или попадания,

// или ранее поставленной пустой клетки

// прерываем текущую итерацию и переходим к следующей

if (user.matrix[obj.x][obj.y] != 0) continue;

// отображаем по данным координатам иконку гарантированно пустой клетки

self.showIcons(enemy, obj, 'shaded-cell');

// записываем в двумерный массив игрового поля игрока по данным координатам

// значение '2', соответствующее пустой клетке

user.matrix[obj.x][obj.y] = 2;

// удаляем из массивов выстрелов данные координаты, чтобы исключить

// в дальнейшем их обстрел

self.deleteElementMatrix(comp.shootMatrix, obj);

if (comp.shootMatrixAround.length != 0) {

self.deleteElementMatrix(comp.shootMatrixAround, obj);

}

if (comp.shootMatrixAI.length != 0) {

self.deleteElementMatrix(comp.shootMatrixAI, obj);

}

self.deleteElementMatrix(comp.shootMatrix, obj);

}

Игра «Морской бой». Проверяем, потоплен ли корабль.

На первый взгляд, реализация этой проверки не должна вызвать трудностей. Достаточно сравнить в массиве user.squadron значения свойств decks (количество палуб) и hits (количество попаданий) обстреливаемого корабля. Если эти значения равны, то корабль считается потопленным. К сожалению, при таком подходе мы поставим игрока в заведомо неравное положение, ведь он обстреливает корабль до тех пор, пока явно не будет видно, что корабль потоплен. Откажемся от этого способа и научим компьютер самостоятельно определять необходимость дальнейшего обстрела раненого корабля — потоплен корабль или нет.

Вариант с использованием ИИ компьютера тоже достаточно прост. Для его реализации достаточно:

Найти, из оставшихся кораблей в эскадре игрока, корабль с максимальным количеством палуб;
Сравнить полученное значение с количеством попаданий, которое хранится свойстве comp.tempShip.totalHit.

ИИ должен анализировать результаты после каждого попадания, чтобы не делать лишних выстрелов. Например, если уничтожены две палубы, необходимо проверить, остались ли не потопленными трёхпалубные и четырёх палубный (если трёхпалубные все потоплены) корабли

Для удобства чтения, будем писать код проверки отдельно, а потом уже целиком вставим его в ветвь case 1:


// находим максимально количество палуб из оставшихся кораблей
var max = self.checkMaxDecks();

if (comp.tempShip.totalHits >= max) {
	// корабль потоплен
	// помечаем клетки вокруг корабля, как гарантированно пустые
	self.markEmptyCell(points);
	// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;
	self.resetTempShip();
} else {
	// продолжаем обстрел клеток вокруг попадания
	self.setShootMatrixAround();
}

// находим максимально количество палуб из оставшихся кораблей

var max = self.checkMaxDecks();

if (comp.tempShip.totalHits >= max) {

// корабль потоплен

// помечаем клетки вокруг корабля, как гарантированно пустые

self.markEmptyCell(points);

// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;

self.resetTempShip();

} else {

// продолжаем обстрел клеток вокруг попадания

self.setShootMatrixAround();

}

Рассмотрим код функции checkMaxDecks, возвращающей максимальное количество палуб:


checkMaxDecks: function() {
	var arr = [];
	// перебираем массив оставшихся кораблей эскадры игрока
	for (var i = 0, length = user.squadron.length; i < length; i++) {
		// записываем в массив кол-во палуб у оставшихся кораблей
		arr.push(user.squadron[i].decks);
	}
	// возвращаем max значение
	return Math.max.apply(null, arr);
}

checkMaxDecks: function() {

var arr = [];

// перебираем массив оставшихся кораблей эскадры игрока

for (var i = 0, length = user.squadron.length; i < length; i++) {

// записываем в массив кол-во палуб у оставшихся кораблей

arr.push(user.squadron[i].decks);

}

// возвращаем max значение

return Math.max.apply(null, arr);

}

Теперь нужно сформировать массив points, являющийся аргументом функции markEmptyCell. Для этого нам понадобятся данные записанные в объект comp.tempShip:

количество попаданий в корабль;
координаты первой палубы обстреливаемого корабля;
направление расположения палуб (горизонтальное или вертикальное).

Количество и положение клеток, которые необходимо пометить, зависит от количества палуб у потопленного корабля.

Игра Морской бой. Гарантированно пустые клетки вокруг потопленного корабля.

Варианты расположения гарантированно пустых клеток
в зависимости от положения потопленного корабля.

Как видно из приведённого рисунка, для однопалубного корабля, помечаются максимум четыре клетки, расположенные с четырёх сторон.
Для многопалубных кораблей требуются максимум две клетки, расположенные с торцов.


// находим максимально количество палуб из оставшихся кораблей
var max = self.checkMaxDecks();

if (comp.tempShip.totalHits >= max) {
	// корабль потоплен
	// помечаем клетки вокруг корабля, как гарантированно пустые

	// однопалубный корабль
	if (comp.tempShip.totalHits == 1) {
		points = [
			// верхняя
			[comp.tempShip.x0 - 1, comp.tempShip.y0],
			// нижняя
			[comp.tempShip.x0 + 1, comp.tempShip.y0],
			// левая
			[comp.tempShip.x0, comp.tempShip.y0 - 1],
			// правая
			[comp.tempShip.x0, comp.tempShip.y0 + 1],
		];
	// многопалубный корабль
	} else {
			// получаем координаты левой или верхней клетки
		var x1 = comp.tempShip.x0 - comp.tempShip.kx,
			y1 = comp.tempShip.y0 - comp.tempShip.ky,
			// получаем координаты правой или нижней клетки
			// для этого к координате первой палубы прибавляем количество палуб
			// умноженное на коэффициент, определяющий направление расположения
			// палуб корабля
			// kx == 1 и ky == 0 - вертикально,
			// kx == 0 и ky == 1 - горизонтально
			x2 = comp.tempShip.x0 + comp.tempShip.kx * comp.tempShip.totalHits,
			y2 = comp.tempShip.y0 + comp.tempShip.ky * comp.tempShip.totalHits;
		points = [
			[x1, y1],
			[x2, y2]
		];
	}

	self.markEmptyCell(points);
	// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;
	self.resetTempShip();
} else {
	// формируем координаты выстрелов вокруг попадания
	self.setShootMatrixAround();
}

// производим новый выстрел
setTimeout(function() {
	return self.shoot();
}, 1000);

// находим максимально количество палуб из оставшихся кораблей

var max = self.checkMaxDecks();

if (comp.tempShip.totalHits >= max) {

// корабль потоплен

// помечаем клетки вокруг корабля, как гарантированно пустые

// однопалубный корабль

if (comp.tempShip.totalHits == 1) {

points = [

// верхняя

[comp.tempShip.x0 - 1, comp.tempShip.y0],

// нижняя

[comp.tempShip.x0 + 1, comp.tempShip.y0],

// левая

[comp.tempShip.x0, comp.tempShip.y0 - 1],

// правая

[comp.tempShip.x0, comp.tempShip.y0 + 1],

];

// многопалубный корабль

} else {

// получаем координаты левой или верхней клетки

var x1 = comp.tempShip.x0 - comp.tempShip.kx,

y1 = comp.tempShip.y0 - comp.tempShip.ky,

// получаем координаты правой или нижней клетки

// для этого к координате первой палубы прибавляем количество палуб

// умноженное на коэффициент, определяющий направление расположения

// палуб корабля

// kx == 1 и ky == 0 - вертикально,

// kx == 0 и ky == 1 - горизонтально

x2 = comp.tempShip.x0 + comp.tempShip.kx * comp.tempShip.totalHits,

y2 = comp.tempShip.y0 + comp.tempShip.ky * comp.tempShip.totalHits;

points = [

[x1, y1],

[x2, y2]

];

}

self.markEmptyCell(points);

// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;

self.resetTempShip();

} else {

// формируем координаты выстрелов вокруг попадания

self.setShootMatrixAround();

}

// производим новый выстрел

setTimeout(function() {

return self.shoot();

}, 1000);

Добавим полученный JS-код в раздел обработки попадания case 1


case 1:
	// записываем в матрицу значение '4', которое соответствует попаданию
	enemy.matrix[coords.x][coords.y] = 4;
	// отображаем иконку попадания
	self.showIcons(enemy, coords, 'red-cross');
	// выводим сообщение о попадании в нижней части экрана
	text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';
	self.showServiseText(text);

	// необходимо найти корабль, в который попали
	// перебор массива начнём с конца, для получения корректных значений
	// при возможном удалении его элементов
	for (var i = enemy.squadron.length - 1; i >= 0; i--) {
		var warship		= enemy.squadron[i], // полная информация о корабле
			arrayDescks	= warship.matrix; // массив с координатами палуб

		// перебираем координаты палуб корабля
		for (var j = 0, length = arrayDescks.length; j < length; j++) {
			// сравниваем координаты палубы с координатами выстрела
			if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {
				// если координаты одной из палуб совпали с координатами выстрела
				// увеличиваем счётчик попаданий
				warship.hits++;

				// если кол-во попаданий в корабль становится равным кол-ву палуб
				// считаем этот корабль уничтоженным и удаляем его из эскадры,
				// но перед этим сохраняем координаты первой палубы удаляемого корабля
				// понадобятся для отметки клеток по краям корабля
				if (warship.hits == warship.decks) {
					if (player === comp) {
						// сохраняем координаты первой палубы
						comp.tempShip.x0 = warship.x0;
						comp.tempShip.y0 = warship.y0;
					}
					enemy.squadron.splice(i, 1);
				}
				// выходим из цикла, т.к. палуба найдена
				break;
			}
		}
	}

	// все корабли эскадры противника уничтожены, игра закончена
	if (enemy.squadron.length == 0) {
		text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';
		srvText.innerHTML = text;

		// победа игрока
		if (player == user) {
			// удаляем обработчики событий для пользователя
			compfield.removeEventListener('click', self.shoot);
			compfield.removeEventListener('contextmenu', self.setEmptyCell);
		// победа компьютера
		} else {
			// если выиграл комп., показываем оставшиеся корабли компьютера
			// перебираем массив эскадры компьютера
			for (var i = 0, length = comp.squadron.length; i < length; i++) {
					// при каждой итерации создаём новый элемент с указанным тегом
				var div			= document.createElement('div'),
					// присваиваем имя класса в зависимости от направления расположения корабля
					dir			= (comp.squadron[i].kx == 1) ? ' vertical' : '',
					classname	= comp.squadron[i].shipname.slice(0, -1);

				// собираем в одну строку все классы 
				div.className = 'ship ' + classname + dir;
				// через атрибут 'style' задаём позиционирование кораблю относительно
				// его родительского элемента
				// смещение вычисляется путём умножения координаты первой палубы на
				// размер клетки игрового поля, этот размер совпадает с размером палубы
				div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';
				// вставляем созданный элемент корабля в 'document'
				comp.field.appendChild(div);
			}
		}
	// бой продолжается
	} else {
		// следующий выстрел компьютера
		if (player === comp) {
			// увеличиваем счётчик попаданий, равный кол-ву уничтоженных палуб
			comp.tempShip.totalHits++;
			// отмечаем клетки, где точно не может стоять корабль
			var points	= [
				[coords.x - 1, coords.y - 1],
				[coords.x - 1, coords.y + 1],
				[coords.x + 1, coords.y - 1],
				[coords.x + 1, coords.y + 1]
			];
			self.markEmptyCell(points);

			// находим максимально количество палуб из оставшихся кораблей
			var max = self.checkMaxDecks();

			if (comp.tempShip.totalHits >= max) {
				// корабль потоплен
				// помечаем клетки вокруг корабля, как гарантированно пустые

				// однопалубный корабль
				if (comp.tempShip.totalHits == 1) {
					points = [
						// верхняя
						[comp.tempShip.x0 - 1, comp.tempShip.y0],
						// нижняя
						[comp.tempShip.x0 + 1, comp.tempShip.y0],
						// левая
						[comp.tempShip.x0, comp.tempShip.y0 - 1],
						// правая
						[comp.tempShip.x0, comp.tempShip.y0 + 1],
					];
				// многопалубный корабль
				} else {
						// получаем координаты левой или верхней клетки
					var x1 = comp.tempShip.x0 - comp.tempShip.kx,
						y1 = comp.tempShip.y0 - comp.tempShip.ky,
						// получаем координаты правой или нижней клетки
						// для этого к координате первой палубы прибавляем количество палуб
						// умноженное на коэффициент, определяющий направление расположения
						// палуб корабля
						// kx == 1 и ky == 0 - вертикально,
						// kx == 0 и ky == 1 - горизонтально
						x2 = comp.tempShip.x0 + comp.tempShip.kx * comp.tempShip.totalHits,
						y2 = comp.tempShip.y0 + comp.tempShip.ky * comp.tempShip.totalHits;
					points = [
						[x1, y1],
						[x2, y2]
					];
				}

				self.markEmptyCell(points);
				// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;
				self.resetTempShip();
			} else {
				// формируем координаты выстрелов вокруг попадания
				self.setShootMatrixAround();
			}

			// производим новый выстрел
			setTimeout(function() {
				return self.shoot();
			}, 1000);
		}
	}
	break;

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

case 1:

// записываем в матрицу значение '4', которое соответствует попаданию

enemy.matrix[coords.x][coords.y] = 4;

// отображаем иконку попадания

self.showIcons(enemy, coords, 'red-cross');

// выводим сообщение о попадании в нижней части экрана

text = (player === user) ? 'Поздравляем! Вы попали. Ваш выстрел.' : 'Компьютер попал в ваш корабль. Выстрел компьютера';

self.showServiseText(text);

// необходимо найти корабль, в который попали

// перебор массива начнём с конца, для получения корректных значений

// при возможном удалении его элементов

for (var i = enemy.squadron.length - 1; i >= 0; i--) {

var warship = enemy.squadron[i], // полная информация о корабле

arrayDescks = warship.matrix; // массив с координатами палуб

// перебираем координаты палуб корабля

for (var j = 0, length = arrayDescks.length; j < length; j++) {

// сравниваем координаты палубы с координатами выстрела

if (arrayDescks[j][0] == coords.x && arrayDescks[j][1] == coords.y) {

// если координаты одной из палуб совпали с координатами выстрела

// увеличиваем счётчик попаданий

warship.hits++;

// если кол-во попаданий в корабль становится равным кол-ву палуб

// считаем этот корабль уничтоженным и удаляем его из эскадры,

// но перед этим сохраняем координаты первой палубы удаляемого корабля

// понадобятся для отметки клеток по краям корабля

if (warship.hits == warship.decks) {

if (player === comp) {

// сохраняем координаты первой палубы

comp.tempShip.x0 = warship.x0;

comp.tempShip.y0 = warship.y0;

}

enemy.squadron.splice(i, 1);

}

// выходим из цикла, т.к. палуба найдена

break;

}

// все корабли эскадры противника уничтожены, игра закончена

if (enemy.squadron.length == 0) {

text = (player === user) ? 'Поздравляем! Вы выиграли.' : 'К сожалению, вы проиграли.';

srvText.innerHTML = text;

// победа игрока

if (player == user) {

// удаляем обработчики событий для пользователя

compfield.removeEventListener('click', self.shoot);

compfield.removeEventListener('contextmenu', self.setEmptyCell);

// победа компьютера

} else {

// если выиграл комп., показываем оставшиеся корабли компьютера

// перебираем массив эскадры компьютера

for (var i = 0, length = comp.squadron.length; i < length; i++) {

// при каждой итерации создаём новый элемент с указанным тегом

var div = document.createElement('div'),

// присваиваем имя класса в зависимости от направления расположения корабля

dir = (comp.squadron[i].kx == 1) ? ' vertical' : '',

classname = comp.squadron[i].shipname.slice(0, -1);

// собираем в одну строку все классы

div.className = 'ship ' + classname + dir;

// через атрибут 'style' задаём позиционирование кораблю относительно

// его родительского элемента

// смещение вычисляется путём умножения координаты первой палубы на

// размер клетки игрового поля, этот размер совпадает с размером палубы

div.style.cssText = 'left:' + (comp.squadron[i].y0 * comp.shipSide) + 'px; top:' + (comp.squadron[i].x0 * comp.shipSide) + 'px;';

// вставляем созданный элемент корабля в 'document'

comp.field.appendChild(div);

}

// бой продолжается

} else {

// следующий выстрел компьютера

if (player === comp) {

// увеличиваем счётчик попаданий, равный кол-ву уничтоженных палуб

comp.tempShip.totalHits++;

// отмечаем клетки, где точно не может стоять корабль

var points = [

[coords.x - 1, coords.y - 1],

[coords.x - 1, coords.y + 1],

[coords.x + 1, coords.y - 1],

[coords.x + 1, coords.y + 1]

];

self.markEmptyCell(points);

// находим максимально количество палуб из оставшихся кораблей

var max = self.checkMaxDecks();

if (comp.tempShip.totalHits >= max) {

// корабль потоплен

// помечаем клетки вокруг корабля, как гарантированно пустые

// однопалубный корабль

if (comp.tempShip.totalHits == 1) {

points = [

// верхняя

[comp.tempShip.x0 - 1, comp.tempShip.y0],

// нижняя

[comp.tempShip.x0 + 1, comp.tempShip.y0],

// левая

[comp.tempShip.x0, comp.tempShip.y0 - 1],

// правая

[comp.tempShip.x0, comp.tempShip.y0 + 1],

];

// многопалубный корабль

} else {

// получаем координаты левой или верхней клетки

var x1 = comp.tempShip.x0 - comp.tempShip.kx,

y1 = comp.tempShip.y0 - comp.tempShip.ky,

// получаем координаты правой или нижней клетки

// для этого к координате первой палубы прибавляем количество палуб

// умноженное на коэффициент, определяющий направление расположения

// палуб корабля

// kx == 1 и ky == 0 - вертикально,

// kx == 0 и ky == 1 - горизонтально

x2 = comp.tempShip.x0 + comp.tempShip.kx * comp.tempShip.totalHits,

y2 = comp.tempShip.y0 + comp.tempShip.ky * comp.tempShip.totalHits;

points = [

[x1, y1],

[x2, y2]

];

}

self.markEmptyCell(points);

// сбрасываем значения свойств объекта comp.tempShip в исходное состояние;

self.resetTempShip();

} else {

// формируем координаты выстрелов вокруг попадания

self.setShootMatrixAround();

}

// производим новый выстрел

setTimeout(function() {

return self.shoot();

}, 1000);

}

break;

Игра «Морской бой». Обстрел игрового поля вокруг попадания.

Если корабль, в который было попадание, не потоплен, компьютер должен продолжить его обстрел, а именно, обстрелять клетку вокруг попадания. Для этого используется функция setShootMatrixAround.

Функция setShootMatrixAround является основной частью ИИ компьютера и способна менять алгоритм формирования координат в зависимости от результатов обстрела «раненого» корабля. Кроме этого, функция способна определить, когда следует прекратить обстрел «раненного» корабля, посчитав его уничтоженным.
В своей работе функция использует информацию хранящуюся в объектах coords и comp.tempShip. Эти объекты являются глобальными в пределах области видимости модуля Controller, поэтому нет необходимости передавать их явно, в качестве аргументов. Все возможные координаты обстрела клеток вокруг попадания записываются в массив shootMatrixAround.

После первого попадания в корабль, ИИ не может вычислить, как расположен этот корабль — горизонтально или вертикально. Поэтому ему необходимо обстрелять клетку с попаданием со всех сторон: сверху, снизу, слева и справа. Количество точек обстрела может варьироваться от двух до четырёх, в зависимости от координат попадания.

Игра Морской бой. Обстрел клетки с попаданием.

В данном случае, точками обозначены возможные координаты выстрелов.

После второго попадания ИИ уже может определить направление расположения корабля — вертикальное или горизонтальное и исключить лишние координаты для последующего обстрела, заменив их отметками гарантировано пустых клеток.

Игра Морской бой. Координаты обстрела корабля.

В данном случае, точками обозначены возможные координаты выстрелов.

Начнём с того, что разберёмся, как ИИ вычисляет направление расположения палуб, используя координаты первого и второго попадания.
Данные вычисления запускаются, если значения коэффициентов kx и ky, хранящихся в объекте comp.tempShip равны 0.


// если положение корабля не определено, то вычисляем его используя
// координаты первого и второго попадания
if (comp.tempShip.kx == 0 && comp.tempShip.ky == 0) {
	// проверяем, есть ли в объекте 'tempShip.firstHit' координаты, если нет
	// то будем считать, что это первое попадание и запишем
	// в этот объект координаты первого попадания
	if (Object.keys(comp.tempShip.firstHit).length === 0) {
		comp.tempShip.firstHit = coords;
	} else {
		// запишем координаты второго попадания в объект 'nextHit'
		comp.tempShip.nextHit = coords;
		// вычисляем коэффициенты определяющие положения корабля
		// разность между соответствующими координатами первого и второго
		// попадания не может быть больше 1, в противном случае будем
		// считать, что второе попадание было по другому кораблю
		comp.tempShip.kx = (Math.abs(comp.tempShip.firstHit.x - comp.tempShip.nextHit.x) == 1) ? 1 : 0;
		comp.tempShip.ky = (Math.abs(comp.tempShip.firstHit.y - comp.tempShip.nextHit.y) == 1) ? 1 : 0;
	}
}

// если положение корабля не определено, то вычисляем его используя

// координаты первого и второго попадания

if (comp.tempShip.kx == 0 && comp.tempShip.ky == 0) {

// проверяем, есть ли в объекте 'tempShip.firstHit' координаты, если нет

// то будем считать, что это первое попадание и запишем

// в этот объект координаты первого попадания

if (Object.keys(comp.tempShip.firstHit).length === 0) {

comp.tempShip.firstHit = coords;

} else {

// запишем координаты второго попадания в объект 'nextHit'

comp.tempShip.nextHit = coords;

// вычисляем коэффициенты определяющие положения корабля

// разность между соответствующими координатами первого и второго

// попадания не может быть больше 1, в противном случае будем

// считать, что второе попадание было по другому кораблю

comp.tempShip.kx = (Math.abs(comp.tempShip.firstHit.x - comp.tempShip.nextHit.x) == 1) ? 1 : 0;

comp.tempShip.ky = (Math.abs(comp.tempShip.firstHit.y - comp.tempShip.nextHit.y) == 1) ? 1 : 0;

}

Ещё раз напомню значение комбинаций коэффициентов:

comp.tempShip.kx == 1 && comp.tempShip.ky == 0 — корабль расположен вертикально;
comp.tempShip.kx == 0 && comp.tempShip.ky == 1 — корабль расположен горизонтально.

Рассмотрим JS-код, отвечающий за вычисление координат выстрелов и использующий при этом значения коэффициентов kx и ky:


// корабль расположен вертикально
if (coords.x > 0 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x - 1, coords.y]);
if (coords.x < 9 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x + 1, coords.y]);
// корабль расположен горизонтально
if (coords.y > 0 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y - 1]);
if (coords.y < 9 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y + 1]);

// корабль расположен вертикально

if (coords.x > 0 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x - 1, coords.y]);

if (coords.x < 9 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x + 1, coords.y]);

// корабль расположен горизонтально

if (coords.y > 0 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y - 1]);

if (coords.y < 9 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y + 1]);

Очень важно.
В условии коэффициенты kx и ky сравниваются с 0, а не с 1. Это сделано для универсальности вычислений как для первого попадания, так и для последующих, т. к. при первом попадании оба коэффициента равны 0.

Получив координаты обстрела попадания, необходимо проверить их валидность. Координата валидна, если значение двумерного массива игрового поля игрока не равно или 2 (гарантированно пустая клетка), или 3 (промах), или 4 (попадание).
Перебирать массив shootMatrixAround будем с конца, чтобы после удаления элемента массива не нарушился порядок дальнейшего перебора.


// получив координаты обстрела вокруг попадания, необходимо проверить их валидность
// координата валидна, если значение массива не равно или 2 (гарантированно пустая
// клетка), или 3 (промах), или 4 (попадание)
for (var i = comp.shootMatrixAround.length - 1; i >= 0; i--) {
	// получаем координаты X и Y возможного выстрела
	var x = comp.shootMatrixAround[i][0],
		y = comp.shootMatrixAround[i][1];
	// проверяем валидность этих координат и если они не валидны - удаляем их из массива
	// координат выстрелов вокруг клетки с попаданием
	if (user.matrix[x][y] !== 0 && user.matrix[x][y] !== 1) {
		comp.shootMatrixAround.splice(i,1);
		self.deleteElementMatrix(comp.shootMatrix, coords);
	}
}

// получив координаты обстрела вокруг попадания, необходимо проверить их валидность

// координата валидна, если значение массива не равно или 2 (гарантированно пустая

// клетка), или 3 (промах), или 4 (попадание)

for (var i = comp.shootMatrixAround.length - 1; i >= 0; i--) {

// получаем координаты X и Y возможного выстрела

var x = comp.shootMatrixAround[i][0],

y = comp.shootMatrixAround[i][1];

// проверяем валидность этих координат и если они не валидны - удаляем их из массива

// координат выстрелов вокруг клетки с попаданием

if (user.matrix[x][y] !== 0 && user.matrix[x][y] !== 1) {

comp.shootMatrixAround.splice(i,1);

self.deleteElementMatrix(comp.shootMatrix, coords);

}

Теперь необходимо проверить, остались после валидации элементы в массиве shootMatrixAround или нет. Если массив пустой — это значит, что обстреливать корабль далее нет смысла и он считается потопленным.


if (comp.shootMatrixAround.length == 0) {
	// считаем корабль потопленным, сбрасываем свойства объекта tempShip
	// в исходные состояния
	self.resetTempShip();
}

if (comp.shootMatrixAround.length == 0) {

// считаем корабль потопленным, сбрасываем свойства объекта tempShip

// в исходные состояния

self.resetTempShip();

}

Соберём весь JS-код этого подраздела вместе в одной функции:


setShootMatrixAround: function() {
	// если положение корабля не определено, то вычисляем его используя
	// координаты первого и второго попадания
	if (comp.tempShip.kx == 0 && comp.tempShip.ky == 0) {
		// проверяем, есть ли в объекте 'tempShip.firstHit' координаты, если нет
		// то будем считать, что это первое попадание и запишем
		// в этот объект координаты первого попадания
		if (Object.keys(comp.tempShip.firstHit).length === 0) {
			comp.tempShip.firstHit = coords;
		} else {
			// запишем координаты второго попадания в объект 'nextHit'
			comp.tempShip.nextHit = coords;
			// вычисляем коэффициенты определяющие положения корабля
			// разность между соответствующими координатами первого и второго
			// попадания не может быть больше 1, в противном случае будем
			// считать, что второе попадание было по другому кораблю
			comp.tempShip.kx = (Math.abs(comp.tempShip.firstHit.x - comp.tempShip.nextHit.x) == 1) ? 1 : 0;
			comp.tempShip.ky = (Math.abs(comp.tempShip.firstHit.y - comp.tempShip.nextHit.y) == 1) ? 1 : 0;
		}
	}

	// корабль расположен вертикально
	if (coords.x > 0 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x - 1, coords.y]);
	if (coords.x < 9 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x + 1, coords.y]);
	// корабль расположен горизонтально
	if (coords.y > 0 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y - 1]);
	if (coords.y < 9 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y + 1]);

	// получив координаты обстрела попадания, необходимо проверить их валидность
	// координата валидна, если значение массива не равно или 2 (гарантированно пустая
	// клетка), или 3 (промах), или 4 (попадание)
	for (var i = comp.shootMatrixAround.length - 1; i >= 0; i--) {
		// получаем координаты X и Y возможного выстрела
		var x = comp.shootMatrixAround[i][0],
			y = comp.shootMatrixAround[i][1];
		// проверяем валидность этих координат и если они не валидны - удаляем их из массива
		// координат выстрелов вокруг клетки с попаданием
		if (user.matrix[x][y] !== 0 && user.matrix[x][y] !== 1) {
			comp.shootMatrixAround.splice(i,1);
			self.deleteElementMatrix(comp.shootMatrix, coords);
			// if (comp.shootMatrixAI.length != 0) {
			// 	self.deleteElementMatrix(comp.shootMatrixAI, coords);
			// }
		}
	}
	if (comp.shootMatrixAround.length == 0) {
		// считаем корабль потопленным, сбрасываем свойства объекта tempShip
		// в исходные состояния
		self.resetTempShip();
	}

	return;
}

setShootMatrixAround: function() {

// если положение корабля не определено, то вычисляем его используя

// координаты первого и второго попадания

if (comp.tempShip.kx == 0 && comp.tempShip.ky == 0) {

// проверяем, есть ли в объекте 'tempShip.firstHit' координаты, если нет

// то будем считать, что это первое попадание и запишем

// в этот объект координаты первого попадания

if (Object.keys(comp.tempShip.firstHit).length === 0) {

comp.tempShip.firstHit = coords;

} else {

// запишем координаты второго попадания в объект 'nextHit'

comp.tempShip.nextHit = coords;

// вычисляем коэффициенты определяющие положения корабля

// разность между соответствующими координатами первого и второго

// попадания не может быть больше 1, в противном случае будем

// считать, что второе попадание было по другому кораблю

comp.tempShip.kx = (Math.abs(comp.tempShip.firstHit.x - comp.tempShip.nextHit.x) == 1) ? 1 : 0;

comp.tempShip.ky = (Math.abs(comp.tempShip.firstHit.y - comp.tempShip.nextHit.y) == 1) ? 1 : 0;

}

// корабль расположен вертикально

if (coords.x > 0 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x - 1, coords.y]);

if (coords.x < 9 && comp.tempShip.ky == 0) comp.shootMatrixAround.push([coords.x + 1, coords.y]);

// корабль расположен горизонтально

if (coords.y > 0 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y - 1]);

if (coords.y < 9 && comp.tempShip.kx == 0) comp.shootMatrixAround.push([coords.x, coords.y + 1]);

// получив координаты обстрела попадания, необходимо проверить их валидность

// координата валидна, если значение массива не равно или 2 (гарантированно пустая

// клетка), или 3 (промах), или 4 (попадание)

for (var i = comp.shootMatrixAround.length - 1; i >= 0; i--) {

// получаем координаты X и Y возможного выстрела

var x = comp.shootMatrixAround[i][0],

y = comp.shootMatrixAround[i][1];

// проверяем валидность этих координат и если они не валидны - удаляем их из массива

// координат выстрелов вокруг клетки с попаданием

if (user.matrix[x][y] !== 0 && user.matrix[x][y] !== 1) {

comp.shootMatrixAround.splice(i,1);

self.deleteElementMatrix(comp.shootMatrix, coords);

// if (comp.shootMatrixAI.length != 0) {

// self.deleteElementMatrix(comp.shootMatrixAI, coords);

// }

}

if (comp.shootMatrixAround.length == 0) {

// считаем корабль потопленным, сбрасываем свойства объекта tempShip

// в исходные состояния

self.resetTempShip();

}

return;

}

Итак, на этом я на этом заканчиваю рассмотрение алгоритма выстрела компьютера.

Заключение.

В пяти статьях, посвящённых игре «Морской бой», я постарался подробно и доступно рассказать, как написать эту популярную игру на JavaScript. Я не претендую на то, что написанный мною код идеален и полностью оптимизирован. Возможно вы сможете предложить свои варианты каких-либо участков кода, другие пути решения. С удовольствием обсудим их в комментариях.

Можно сделать ряд существенных изменений и дополнений к существующему коду, которые позволят сделать игру «Морской бой» более интересной и сложной:

Добавить выбор сложности игры «Морской бой», изменив ИИ компьютера в части касающейся, как расстановки кораблей, так и тактики обстрела. Например, многопалубные корабли можно размещать не просто рандомно, а вдоль границ игрового поля или ближе к какой-то одной границе, что освободит больше места для размещения однопалубных кораблей. Такая расстановка значительно уменьшит вероятность попадания в однопалубник и при этом повысит шансы компьютера на победу.
Набор кораблей, которые игроку необходимо перетащить на игровое поле, создавать «налету», по событию:

JavaScript

getElement('type_placement').addEventListener('click', function(e) { ... }

1
2
3

getElement('type_placement').addEventListener('click', function(e) { ... }
Координаты выстрелов, попаданий, промахов и т. д. передавать не в объекте obj, а в числовом массиве, что, возможно, улучшит оптимизацию кода.

Если у вас возникли вопросы или что-то не совсем понятно написано — пишите в комментарии, постараюсь объяснить более доступно и, при необходимости, перепишу или дополню статьи.

Игра Морской бой на JavaScript. Выстрел игрока.

Плавная прокрутка страницы на JavaScript

Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
Комментарии содержащие обсуждение политики, будут безжалостно удаляться.
Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега <pre>:
— <pre class="lang:xhtml"> - HTML;
— <pre class="lang:css"> - CSS;
— <pre class="lang:javascript"> - JavaScript.
Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.

HaliGali Ответить 8 февраля 2019 в 03:10

В статье присутствует ошибка синтаксиса в коде, в функции getCoordinatesShot (восьмая строка в вашем блоке кода). Поправьте
- Вальдемар HaliGali Ответить 8 февраля 2019 в 13:36
  
  Спасибо, поправил.
Maaaan Ответить 11 апреля 2019 в 21:39

В это игре есть один существенный баг. Если в расположить коробли близко друг к други и попытаться повернуть один корабль так, чтобы он попал в зону нахождения второго корабля, то корабль изчезает. Можно начать игру и затащить на изи. Но корабли перед использование этой уязвимости должны ВСЕ находиться на поле.
- Вальдемар Maaaan Ответить 16 апреля 2019 в 17:37
  
  Ошибку исправил. Это не баг логики, а косяк при работе с редактором. В скрипте примера, в функции Instance.prototype.rotationShip, случайно были поменяны местами несколько строк кода.
  Код приведённый в статье в разделе «Поворот корабля на 90°» — верный, там править ничего не надо.
  Спасибо за указанную ошибку.
John Ответить 22 апреля 2019 в 21:09

Статьи пока не читал, добавил в закладки, почитаю на свежую голову.
Поиграл немного, нашел много разных багов:
1. Корабли можно перетаскивать даже во время боя.
2. Хотелось бы, чтобы убитые корабли автоматически окружались промахами по периметру.
3. Отсюда вытекает следующий пункт: никогда не знаешь точно убит ли корабль полностью. Соперник добивает корабль и следующий выстрел всегда делает в следующую клетку, как если бы там была еще одна палуба.
- Вальдемар John Ответить 22 апреля 2019 в 21:22
  
  По первому пункту, действительно, баг присутствует — разберусь. А по п.п. 2 и 3 — так и задумывалось.
  - John Вальдемар Ответить 27 апреля 2019 в 05:46
    
    Так это же идёт вразрез с правилами игры. Когда корабль убит полностью сопернику сообщают об этом, и он не должен делать бессмысленный выстрел рядом с полностью убитым кораблём
John Ответить 22 апреля 2019 в 21:14

Еще бывает так, что в ячейке стоит промах, а на самом деле там палуба корабля