Птичка

<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); // подгоняем изображение под канвас
}