Статья по теме:
Демо JavaScript:
<canvas id="cvs" width="175" height="175"></canvas>
// инициализация канваса var canvas = document.getElementById('cvs'); var ctx = canvas.getContext('2d'); var x = 0; var y = 300; var tick_count = 0; var flag = 0; // 0 - летит вверх var sprite = new Image(); sprite.src = 'http://grafika.me/files/bird_sprite.png'; // наше изображение // событие с функцией инициализации sprite.onload = function() { tick(); requestAnimationFrame(tick); } // функция для анимации циклических алгоритмов function tick() { if(tick_count > 1) { // скорость отрисовки draw(); tick_count = 0; } tick_count += 1; // увеличиваем значение fly(); requestAnimationFrame(tick); } // алгоритм, по которому птичка летит вверх/вниз // если она долетает до 350 по у, то флаг становится 1 и она летит вниз // если она долетает до 280 по у, то флаг становится 0 и она летит вверх function fly() { if (y == 350) { flag = 1; } else if (y == 280) { flag = 0; } if (flag == 0) { y++; } else if (flag == 1) { y--; } } // ширина изображения — 864 пикселя // всего 6 кадров // 864 / 6 = 144 пикселя будет занимать каждый шаг анимации // 864 - 144 = 720 — чтобы не получить лишний кадр // функция отрисовки спрайта function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // очищаем канвас после каждого кадра x = (x === 720 ? 0 : x + 144); // проверяем, дошёл ли х до предела ctx.drawImage(sprite, x, y, 130, 150, 15, 15, 130, 150); // подгоняем изображение под канвас }
Прикрепленный файл | Размер |
---|---|
bird-sprite.zip | 135.07 кб |
bird_sprite.png | 45.79 кб |