Графическая библиотека к онлайн просмотру.
2 Июня, 2012Просмотров: 5980
Эта статья является продолжением статьи "Footter и NodeJS - шаг к онлайн просмотру". В ней рассмотрим как использованием jquery заставить двигаться объекты в нужном направлении, при этом поворачиваясь в сторону движения.
Приступим. Для начала создадим объект,который будет содержать характеристики и направления движения, он будет составлять множество объектов:
var Graph_Object = function(id,name, visible_, x_,y_,z_,angle_){
this.ObjectId = id; // идентификатор объекта
this.ObjectName = name; //имя (объекта, слоя), используется для управления
this.visible = visible_; // видимость
this.x = x_; // координаты
this.y = y_;
this.z = z_;
this.h = 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;
}
this.ObjectId = id; // идентификатор объекта
this.ObjectName = name; //имя (объекта, слоя), используется для управления
this.visible = visible_; // видимость
this.x = x_; // координаты
this.y = y_;
this.z = z_;
this.h = 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;
}
У этого объекта будет одна функция установки точки назначения:
// установка координат назначения, скорости, ускорения
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.h= 0;
if (dx==0)
{
if (dy>0) this.dest_angle =0;
if (dy<0) this.dest_angle =180;
}
if (dy==0)
{
if (dx<0) this.dest_angle =90;
if (dx>0) this.dest_angle =270;
}
if ((dy>0)&&(dx!=0))
{
if (dx<0) this.dest_angle=Mod(Math.atan(dx /dy )*180/Math.PI);
if (dx>0) this.dest_angle=360-Math.atan(dx /dy )*180/Math.PI;
}
else
if ((dy<0)&&(dx!=0))
{
if (dx<0) this.dest_angle=180-Math.atan(dx /dy )*180/Math.PI;
if (dx>0) this.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.addObject= function (id,name,visible_, x_,y_,z_,angle_) {
var object = new Graph_Object(id,name,visible_, x_,y_,z_,angle_);
this.objects[id] = object;
}
// Установка видимости объекта
Graph_Objects.prototype.VisibleObject= function (id,visible) {
this.objects[id].visible = visible;
}
// Удаление объекта
Graph_Objects.prototype.delObject= function(id){
if(this.objects[id] === undefined) return;
delete this.objects[id];
}
// Отрисовка объекта
Graph_Objects.prototype.Paint= function(){
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',1, 199,130,0,0);
graph.addObject('343','item2',1, 200,100,0,0);
graph.addObject('342','item4',1, 200,200,0,164);
// для объекта 343 задаем точку назначения
graph.SetDestination('343',00, 00,60,40,0);
// запуск анимации
graph.RunAnim(graph);
graph = new Graph_Objects(25);
// добавляем объекты, где item_х ид объекта или слоя
graph.addObject(0,'item_0',1, 199,130,0,0);
graph.addObject('343','item2',1, 200,100,0,0);
graph.addObject('342','item4',1, 200,200,0,164);
// для объекта 343 задаем точку назначения
graph.SetDestination('343',00, 00,60,40,0);
// запуск анимации
graph.RunAnim(graph);
Далее в какой то фукции по определенному действию можно менять точку назначения объекта и он будет бегать.
На этом закончим краткий обзор графической состовляющей, да опустил математические расчеты, но там чистая математика.
В рубрике: Программирование » Свои разработки » Футбольные менеджеры » Разработка » Web
Теги: библиотека графическая онлайн разработка
Вы можете следить за комментариями к этой записи поRSSРеклама
Здесь может быть ваша реклама
Заработок в Интернет
Описание freebitco
Описание FREEDOGECOIN
Описание Игры
Друзья
KarpOlya - заметки учителя биологии и химии
Онлайн футбольный менеджер
Оставьте комментарий