Разработка игры на Canvas, часть 2. Создание противника

Добрый день, уважаемые читатели!

Сегодня я продолжаю писать свою небольшую игру на canvas. Первая статья находится тут: ссылка.

Что мы рассмотрим в этой статье?

1. Создание врагов

2. Движение врагов до определенной точки

3. Небольшие изменения в основном коде

Изменения в основном коде

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

var player = new Konva.Sprite({
	x: 200,
	y: 150,
	image: playerImg,
	animation: 'idleRight',
	animations: animationsPlayer,
	frameRate: 7,
	frameIndex: 0
});
player.speed = 2;
player.sizeX = 50;
player.sizeY = 50;

// отлавливание событий нажатия на "игровые" клавиши
function handleInput() {

	...

	if(input.isDown('DOWN') || input.isDown('s')) {
		if (player.attrs.y + player.speed < canvasHeight - player.sizeY) {
			...
		}
	}

	if(input.isDown('UP') || input.isDown('w')) {
		if (player.attrs.y - player.speed > 0) {
			...
		}
	}

	if(input.isDown('LEFT') || input.isDown('a')) {
		if (player.attrs.x - player.speed > 0) {
			...
		}
	}

	if(input.isDown('RIGHT') || input.isDown('d')) {
		if (player.attrs.x + player.speed < canvasWidth - player.sizeX) {
			...
		}
	}

}

На этом мелкие правки закончились. По ходу разработки они еще будут. А пока что переходим к созданию врагов.

Создание врагов

На данный момент я решил взять тоже изображение для врага, что и для игрока.

animationsWizard = animationsPlayer; // такая же анимация, как у игрока

var wizardImg = new Image();
wizardImg.src = 'wizard.png';

Для создания врагов напишем новую функцию:

function makeEnemy(type, x, y) {

	if (type == 'wizard') {
		wizard = new Konva.Sprite({ // так же, как и для игрока
			x: x,
			y: y,
			image: wizardImg,
			animation: 'idleRight',
			animations: animationsWizard,
			frameRate: 7,
			frameIndex: 0
		});
		wizard.direction = 'right';
		wizard.action = '';
		
		wizards.push(wizard); // добавляем врага в список
	}

	 // add the shape to the layer
	layer.add(wizard);
	// add the layer to the stage
	stage.add(layer);
	// start sprite animation
	wizard.start();
}

В функцию мы передаем 3 параметра. Тип врага и его координаты, на которых он появится.

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

var canvasHeight = 500;//window.innerHeight;
var direction = '';
var wizardSpeed = 0.5;
var wizards = []; // коллекция врагов

Попробуем создать парочку врагов для теста.

makeEnemy('wizard', -30, 50);
makeEnemy('wizard', 580, 350);

Вот, что получилось:

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

Движение врагов

Я написал простую функцию, которая потом еще не раз улучшится 🙂

function moveEnemies() {
	// перебираем все элементы в массиве
	wizards.forEach(function(wizard) {
		// чтобы враг смотрел в нужную сторону, прописали анимацию
		if (wizard.direction == 'right') {
			wizard.attrs.animation = 'idleRight';
		}
		else {
			wizard.attrs.animation = 'idleLeft';
		}
		
		// идем слева направо
		if (wizard.attrs.x < 30) {
			wizard.setX(wizard.attrs.x + wizardSpeed);
			wizard.attrs.animation = 'walkRight';
			wizard.direction = 'right';
			wizard.action = 'go'; // обозначение действия, понадобится в дальнейшем
		}

		// идем справа налево
		if (wizard.attrs.x > canvasWidth - 70) {
			wizard.setX(wizard.attrs.x - wizardSpeed);
			wizard.attrs.animation = 'walkLeft';
			wizard.direction = 'left';
			wizard.action = 'go';
		}
	});

}

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

// бесконечный цикл игры
var gameLoop = new Konva.Animation(function(frame) {
	handleInput();
	moveEnemies();
}, layer);
gameLoop.start();

И вот, что у нас получилось в итоге:

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

На сегодня это все. В следующей статья я расскажу, как мы будем производить атаку на игрока.

Подписывайтесь на рассылку.

Остались вопросы? Предложения? Пишите в комментариях!

Увидимся в следующей статье 😉