Добрый день, уважаемые читатели!
Сегодня я продолжаю писать свою небольшую игру на 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();
И вот, что у нас получилось в итоге:
Враги подходят поближе к игроку, и смотрят в нужную сторону.
На сегодня это все. В следующей статья я расскажу, как мы будем производить атаку на игрока.
Подписывайтесь на рассылку.
Остались вопросы? Предложения? Пишите в комментариях!
Увидимся в следующей статье 😉