Добрый день, уважаемые читатели!
Сегодня я продолжаю писать свою небольшую игру на canvas.
Первая статья находится тут: ссылка.
Вторая тут: ссылка.
Что мы рассмотрим в этой статье?
1. Создадим молнию
2. Заставим врагов создавать молнию
3. Небольшие изменения в коде/картинке
Начали!
Анимация
Сразу обновим изображение мага и поправим координаты анимации
Обновим координаты
var animationsWizard = {}; var animationsLight = { light: [ 2, 405, 40, 39, 46, 405, 40, 39, 90, 405, 40, 39, 134, 405, 40, 39, 178, 405, 40, 39, 222, 405, 40, 39, 266, 405, 40, 39, 310, 405, 40, 39, 354, 405, 40, 39, 398, 405, 40, 39, 442, 405, 40, 39, 486, 405, 40, 39, 530, 405, 40, 39 ] } var animationsPlayer = { walkRight: [ 2, 131, 48, 49, 52, 131, 48, 49, 102, 131, 48, 49, 152, 131, 48, 49, 202, 131, 48, 49, 252, 131, 48, 49, 302, 131, 48, 49, 352, 131, 48, 49, 402, 131, 48, 49, 452, 131, 48, 49, 502, 131, 48, 49, 552, 131, 48, 49, 602, 131, 48, 49, 652, 131, 48, 49, 702, 131, 48, 49, 752, 131, 48, 49, 802, 131, 48, 49, 852, 131, 48, 49 ], walkLeft: [ 2, 191, 48, 49, 52, 191, 48, 49, 102, 191, 48, 49, 152, 191, 48, 49, 202, 191, 48, 49, 252, 191, 48, 49, 302, 191, 48, 49, 352, 191, 48, 49, 402, 191, 48, 49, 452, 191, 48, 49, 502, 191, 48, 49, 552, 191, 48, 49, 602, 191, 48, 49, 652, 191, 48, 49, 702, 191, 48, 49, 752, 191, 48, 49, 802, 191, 48, 49, 852, 191, 48, 49 ], idleRight: [ ... ], idleLeft: [ ... ], attackLeft: [ 25, 250, 48, 67, 123, 250, 48, 67, 221, 250, 48, 67, 319, 250, 48, 67, 417, 250, 48, 67, 515, 250, 48, 67, 613, 250, 48, 67, 711, 250, 48, 67, 809, 250, 48, 67, 907, 250, 48, 67, 1005, 250, 48, 67, 1103, 250, 48, 67 ] };
Создание молнии
Начнем с создания молнии. Прежде всего добавим массив молний, а заодно и перенесем массив магов повыше:
var direction = ''; var wizardSpeed = 0.5; var wizards = []; var lights = []; // массив объектов молний
Анимацию для молнии мы уже написали выше в списке анимаций.
Загрузим изображение молнии:
var wizardImg = new Image(); wizardImg.src = 'wizard.png'; var lightImg = new Image(); lightImg.src = 'wizard.png';
Напишем функцию создания нашей молнии. Далее будем использовать данную функцию не только для молний, но и для других атакующих вещей.
function makeBullet(type, x, y) { if (type == 'light') { light = new Konva.Sprite({ x: x, y: y, image: lightImg, animation: 'light', animations: animationsLight, frameRate: 7, frameIndex: 0 }); lights.push(light); } // add the shape to the layer layer.add(light); // add the layer to the stage stage.add(layer); // start sprite animation light.start(); }
В функцию передаем тип и координаты объекта.
Создадим для теста пару молний:
makeBullet('light', 100, 100); makeBullet('light', 400, 100);
Вот наши молнии, которые зацикленно бьют в землю:
По задумке молния должна бить 1 раз и пропадать в поля игры. Доработаем код и добавим новую функцию, которая будет пробегаться по списку молний и удалять ту, у которой анимация подошла к конечному кадру.
function moveBullet() { // молния var i; for(i = 0; i < lights.length; i++) { if (lights[i].frameIndex() > (animationsLight.light.length) / 4 - 2) { lights[i].setX(-10000); // сдвигаем за край экрана lights.splice(i,1); //удаляем 1 эл. с индексом i } } }
Теперь наши молнии пропадают с поля. Теперь перейдем ко второй задаче. Заставим врагов создавать молнию около игрока.
function actEnemies() { for(i = 0; i < wizards.length; i++) { wizards[i].mana++; if (wizards[i].mana > 400 && (wizards[i].attrs.animation == 'idleLeft' || wizards[i].attrs.animation == 'idleRight')) { wizards[i].action = 'makeLight'; wizards[i].attrs.animation = 'attackLeft'; wizards[i].setY(wizards[i].attrs.y - 18); wizards[i].mana -= 400; } // кастование молнии после 10 кадра if (wizards[i].action == 'makeLight' && wizards[i].frameIndex() > 10) { wizards[i].setY(wizards[i].attrs.y + 18); makeBullet('light', Math.floor((Math.random() * 200) + player.attrs.x - 100), Math.floor((Math.random() * 200) + player.attrs.y - 100)); wizards[i].action = 'stay'; } } }
Каждый вызов функции у мага увеличивается количество магической энергии. Когда ее переваливает за 400, то маг атакует игрока. Действие противника меняется на makeLight и начинается процесс создания молнии. После того, как проходит 10-ый кадр анимации кастования молнии, появляется сама молния.
В строке 9 и 15 мы смещаем врага по вертикали, так как размер кадра мага, который стоит по высоте меньше, чем размер кадра мага, который создает молнию. Чтобы при смене анимации маг оставался на месте, я добавил смещение по оси Y в одну и в другую сторону.
В строке 16 мы задаем случайную координату для молнии около игрока.
Здесь так же используется свойства mana, которого пока нет у мага. Поэтому добавим его в функцию создания:
function makeEnemy(type, x, y) { ... wizard.direction = 'right'; wizard.action = ''; wizard.mana = 0; ... }
А теперь зациклим вызов функций:
var gameLoop = new Konva.Animation(function(frame) { ... moveBullet(); actEnemies(); }
Осталось добавить лишь небольшое условие для магов, чтобы не было конфликта между анимацией «стоять» и «атака»:
function moveEnemies() { wizards.forEach(function(wizard) { if (wizard.action != 'makeLight') { ... } }) }
Все! Отлично! Теперь нас постоянно атакуют молниями.
И небольшая добавка. Выведем для справки на экран количество магов и количество молний.
var simpleText = new Konva.Text({ x: 15, y: 15, text: 'text', fontSize: 18, fill: 'black' }); layer.add(simpleText);
// бесконечный цикл игры var gameLoop = new Konva.Animation(function(frame) { ... simpleText.setAttr('text', 'Молний: ' + lights.length + ", Магов на карте: " + wizards.length); }
Теперь на экран видим это:
На сегодня хватит.
В следующей статье я расскажу, как организовать столкновение игрока с молнией и, соответственно, как сделать урон от этой молнии. И начнем потихоньку заниматься уже атакой со стороны игрока.
Остались вопросы? Пишите в комментарии! Есть советы/подсказки? Так же пишите! 🙂 Будем вместе улучшать игру 🙂
Спасибо за внимание! Подписывайтесь на рассылку 😉