|
// Запоминаем размеры досупной области экрана в глобальный объект. |
|
// Мы уменьшаем размер на 64 пикселя согласно размеру мухи (64 на 64). |
|
// Таким образом, мы указываем область, в которой мухи будут видимы. |
|
var area = { |
|
width: $(window).width() - 64, |
|
height: $(window).height() - 64 |
|
}; |
|
|
|
// Фабрика мух. |
|
var makeFly = function(x, y, speedX, speedY) { |
|
// Инициализируем объект будущей мухи. |
|
// Именно этот объект мы вернём как результат фабрики. |
|
var self = {}; |
|
|
|
// Создаём новый HTML элемент: изображение. |
|
var sprite = $('<img>'); |
|
// В качестве источника изображения указываем файл fly.png, |
|
// который лежит в одной папке с main.js (этим кодом). |
|
sprite.attr({ src: 'fly.png' }); |
|
// Устанавливаем режим абсолютного позиционирования |
|
// для нашего изображения. После этого мы сможем размещать |
|
// это изображение в произвольных координатах. |
|
sprite.css({ position: 'absolute' }); |
|
|
|
// Функция перемещения мухи. |
|
// В этой функции происходит подмена текущих координат мухи на новые. |
|
// Также, происходит обновление соответствующих свойств CSS. |
|
var move = function(newX, newY) { |
|
x = newX; |
|
y = newY; |
|
sprite.css({ left: newX, top: newY }); |
|
}; |
|
// Перемещаем муху в начальные координаты, переданные в фабрику. |
|
move(x, y); |
|
|
|
// Функция обработки одного шага (такта). |
|
// Эта функция вызывается с заданным ниже интервалом |
|
// и обновляет состояние некоторой создавамой в фабрике мухи. |
|
var step = function() { |
|
// Если координата X мухи находится вне экрана, |
|
// то меняем смещение мухи по X на противоположное. |
|
if (x < 0 || x > area.width) { |
|
speedX = -speedX; |
|
} |
|
// Если координата Y мухи находится вне экрана, |
|
// то меняем смещение мухи по Y на противоположное. |
|
if (y < 0 || y > area.height) { |
|
speedY = -speedY; |
|
} |
|
// Переносим муху из текущих координат в новые согласно смещению. |
|
move(x + speedX, y + speedY); |
|
}; |
|
|
|
// Флаг, указывающий, что муха находится в полёте. |
|
// Если его значение равно false, то муха должна стоять на месте. |
|
var flying = false; |
|
// Функция, заставляющая муху лететь. |
|
// В случае включенного флага flying эта функция |
|
// будет последовательно вызывать обработку шага step |
|
// и повторно запускаться через одну милисекунду. |
|
var fly = function() { |
|
// Функция работает до тех пор, пока |
|
// значение flying не станет false. |
|
if (flying) { |
|
step(); |
|
setTimeout(fly, 1); |
|
} |
|
}; |
|
|
|
// Функция запуска мухи в полёт. |
|
// В ней включается флаг flying и вызывается функция полёта. |
|
self.run = function() { |
|
flying = true; |
|
fly(); |
|
}; |
|
|
|
// Функция размещения изображения, связанного с мухой, |
|
// в некотором HTML элементе. |
|
self.placeOn = function(element) { |
|
element.append(sprite); |
|
}; |
|
|
|
// Возвращаем готовый объект мухи. |
|
return self; |
|
}; |
|
|
|
// Запускаем функцию, когда страница загрузилась |
|
// и с ней (страницей) можно начинать работать. |
|
jQuery(function($) { |
|
|
|
// Закладываем тело документа в переменную. |
|
var body = $('body'); |
|
|
|
// Запускаем логику по щелчку мышью (в любом месте документа). |
|
$(document).click(function(e) { |
|
// Создаём муху в координатах щелчка |
|
// (минус половина размера изображения мухи) |
|
// и сучайным образом задаём её ускорение по X и Y в диапазоне [-2; 2) |
|
var fly = makeFly( |
|
e.pageX - 32, |
|
e.pageY - 32, |
|
4 * Math.random() - 2, |
|
4 * Math.random() - 2 |
|
); |
|
// Размещаем муху на теле. |
|
fly.placeOn(body); |
|
// Запускам полёт мухи. |
|
fly.run(); |
|
}); |
|
|
|
}); |
