Графическая библиотека к онлайн просмотру.

2 Июня, 2012 Dunadan KSMПросмотров: 5947

Эта статья является продолжением статьи "Footter и NodeJS - шаг к онлайн просмотру". В ней рассмотрим как использованием jquery заставить двигаться объекты в нужном направлении, при этом поворачиваясь в сторону движения.

Приступим. Для начала создадим объект,который будет содержать характеристики и направления движения, он будет составлять множество объектов:
var Graph_Object function(id,namevisible_x_,y_,z_,angle_){
        this.ObjectId id// идентификатор объекта
        this.ObjectName name//имя (объекта, слоя), используется для управления
        this.visible visible_// видимость
        this.x_// координаты
        this.y_;
        this.z_;
        this.0
        this.angle angle_//угол поворота
        this.speed 0// скорость
        this.force 0// ускорение
        this.dest_x x_// координаты точки назначения
        this.dest_y y_;
        this.dest_z z_;
        this.dest_angle angle_// угол на который должны повернуться
        this.move =0
 
У этого объекта будет одна функция установки точки назначения:
Graph_Object.prototype.set_dest function(x_,y_,z_,speed_,force_){
    // установка координат назначения, скорости, ускорения
        this.dest_x x_;
        this.dest_y y_;
        this.dest_z z_;
        this.speed speed_;
        this.force force_;
    // писал как намного проще, определение угла движения, определяется через 2 известных точки
        dx =this.x-this.dest_x;
        dy this.y-this.dest_y;
        this.h0;
        if (dx==0)
        {
            if (dy>0this.dest_angle =0;
            if (dy<0this.dest_angle =180;
        }
        if (dy==0)
        {
            if (dx<0this.dest_angle =90;
            if (dx>0this.dest_angle =270;
        }
        if ((dy>0)&&(dx!=0)
            {
                if (dx<0this.dest_angle=Mod(Math.atan(dx /dy )*180/Math.PI);
                if (dx>0this.dest_angle=360-Math.atan(dx /dy )*180/Math.PI;
            }
            else
        if ((dy<0)&&(dx!=0))
        {
                if (dx<0this.dest_angle=180-Math.atan(dx /dy )*180/Math.PI;
                if (dx>0this.dest_angle=180+Mod(Math.atan(dx /dy )*180/Math.PI);
        


     }
[/pre] 
    Теперь нам необходимо написать класскоторый будет управлять этими объектами:

[pre class="sh_php"]
// класс массив объектов
function Graph_Objects(fps_){
    this.fps fps_// кол-во кадров отображаемых в сек, влияет на плавность движения
    this.objects []// массив объектов типа Graph_Object
     }

// Добавление объекта
    Graph_Objects.prototype.addObjectfunction (id,name,visible_x_,y_,z_,angle_{
        var object new Graph_Object(id,name,visible_x_,y_,z_,angle_);
        this.objects[idobject;
    }
// Установка видимости объекта
    Graph_Objects.prototype.VisibleObjectfunction (id,visible{
        this.objects[id].visible visible;
    }
// Удаление объекта
    Graph_Objects.prototype.delObjectfunction(id){
      if(this.objects[id=== undefinedreturn;
      delete this.objects[id];
    }
// Отрисовка объекта
    Graph_Objects.prototype.Paintfunction(){
        for(obj in this.objects)
            if (this.objects[obj].visible==1)
            {
                $('#'+this.objects[obj].ObjectName).show();
        ...
        тут перемещаем объектподымаем вверхповорачиваем на нужный угол
        ...

            }
            else
                $('#'+this.objects[obj].ObjectName).hide();
    }
// Установка точки назначения, и включаем флаг что надо двигаться
    Graph_Objects.prototype.SetDestination function(id,dx,dy,dz,speed_,force_){
        this.objects[id].set_dest(dx,dy,dz,speed_,force_);
        this.objects[id].move =1;
    }

// Движение объекта, тут в основном математические расчеты, насколько нужно сдвинуться за 1 fps 
// так же повернуться, я брал что поворот на 180 градусов происходит за 1сек
// расстояние что проходит за 1 fps, можно вычислить зная скорость, а она у нас известна
    Graph_Objects.prototype.Move function(){
        for(obj in this.objects)
            if (this.objects[obj].move==1)
        {
        ...
        // перемещение объекта за 1 fps, при достижении точки назначения, объект останавливается .move=0
        ...

        }
    }
// запуск анимации
    Graph_Objects.prototype.RunAnim function(func){
         setInterval(function({
            func.Move();
            func.Paint();
        }Math.round(1000/this.fps));
    } 
Как использовать эти объекты? Вот просто пример:
// создаем объект Graph_Objects с отображением 25 кадров в сек
graph new Graph_Objects(25);
// добавляем объекты, где item_х ид объекта или слоя
graph.addObject(0,'item_0',1199,130,0,0);
graph.addObject('343','item2',1200,100,0,0);
graph.addObject('342','item4',1200,200,0,164);
// для объекта 343 задаем точку назначения
graph.SetDestination('343',0000,60,40,0);    
// запуск анимации
graph.RunAnim(graph); 
Далее в какой то фукции по определенному действию можно менять точку назначения объекта и он будет бегать.
На этом закончим краткий обзор графической состовляющей, да опустил математические расчеты, но там чистая математика.

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru rutvit.ru myspace.com technorati.com digg.com friendfeed.com pikabu.ru blogger.com liveinternet.ru livejournal.ru memori.ru google.com bobrdobr.ru mister-wong.ru yahoo.com yandex.ru del.icio.us

В рубрике: Программирование » Свои разработки » Футбольные менеджеры » Разработка » Web

Теги:

Вы можете следить за комментариями к этой записи поRSS

Оставьте комментарий

аноним

совет Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

комментатор / стать им

как?Укажите свой действующий email и пароль. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные включая адрес сайта, ник, описание, контакты и т.д.

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)