Классический сапёр на html5 и LibCanvas

в 3:14, , рубрики: AtomJS, canvas, game development, html5, javascript, LibCanvas, метки: , , , ,

Классический сапёр на html5 и LibCanvas

В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.

Воспользуемся стандартным шаблоном для «старта» нашего приложения. Важно не забывать подключать js-файлы после создания соответствующих классов.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>LibCanvas :: Mines</title>
        <link href="/files/styles.css" rel="stylesheet" />
        <script src="/files/js/atom.js"></script>
        <script src="/files/js/libcanvas.js"></script>
    </head>
    <body>
        <p><a href="/">Return to index</a></p>
        <script>
new function () {
    LibCanvas.extract();

    atom.dom(function () {
        new Mines.Controller();
    });
};
        </script>
        <script src="js/controller.js"></script>
    </body>
</html>

Я нарисовал две картинки — мины и флага. Всё остальное мы будем делать «вручную» прям в приложении. Объеденил их в один спрайт для уменьшения количества запросов и предзагружу перед тем, как стартовать приложение. В коде так же можно увидеть нарезку при помощи atom.ImagePreloader:

/** @class Mines.Controller */
atom.declare( 'Mines.Controller', {
	initialize: function () {
		atom.ImagePreloader.run({
			flag: 'flag-mine.png [48:48]{0:0}',
			mine: 'flag-mine.png [48:48]{1:0}'
		}, this.start.bind(this) );
	},

	start: function (images) {
		this.images = images;
	}
});

Отрисовка

Я люблю визуально видеть то, что присходит, потому предпочитаю начинать с программирования отрисовки, а только потом переходить к логике. Для того, чтобы наш код заработал мы воспользуемся LibCanvas.Engines.Tile. Добавим класс View, в котором и создадим наш движок. Также нам надо создать простое приложение и привязать движок к приложению при помощи TileEngine.Element.app. Значение по-умолчанию у нас будет равно закрытой ячейке. Не забудем создать этот View, в нашем контроллере.

/** @class Mines.View */
atom.declare( 'Mines.View', {
	initialize: function (controller, fieldSize) {
		this.images = controller.images;

		this.engine = new TileEngine({
			size: fieldSize,
			cellSize: new Size(24, 24),
			cellMargin: new Size(0, 0),
			defaultValue: 'closed'
		})
		.setMethod( this.createMethods() );

		this.app = new App({
			size  : this.engine.countSize(),
			simple: true
		});

		this.element = TileEngine.Element.app( this.app, this.engine );
	},
/** @class Mines.Controller */

// ...

	start: function (images) {
		this.images = images;
		this.view = new Mines.View( this, new Size(15,8) );
	}

Не торопитесь запускать этот код, у нас ещё не определён метод createMethods класса View. Давайте вообще определимся с тем, какие у нас могут быть состояния ячейки.

Во время игры мы можем видеть такое:

1. Числа от 1 до 8.
2. Закрытая ячейка
3. Открытая, но пустая ячейка
4. Флажок

После её окончания — следующее:

1. Все мины
2. Если подорвались на одной из них — она выделена
3. Если где-то неверно поставили флаг

Итого, 8 + 3 + 3 = 14 разных состояний. Опишем их все:

/** @class Mines.View */

// ...

	createMethods: function () {
		return {
			1: this.number.bind(this, 1),
			2: this.number.bind(this, 2),
			3: this.number.bind(this, 3),
			4: this.number.bind(this, 4),
			5: this.number.bind(this, 5),
			6: this.number.bind(this, 6),
			7: this.number.bind(this, 7),
			8: this.number.bind(this, 8),
			explode : this.explode.bind(this),
			closed  : this.closed .bind(this),
			mine    : this.mine   .bind(this),
			flag    : this.flag   .bind(this),
			empty   : this.empty  .bind(this),
			wrong   : this.wrong  .bind(this)
		};
	},

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

/** @class Mines.Controller */
// ...
	start: function (images) {
		// ...

		// todo: remove after debug
		'1 2 3 4 5 6 7 8 empty mine flag explode wrong closed'
			.split(' ')
			.forEach(function (name, i) {
				this.view.engine
					.getCellByIndex(new Point(i, 3))
					.value = name;
			}.bind(this));

Мы просто взяли все индексы и присвоили их по-очереди разным клеткам поля. Теперь отрисовка. В первую очередь нам необходимо создать общий метод, который будет «расскрашивать» ячейку — заливать и обводить необходимым цветом. Если линия шириной в 1 пиксель будет отрисовываться в целые координаты — она будет блуриться (см htmlbook.ru/html5/canvas, ответ на вопрос «В. Почему мы начинаем x и y c 0.5, а не с 0?»), потому воспользуемся экспериментальным методом прямоугольника snapToPixel

/** @class Mines.View */
// ...
	color: function (ctx, cell, fillStyle, strokeStyle) {
		var strokeRect = cell.rectangle.clone().snapToPixel();

		return ctx
			.fill( cell.rectangle, fillStyle)
			.stroke( strokeRect, strokeStyle );
	},

Теперь по-очереди добавляем методы отрисовки. Пустая клетка — просто красим:

/** @class Mines.View */
// ...
	empty: function (ctx, cell) {
		return this.color(ctx, cell, '#999', '#aaa');
	},

Мина и флаг — это просто картинки на пустой клетке:

/** @class Mines.View */
// ...
	mine: function (ctx, cell) {
		return this
			.empty(ctx, cell)
			.drawImage( this.images.get('mine'), cell.rectangle );
	},

	flag: function (ctx, cell) {
		return this
			.empty(ctx, cell)
			.drawImage( this.images.get('flag'), cell.rectangle );
	},

Мина, на которой мы подорвались отрисовывается с красным фоном:

/** @class Mines.View */
// ...
	explode: function (ctx, cell) {
		return this
			.color(ctx, cell, '#c00', '#aaa')
			.drawImage( this.images.get('mine'), cell.rectangle );
	},

Неправильно установленный флаг — красный крест. Отрисовать его достаточно просто. Сначала — ограничиваем отрисовку в пределах нашего прямоугольника при помощи clip.
Заливаем его фоном, а потом рисуем две красных линии — с верхнего-левого в нижний-правый и с нижнего-левого угла в верхний-правый.

/** @class Mines.View */
// ...
	wrong: function (ctx, cell) {
		var r = cell.rectangle;

		return this.empty(ctx, cell)
			.save()
			.clip( r )
			.set({ lineWidth: Math.round(cell.rectangle.width / 8) })
			.stroke( new Line( r.from      , r.to       ), '#900' )
			.stroke( new Line( r.bottomLeft, r.topRight ), '#900' )
			.restore();
	},

Закрытая ячейка отрисовывается тоже достаточно просто — градиент от тёмного к светлому, с верхнего-левого угла в нижний-правый.

/** @class Mines.View */
// ...
	closed: function (ctx, cell) {
		return ctx.fill( cell.rectangle,
			ctx.createGradient(cell.rectangle, {
				0: '#eee', 1: '#aaa'
			})
		);
	},

И, собственно, цифры. Сначала в прототип добавим список цветов для каждой цифры. Нуля нету, потому ставим нул.
Обратите внимание, что первым аргументом функции у нас number. Именно его мы биндили в методе createMethods.
После этого рисуем клетку, как пустую, а сверху, текстом, пишем цифру.

/** @class Mines.View */
// ...
	numberColors: [null, '#009', '#060', '#550', '#808', '#900', '#555', '#055', '#000' ],

	number: function (number, ctx, cell) {
		var size = Math.round(cell.rectangle.height * 0.8);

		return this.empty(ctx, cell)
			.text({
				text  : number,
				color : this.numberColors[number],
				size  : size,
				lineHeight: size,
				weight: 'bold',
				align : 'center',
				to    : cell.rectangle
			});
	}

Наша реализация позволяет нам менять размер ячеек и они будут в любом случае отлично выглядеть:

Классический сапёр на html5 и LibCanvas

Генератор мин

Как видим, отрисовка полностью готова. Теперь нам достаточно сделать простое действие и клетка поменяет свой внешний вид.

Удалим наш дебаг-код и создадим инстанс генератора:

/** @class Mines.Controller */
// ..
	start: function (images) {
		this.images = images;
		
		this.size  = new Size(15, 8);
		this.mines = 20;

		this.view = new Mines.View( this, this.size );
		this.generator = new Mines.Generator( this.size, this.mines );
	}

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

Классический сапёр на html5 и LibCanvas

Алгоритм генерации мин у нас будет очень простой — создаём список валидных точек (все, кроме той, на которую кликнули) — метод snapshot, после этого «выдёргиваем» из них необходимое количество случайных — метод createMines:

/** @class Mines.Generator */
atom.declare( 'Mines.Generator', {

	mines: null,

	initialize: function (fieldSize, minesCount) {
		this.fieldSize  = fieldSize;
		this.minesCount = minesCount;
	},

	/** @private */
	snapshot: function (ignore) {
		var x, y, point,
			result = [],
			size = this.fieldSize;

		for (y = size.height; y--;) for (x = size.width; x--;) {
			point = new Point(x, y);

			if (!point.equals(ignore)) {
				result.push(point);
			}
		}

		return result;
	},

	/** @private */
	createMines: function (count, ignore) {
		var snapshot = this.snapshot( ignore );

		return atom.array.create(count, function () {
			return snapshot.popRandom();
		});
	}

});

Следующий шаг — это добавить api-метод, который будет вызываться для генерации этих мин и заносить их в индекс для быстрого доступа. Создадим двумерный хеш со значениями 1, где мина есть и 0, где мины нету. Нам важно использовать именно Integer, причину мы увидим ниже. Теперь у нас есть быстрый метод isMine для определения, есть ли мина по координате. Метод isReady будет использоваться, чтобы узнать внешним классам, сгенерировано ли уже минное поле.

/** @class Mines.Generator */
// ..
	
	isReady: function () {
		return this.mines != null;
	},

	isMine: function (point) {
		return this.mines[point.y][point.x];
	},

	generate: function (ignore) {
		var mines, minesIndex,
			size = this.fieldSize;

		mines = this.createMines(this.minesCount, ignore);

		minesIndex = atom.array.fillMatrix(size.width, size.height, 0);

		mines.forEach(function (point) {
			minesIndex[point.y][point.x] = 1;
		});

		this.mines = minesIndex;
	},

Следующий шаг — сделать получение значения клетки, если там мины нет. Алгоритм очень прост — берём всех соседей, которые не выходят за рамки поля, считаем суму их значений. Именно в этом месте то, что мина есть Integer нам и пригодилось.

/** @class Mines.Generator */
// ..
	initialize: function (fieldSize, minesCount) {
		// эти два метода мы передаём как колбеки, потому привяжем их к контексту
		this.bindMethods([ 'isValidPoint', 'isMine' ]);


// ..
	getValue: function (point) {
		// получаем всех соседей
		return this.getNeighbours(point)
			// превращаем их в список мин (1 и 0)
			.map(this.isMine)
			// получаем количество мин в соседних клетках
			.sum();
	},

	// Проверяем, чтобы точка не вышла за пределы поля
	isValidPoint: function (point) {
		return point.x >= 0
			&& point.y >= 0
			&& point.x < this.fieldSize.width
			&& point.y < this.fieldSize.height;
	},

	// Список соседей - это все соседи, кроме тех, что выходят за границы
	getNeighbours: function (point) {
		return point.neighbours.filter( this.isValidPoint );
	},

Взаимодействие с пользователем

У нас есть движок игры, теперь необходимо всё это сделать игрой, а не только логикой. Создаём класс Action, который будет отвечать за все действия пользователя. Первое, что мы сделаем — это реакцию на клик пользователя. При помощи TileEngine.Mouse мы будем слушать события мыши, связанные с полем. Вешаем Mouse.prevent на событие 'contextmenu', чтобы не выскакивало надоедливое меню. При клике проверяем кнопку. Левая кнопка мыши равна 0, средняя равна 1, правая равна 2. Напомним, что в оригинальной игре клик левой означал открытие клетки, крик средней — открытие всех окружающих, а клик правой — постановка мины.

/** @class Mines.Controller */
// ..
	start: function (images) {
		// ..
		this.action = new Mines.Action(this);
	}
/** @class Mines.Action */
atom.declare( 'Mines.Action', {
	actions: [ 'open', 'all', 'close' ],

	initialize: function (controller) {
		this.controller = controller;
		this.bindMouse();
	},

	bindMouse: function () {
		var view, mouse;

		view = this.controller.view;
		mouse = new Mouse(view.app.container.bounds);

		new App.MouseHandler({ mouse: mouse, app: view.app })
			.subscribe( view.element );

		mouse.events.add( 'contextmenu', Mouse.prevent );

		new TileEngine.Mouse( view.element, mouse ).events
			.add( 'click', function (cell, e) {
				this.activate(cell, e.button);
			}.bind(this));
	},

	activate: function (cell, actionCode) {
		console.log( cell.point.dump(), actionCode );
	}
});

Добавим первую интерактивность. Мы будем получать по индексу название метода, который необходимо вызвать и, заодно напишем самый простой метод — close. Если клетка закрыта, то устанавливаем на неё флаг, если на клетке уже стоит флаг, то отмечаем её закрытой. Теперь можно увидеть первое взаимодействие — по правой кнопке мыши появляется флаг на клетке.

/** @class Mines.Action */

// ...

	activate: function (cell, actionCode) {
		if (typeof actionCode == 'number') {
			actionCode = this.actions[actionCode];
		}

		this[actionCode](cell);
	},

	close: function (cell) {
		if (cell.value == 'closed') {
			cell.value = 'flag';
		} else if (cell.value == 'flag') {
			cell.value = 'closed';
		}
	},

	open: function (cell) {

	},

	all: function (cell) {

	}

Теперь опишем открытие клетки. Для начала, открываем только те клетки, которые закрыты. Нечего взаимодействовать с всякими статичными цифрами и флагами. Во-вторых, проверяем, готовы ли наши мины и, если нет — запускаем генератор.

Если открыта мина, то вызываем метод lose, где помечаем клетку, как взорвавшуюся.
Если в клетке есть цифра, то просто пишем её, никаких других действий с этой клеткой не сделать.
Если клетка пуста, то нам необходимо рекурсивно открывать все клетки вокруг, потому пока создаём метод и помечаем клетку как пустую.

/** @class Mines.Action */

// ...

	open: function (cell) {
		if (cell.value != 'closed') return;
		
		var value, gen = this.controller.generator;

		if (!gen.isReady()) {
			gen.generate(cell.point);
		}

		if (gen.isMine(cell.point)) {
			this.lose(cell);
		} else {
			value = gen.getValue(cell.point);

			if (value) {
				cell.value = value;
			} else {
				this.openEmpty(cell);
			}
		}
	},

	lose: function () {
		cell.value = 'explode';
	},

	openEmpty: function (cell) {
		cell.value = 'empty';
	},

Для открытия всех клеток вокруг пустой просто получаем соседей и передаём в метод open. Этим мы воспользуемся для рекурсивного открытия пустых клеток и для быстрого открытия по средней кнопке мыши.

/** @class Mines.Action */

// ...
	openNeighbours: function (cell) {
		this.controller.generator
			.getNeighbours(cell.point)
			.forEach(function (point) {
				this.open( this.getCell(point) );
			}.bind(this));
	},

	openEmpty: function (cell) {
		cell.value = 'empty';

		this.openNeighbours(cell);
	},

	getCell: function (point) {
		return this.controller.view.engine.getCellByIndex(point);
	},

	all: function (cell) {
		if (parseInt(cell.value)) {
			this.openNeighbours(cell);
		}
	},

Проигрышь отображаем так — проходим все клетки, где у нас было закрыто и на самом деле была мина — отрисовываем мину. Где у нас стоял флаг, а на самом деле мины нету — отображаем ошибку. Так же блокируем методы open и close после проигрыша.

/** @class Mines.Action */

// ...
	lost: false,
	
	lose: function (cell) {
		this.lost = true;
		
		cell.value = 'explode';

		this.controller.view.engine.cells
			.forEach(this.checkCell.bind(this));
	},

	checkCell: function (cell) {
		if (cell.value == 'closed' || cell.value == 'flag') {
			var isMine = this.controller.generator.isMine(cell.point);
			
			if (isMine && cell.value == 'closed') {
				cell.value = 'mine';
			}
			if (!isMine && cell.value == 'flag') {
				cell.value = 'wrong';
			}
		}
	},


// ...
	close: function (cell) {
		if (this.lost) return;
// ...
	open: function (cell) {
		if (this.lost) return;
// ...

Классический сапёр на html5 и LibCanvas

Победа!

Осталось отобразить победу, затраченное время и вывести количество мин, которые осталось открыть. Не будем заморачиваться с внешним видом, воспользуемся гиковским, но работающим atom.trace. Получим количество мин. Посчитаем количество пустых клеток — это количество клеток всего минус количество мин. Каждый раз при открытии клетки будем уменьшать значение пустых на один. Когда они достигнут нуля — игра выиграна. Дадим отрисоваться холсту и с небольшой задержкой отобразим пользователю алерт.

/** @class Mines.Action */

// ...
	initialize: function (controller) {

		// ...

		this.startTime = null;

		this.minesLeft = controller.mines;
		this.minesTrace = atom.trace(0);
		this.changeMines(0);

		this.emptyCells = controller.size.width * controller.size.height - this.minesLeft;
	},

	changeMines: function (delta) {
		this.minesLeft += delta;
		this.minesTrace.value = "Mines: " + this.minesLeft;
	},

	// ...

	open: function (cell) {
		// ...

		if (!gen.isReady()) {
			// ...
			this.startTime = Date.now();
		}

		if (gen.isMine(cell.point)) {
			// ...
		} else {
			// ...

			if (--this.emptyCells == 0) {
				this.win();
			}
		}
	},

	// ...
	win: function () {
		var time = Math.round( (Date.now()-this.startTime) / 1000 );
		alert.delay(100, window, ['Congratulations! Mines has been neutralized in '+ time +' sec!']);
	},

	// ...
	close: function (cell) {
		// ...

		if (cell.value == 'closed') {
			// ...
			this.changeMines(-1);
		} else if (cell.value == 'flag') {
			// ...
			this.changeMines(+1);
		}
	},

Играть в сапёр

Автор: TheShock

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js