sysadmin-vlg.ru

Простая игра на HTML5 Canvas – часть 2

2017-08-10 12:18:37 TrefAS


Персонаж

Пришло время добавить главного героя на наш чудесный фон созданный в предыдущей части урока. В StH это будет милый маленький ангел с простой анимацией хлопающих крыльев, состоящей всего из двух кадров, сохраненных в одном файле формата PNG.

Давайте создадим объект, представляющий главного героя со всеми необходимыми атрибутами и методами. Назовем объект ‘player’ (англ. – игрок). Далее мной выбран не лучший способ описания объекта в JS, потому что все атрибуты являются доступными, а закрытые не применяются вообще. Но это простейшее решение, позволяющее уложиться в запланированные 10КБ, а главное что это работает. Если вам захочется узнать о закрытых атрибутах и методах, наследовании и т.п. прочитайте об этом в учебнике по JavaScript (на англ.языке можно прочитать тут - http://jibbering.com/faq/notes/closures/ ). Также важно помнить что если вы соберетесь уменьшить код с помощью онлайн инструментов, таких как ‘Closure Compiler’ (http://closure-compiler.appspot.com/home) что имена аргументов объектов он не сокращает. Именно поэтому я использую 2-х буквенные сокращения для описания объекта, например, ‘player.im’ вместо ‘player.image’. Итак, вот код, который добавляется в наш game.js:
var player = new (function(){
//создаем новый объект основанный на функции
//и присваиваем его переменной ‘player’

    var that = this;
//'that' – псевдоним этого объекта

//attributes
    that.image = new Image();
    that.image.src = "angel.png";
//создаем новый Image элемент и
//'angel.png' закачиваем в него

    that.width = 65;
//ширина одного кадра
    that.height = 95;
//высота одного кадра (рисунок в 2 раза выше, ведь в нем 2 кадра)

    that.X = 0;
    that.Y = 0;
//X&Y позиция объекта на холсте

//далее описываем методы
    that.setPosition = function(x, y){
    that.X = x;
    that.Y = y;
}

    that.draw = function(){
        try {
            ctx.drawImage(that.image, 0, 0, that.width, that.height, that.X, that.Y, that.width, that.height);
//отрисовываем наш персонаж функцией drawImage(объект-рисунок, X источника,
//Y источника, ширина источника, высота источника, X назначения (X позиция),
//Y назначения (Y позиция), ширина назначения, высота назначения)
        } catch (e) {
//Иногда, если изображение персонажа слишком велико и еще не успело
//загрузиться до вывода первого кадра, JavaScript выдаст ошибку и прекратит
//выполнение всего. Чтобы этого избежать, мы перехватываем ошибку и повторим
//попытку рисования в следующем кадре. Это незаметно для пользователей ведь
//частота кадров 50 в секунду.
        }
    }
})();
//мы сразу же применим функции описанные выше
//и создадим переменную ‘player’
//как новый объект

player.setPosition(~~((width-player.width)/2),  ~~((height - player.height)/2));
//наш персонаж готов, давайте переместим его
//в центр экрана,
//'~~' возвращает округленное вниз целое значение
//переменной с плавающей точкой, как это делает Math.floor()

Итак, теперь  необходимо перерисовывать нашего ангела на каждом кадре в игровом цикле с помощью  функции ‘player.draw’:
var GameLoop = function(){
    clear();
    MoveCircles(5);
    DrawCircles();
    player.draw();
    gLoop = setTimeout(GameLoop, 1000 / 50);
}

Ну а как насчет анимации? Спрайт (файл с изображением ангела) имеет 2 кадра, но только один из них перерисовывается на каждом кадре. Для того, чтобы анимировать наш персонаж потребуются дополнительные атрибуты и небольшие изменения метода ‘draw’:
var player = new (function(){
(...)
    that.frames = 1;
//нумерация кадров начинается с нуля
    that.actualFrame = 0;
//текущий кадр
    that.interval = 0;
//нам не прийдется переключать кадры
//в игровом цикле, ‘interval’ позаботится об этом

    that.draw = function(){
        try {
            ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height);
//третий аргумент умножается на номер текущего кадра, чтобы показать нужную
//часть исходного изображения
        } catch (e) {};

        if (that.interval == 4 ) {
            if (that.actualFrame == that.frames) {
                that.actualFrame = 0;
            } else {
                that.actualFrame++;
            }
            that.interval = 0;
        }
    that.interval++;
//выше показана простая логика переключающая кадры каждые 4 итерации

    }
})();

Спасибо за внимание! Результат работы проделанной в данной части урока, как обычно, можно посмотреть по адресу: http://jsbin.com/orohe4/, а исходники скачать тут: http://github.com/michalbe/Simple-game-with-HTML5-Canvas/tree/master/part2/

КОПИРАЙТЫ.

Автор: Михал Будзинский https://twitter.com/#!/@michalbe
Автор перевода: Андрей Семенов https://twitter.com/#!/a_semenov79