Снегопад

Верша свой круг, назначенный от века,

Роняет Небо наземь хлопья снега...

Мария Семенова

После жаркого-жаркого лета (или не жаркого, как в этом году в Москве) и дождливой осени снежная зима приносит с собой предпраздничное настроение — близится Новый год, когда родные и близкие собираются за одним столом теплой компанией и радуют друг друга застольными беседами. Вот и мы порадуем на этот раз снежным настроением наши сайты.

Начинаем с создания объекта — снежинки. Общий принцип выберем такой — объект конструирует полностью готовую снежинку, а пользователь может уже созданный экземпляр полностью настраивать под себя.

Определим основные параметры:

speed — количество миллисекунд между двумя движениями снежинки;
deltaX — максимальное отклонение по оси X снежинки от предыдущего в пикселях;
deltaY — расстояние смещения снежинки между двумя движениями в пикселях;
imgSrc — путь к картинке, изображающей снежинку.

Сами по себе снежинки летать не будут — их надо поместить в контейнер. В качестве контейнера для снежинки будем использовать объект DIV. В дальнейшем, задавая параметры этого контейнера, можно настраивать внешний вид снежинки.

Вы помните, что в разных браузерах (а если не повезло, то и в разных версиях одного и того же браузера) один и тот же код может работать по-разному? В частности, по-разному задаются координаты контейнера. Для определения способа нам хватит названия браузера. Чтобы его выяснить, обратимся к свойству navigator.appName — в нем содержится точное название браузера, в котором открыта страница, чем мы и воспользуемся. Будем считать, что если в строке присутствует название Internet Explorer, то так оно и есть, а во всех остальных случаях мы будем рассчитывать на FireFox. В Opera, к счастью, все тоже работает.

Выбрав браузер, мы определяем функцию позиционирования снежинки setPositionXY();

Полный текст вы можете увидеть во фрагменте кода «Проверка браузера».

Проверка браузера

            this.browser.scrollTop = function () { return (document.body.scrollTop); }
             this.browser.scrollLeft = function () { return (document.body.scrollLeft); }
             this.browser.min_x=1;
             this.browser.min_y=1;
             if(navigator.appName.indexOf("Internet Explorer")!=-1) {
                   this.browser.max_x=document.body.clientWidth;
                   this.browser.max_y=document.body.clientHeight;
                   // позиционирование для IE
                   this.setPositionXY = function (x,y) {
                         var x=x||this.x;
                         var y=y||this.y;
                         this.div.style.pixelLeft=x;
                         this.div.style.pixelTop=y;
                   }
             } else {
                   this.browser.max_x=self.innerWidth;
                   this.browser.max_y=self.innerHeight;
                    // позиционирование для FireFox
                   this.setPositionXY = function (x,y) {
                         var x=x||this.x;
                         var y=y||this.y;
                         this.div.style.left=x+'px';
                         this.div.style.top=y+'px';
                   }
             }

В отдельный метод calc() выделим все вычисления новых координат снежинки. В принципе, формулу для траектории снежинки можно взять любую — мы за основу выбрали синусоидальную (фрагмент кода «Новые координаты»).

Новые координаты

      // вычисляем новое положение
       this.calc = function (x,y,dx,dy) {
             var dx=dx||this.deltaX;
             var dy=dy||this.deltaY;
              // вычисление новой координаты
             x=x+dx*Math.sin(this.browser.max_y-this.browser.min_y-this.start_y);
             y=y+dy;
              // проверка по диапазону
             if (x>this.browser.max_x) x=this.browser.min_x;
             if (x<this.browser.min_x) x=this.browser.max_x;
              if (y<this.browser.min_y) y=this.browser.max_y;
             if (y>this.browser.max_y) y=this.browser.min_y;
              return({'x':x,'y':y});
       }

Зная координаты, мы можем переместить контейнер со снежинкой на новое место — с помощью метода move().

Перемещение

      // перемещаем снежинку
       this.move = function () {
             var new_pos=[];
              // уточним текущее положение снежинки и очистим его от скроллинга
             var x=Math.floor(this.x — this.browser.scrollLeft());
             var y=Math.floor(this.y — this.browser.scrollTop());
              // вычислим новое положение снежинки
             new_pos=this.calc(x,y);
              // вернём смещение
             this.x=new_pos['x']+this.browser.scrollLeft();
             this.y=new_pos['y']+this.browser.scrollTop();
              this.setPositionXY(this.x,this.y);
             if (!this.div.width) {this.div.width=this.div.offsetWidth;this.browser.max_x-=this.div.width;this.browser.min_x+=this.div.width;}
             if (!this.div.height) {this.div.height=this.div.offsetHeight;this.browser.max_y-=this.div.height;this.browser.min_y+=this.div.height;}
       }

Это факт: на самом деле наш снегопад — частный случай партикловых систем, применяющихся в играх для создания дымов, взрывов и подобных эффектов. О партиклах в нашем журнале уже писал Ричард Псмит в №10 за 2005 год.

Но нам нужно будет переместить снежинку не один раз. JavaScript позволяет вызывать определенное действие (функцию) по истечении заданного промежутка времени — с помощью стандартного метода setTimeout объекта window.

Мы создадим еще один метод, который перемещает снежинку и затем вызывает сам себя через время, заданное в параметре this.speed. Время у нас измеряется в миллисекундах.

Шаг снежинки

      this.step = function () {
             this.move();
             window.setTimeout(this.handler+".step()",this.speed);
       }

Итак, устанавливаем снежинку на старт и добавляем подготовленный контейнер к документу. Затем плодим и размножаем снежинки, то есть получаем экземпляры объекта snowflake и кладем их в один большой массив.

Снежинки у нас будут разные:

большие — случайным образом выбранные картинки: и
помельче,
и наконец, просто символ *.

Скорость передвижения и интервал между перемещениями будем выбирать случайно.

Этот фрагмент кода — в листинге «Снегопад начинается».

Снегопад начинается

var snowflakes = [];
 for (var i=0; i< 5; i++) {
       snowflakes[i]=new snowflake();
       snowflakes[i].imgSrc=(['snow1.gif','snow.gif'])[Math.floor(Math.random()*2)];
       snowflakes[i].speed=([60,90,120])[Math.floor(Math.random()*3)];
       snowflakes[i].draw();
       snowflakes[i].start();
 }
 for (var i=5; i< 15; i++) {
       snowflakes[i]=new snowflake();
       snowflakes[i].imgSrc='snow2.gif';
       snowflakes[i].speed=([20,40])[Math.floor(Math.random()*2)];
       snowflakes[i].draw();
       snowflakes[i].start();
 }
 for (var i=15; i< 30; i++) {
       snowflakes[i]=new snowflake();
       snowflakes[i].speed=([20,50,90])[Math.floor(Math.random()*3)];
       snowflakes[i].draw = function () {
             this.div.innerHTML="*";
             this.div.style.color=(["#9DFFCD","#FFB99D","#F7FF9D"])[Math.ceil(Math.random()*3-1)];;
             this.div.style.fontSize=([30,50,90])[Math.ceil(Math.random()*3-1)];
 }
 snowflakes[i].draw();
 snowflakes[i].start();

Вот, собственно говоря, и все. Построенный объект snowflake легко настраивается именно благодаря своим открытым методам и отделением оформления от вычислений. Так что каждый читатель при желании сможет переделать этот снегопад к 14 февраля — дню Святого Валентина — в сердечки, летящие вверх.

Полностью код страницы и картинки к этой статье вы найдете на нашем диске. А пока — с Новым годом!

СОЗДАЁМ САЙТ — ПАНЕЛЬ ИНСТРУМЕНТОВ

Снегопад