Математика и физика Flash

this.onEnterFrame = function() {
    var theta = 0;
    theta++;
  };

this.onEnterFrame = function() {
    var theta = 0;
    theta++;
    var rad = theta*(Math.PI/180);
  };

this.onEnterFrame = function() {
    var theta = 0;
    theta++;
    var rad = theta*(Math.PI/180);
    movieClip1_mc._x = (Math.cos(rad)*100) +275;
  };

this.onEnterFrame = function() {
    var theta = 0;
    theta++;
    var rad = theta*Math.PI/180;
    movieClip1_mc._x = Math.cos(rad)*100+275;
    movieClip1_mc._y = Math.sin(rad)*100+200;
  };

this.onEnterFrame = function() {
    var theta = 0;
    theta++;
    var rad = theta*Math.PI/180;
    movieClip1_mc._x = Math.cos(rad)*100+275;
    movieClip1_mc._y = Math.sin (rad)*100+200;
    clear();
    linestyle(1, 0, 100);
    moveTo(275, 200);
    lineTo (movieClip1_mc._x, movieClip1_mc ._y) ;
    lineTo(movieClip1_mc._x, 200);
    lineTo(275, 200);
  };

this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
  };

this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_rnc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx);
  };

this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx);
    movieClip1_mc._rotation = angle*180/Math.PI;
  };

this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx);
    movieClip1_mc._rotation = angle*180/Math.PI;
    movieClip1_mc._x += (_root._xmouse-movieClip1_mc._x)/10;
    movieClip1_mc._y += (_root._ymouse-movieClip1_mc._y)/10;
  };

this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx) ;
    movieClip1_mc._rotation = angle*180/Math.PI;
    movieClip1_mc._x += (_root._xmouse-movieClip1_mc._x)/10;
    movieClip1_mc._y += (_root._ymouse-movieClip1_mc._y)/10;
  };

var speed = 5;
  this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx);
    movieClip1_mc._rotation = angle*180/Math.PI;
    var velX = Math.cos(angle)*speed;
    var velY = Math.sin(angle)*speed;
    movieClip1_mc._x += velX;
    movieClip1_mc._y += velY;
  };

Обратите внимание на то, что я также объявил переменную speed для использования в вычислениях. Всегда предпочтительно сначала объявлять переменную, а затем использовать ее в вычислениях, в отличие от реализации кодом отдельного значения. Если вам нужно будет впоследствии изменить значение speed, вам не придется искать его среди различных выражений и функций.

Однако вы могли заметить, что фильм, достигнув указателя мыши, перемещается на несколько пикселей за него и после этого поворачивается на 180 градусов в противоположную сторону и снова начинает движение. Это происходит постоянно, поэтому стрелка указывает то в одну, то в другую сторону. Этот недостаток можно устранить с помощью обнаружения коллизий на основе расстояний. (Видите, весь пройденный материал начинает взаимодействовать!) Нам нужно просто вычислить среднее расстояние между фильмом и указателем мыши. Если оно окажется меньшим, чем определенное расстояние, движение прекратится. Это расстояние численно будет таким же, как и средняя скорость.

var speed = 5;
  this.onEnterFrame = function() {
    var dx = this._xmouse-movieClip1_mc._x;
    var dy = this._ymouse-movieClip1_mc._y;
    var angle = Math.atan2(dy, dx);
    movieClip1_mc._rotation = angle*180/Math.PI;
    var dist = Math.sqrt(dx*dx+dy*dy);
    if (dist>speed) {
      velX = Math.cos(angle)*speed;
      velY = Math.sin(angle)*speed;
      movieClip1_mc._x += velX;
      movieClip1_mc._y += velY;
    }
  };

Если вы хотите, чтобы по достижении фильмом цели что-нибудь происходило, например, взрыв корабля или нечто подобное, вы можете вставить дополнительный код в блок else после блока кода if. (Вам также может понадобиться настроить фильм так, чтобы точка регистрации была на конце стрелки. Помните, что положение фильма определяется только его точкой регистрации. Если она находится в середине стрелки, то проверка на коллизию будет осуществляться именно по этой точке.)

var accel = .05;
  var velX = 0;
  movieClip1_mc.onEnterFrame = function() {
    this._x += velX;
    velX += accel;
  };

Этот код довольно прост, но полезен. Мы постоянно обновляем переменную velX (и, следовательно, позицию _x movieClip1 ) значением переменной ускорения accel. По мере выполнения кода в каждом кадре скорость по направлению увеличивается, и наш объект ускоряется при движении слева направо.

Только что я упомянул термин увеличивающаяся скорость. Вот как мы обычно себе это представляем. Акселератор вашего автомобиля предназначен для того, чтобы автомобиль ехал быстрее, ведь так? Но нам следует быть более точными и сказать, что ускорение на самом деле изменяет скорость. Можно выразиться еще точнее и сказать, что ускорение изменяет скорость по направлению, так как ускорение всегда имеет свое направление. В этом мы сейчас разберемся.

Если направление ускорения совпадает с текущей скоростью, эта скорость будет увеличиваться.

Если ускорение направлено в противоположную сторону относительно скорости по направлению, оно уменьшит эту скорость. Если вы, двигаясь со скоростью 50 км/ч, включите задний ход и нажмете педаль газа, я гарантирую вам, что ваша скорость очень быстро уменьшится. Если двигатель и трансмиссия вашего автомобиля уцелеют, ваша скорость в итоге станет нулевой и затем отрицательной - вы поедете в обратную сторону. Безусловно, обычный автомобиль не предназначен для таких "трюков", поэтому если вы представите себе астронавта, который использует реактивные двигатели для управления движением корабля, вы сможете быстрее разобраться в физике происходящего.

Каждая сила, которая изменяет позицию объекта, может быть интерпретирована как некое ускорение данного объекта. Двигатель автомобиля, ускоритель ракеты, гравитация, магнетизм, ветер - все это ускоряет объект в определенном направлении. Давайте рассмотрим одну из этих сил и применим ее во Flash. Мы будем моделировать эффект гравитации для фильма. Сначала выполним небольшое упражнение, чтобы уяснить принципы, на которых базируется эффект, а затем перейдем к более основательному проекту, в котором применим знания, полученные при создании игры Asteroids.

На данный момент вы можете "зацеплять" шарик мышью и "бросать" его в любое место экрана. Скорость шарика по направлению постепенно уменьшается со временем. Теперь мы добавим сюда еще одну функциональность, которая будет симулировать гравитацию для шарика. На шарик будут действовать две силы, оказывая влияние на его движение: трение и гравитация.

function move() {
  if   (!this.dragging) {
    this.velY += grav;
    this.velX*= friction;
    this.velY*= friction;
    this._x += this.velX;
    this._y += this.velY;

grav = 1;

Здесь velY изначально равна 0, так как не имеет определения (Flash довольно милостив в этом отношении, так как многие другие языки восприняли бы это как ошибку), но затем к velY прибавляется 1, так как grav = 1. Итак, в начале фильма шарик начинает движение по направлению к низу экрана со скоростью 1. В каждом кадре значение velY увеличивается на 1, поэтому шарик ускоряется до тех пор, пока не окажется внизу экрана, отскакивает и затем меняет направление движения. Красиво, не так ли? Шарик начинает движение вверх, так как его скорость по направлению Y поменяла направление (стала отрицательной).

Предположим, что в точке отскока шарик двигается со скоростью 20 пикселей в секунду в нижнем направлении. Он отскакивает, и значением velY становится -20, однако grav все еще прибавляет 1 к velY в каждом кадре. Таким образом, velY примет значения -19, -18, -17 и т.д. до тех пор, пока не обратится в ноль. grav все еще добавляет 1 (это происходит постоянно), поэтому шарик опять начнет движение вниз. Здесь происходит то же самое, что и при подбрасывании вверх реального предмета.

Теперь в нашем багаже достаточно знаний. Совместим изученное в проекте Flash с движущимися объектами. Мы создадим старую школьную игру Atari Asteroids 1979 года.

Я также создал второй кадр в этом фильме, изображающий пламя из сопел корабля. Он будет использоваться для визуального обозначения того, что у корабля работают двигатели. Убедитесь в том, что в обоих кадрах есть действие stop, чтобы фильм не начал их проигрывание вперед и назад.

init();
  function init() {
    // set constants for stage borders
    if (!stagelsSet) {
      LEFT = 0;
      TOP = 0;
      BOTTOM = Stage.height;
      RIGHT = Stage.width;
      stageIsSet = true;
    }
    // how many ships do we start with?
    livesLeft = 5;
    //  set how many asteroids to begin with
    maxAst = 3;
    ast_array = new Array() ;
    //  asteroids  and shots will be in their own mc's 
      to prevent depth conflicts
    createEmptyMovieClip("astField_mc", 0) ;
    createEmptyMovieClip("shots_mc", 1);
    //  create asteroids and ship
    astInit();
    shipInit();
    stop();
  }

В данном коде достаточно много комментариев, однако мы все равно его разберем. Сначала устанавливаем константы для размера рабочего места (RIGHT, LEFT, TOP, BOTTOM). После этого устанавливаем переменную stageIsSet на значение true, что предотвратит повторный запуск кода при перезапуске игры.

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

Следующие две строки являются альтернативным способом решения проблем дубликатной глубины, с которыми мы сталкивались ранее. Здесь мы будем держать все астероиды внутри одного фильма, а все снаряды - в другом фильме. Так как несущие фильмы сами по себе находятся на разных глубинах (0 и 1), глубины астероидов не будут пересекаться с глубинами снарядов и наоборот. Мы просто проверяем, что при добавлении фильмов со снарядами или астероидами они помещаются в соответствующий несущий фильм.

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

Наконец, останавливаем фильм на данном кадре.

function astInit( ) {
    //  create a number of asteroids
    astIndex = 0;
    while (astIndex<maxAst) {
      createAst();
    }
  }

Все, что в ней реализуется - это цикл от нуля до количества созданных астероидов, а также повторное выполнение функции createAst, что создает один астероид. Рассмотрим данную функцию.

function createAst() {
    // put one asteroid on stage and initialize 
       its properties and methods
    ast_mc = astField_mc.attachMovie("asteroid", 
       "ast"+astIndex, astIndex++) ;
    ast_mc._rotation = Math.random()*360;
    ast_mc.velX = Math.random()*6-3;
    ast_mc.velY = Math.random()*6-3;
    ast_mc.onEnterFrame = astMove;
    // push this asteroid onto the asteroid array
    ast_array.push(ast_mc);
    // return a reference to this asteroid
    return ast_mc;
  }

Здесь инстанс астероида добавляется в фильм astField_mc. (Помните, все они должны оставаться в этом фильме для предотвращения проблем с глубинами.) С помощью временной переменной ast_mc мы вращаем его случайным образом, присваиваем ему скорость по направлению и управляющий элемент onEnterFrame и помещаем в массив ast_array. Полезно хранить ссылки на все астероиды в массиве, чтобы можно было обрабатывать массив циклом для проверки на попадание.

Наконец, возвращаем ссылку на вновь созданный астероид. Несмотря на то, что мы проигнорировали ее в функции astInit, она пригодится в дальнейшем.

function shipInit() {
    //  put a ship on stage and initialize 
        its properties and methods
    attachMovie("ship", "ship_mc", 2);
    ship_mc._x = RIGHT/2;
    ship_mc._y = BOTTOM/2;
    ship_mc.velX = 0;
    ship_mc.velY = 0;
    ship_mc.onKeyDown = control;
    ship_mc.onKeyUp = decontrol;
    ship_mc.onEnterFrame = move;
    Key.addListener(ship_mc);
    rotate = 0;
    thrust = 0;
  }

Она добавляет инстанс фильма корабля, присваивая ему имя ship_mc. После этого он позиционируется, присваивается его скорость и несколько функций поддержки событий, фильм становится приемником событий Key, а также устанавливаются на 0 две другие переменные - rotate и thrust - для обеспечения неподвижности корабля при его появлении.

Теперь рассмотрим функции, присвоенные нами управляющим элементам onKeyDown и onKeyUp - control и decontrol.

function control() {
    //  check which key was pressed and 
        control ship accordingly
    switch (Key.getCode()) {
    case  Key.LEFT :
      rotate  = -1;
      break;
    case Key.RIGHT :
      rotate = 1;
      break;
    case Key.UP :
      thrust = .3;
      ship_mc.gotoAndStop(2);
      break;
    case Key.SPACE :
      shoot();
      break;
    }
  }

Она представляет собой просто выражение switch. Если нажаты клавиши LEFT или RIGHT, она устанавливает переменную rotate на значения -1 или +1.

При нажатой клавише UP переменная thrust устанавливается на значение .3 (При желании вы можете изменить это значение. Я пришел к нему методом проб и ошибок - оно обеспечивает хорошую динамику корабля). Здесь мы также отправляем корабль в кадр 2 и отображаем выпускаемые им ракеты. Далее мы увидим, как переменные rotate и thrust используются для управления движением корабля.

Наконец, если нажата клавиша SPACE, выполняем функцию shoot.

Все довольно просто.

function decontrol() {
    // no key is pressed, so no thrust or rotation
    rotate = 0;
    thrust = 0;
    ship_mc.gotoAndStop(1); }

function move() {
    // rotate  ship
    if (rotate) {
      this._rotation  +=  rotate*5;
    }
    // move ship
    if (thrust)  {
      // convert rotation to radians
      rad = this._rotation*Math.PI/180;
      // get x and у components of thrust
      this.thrustX = Math.cos(rad)*thrust;
      this.thrustY = Math.sin(rad)*thrust;
      // add thrust to velocity
      this.velX += this.thrustX;
      this.velY += this.thrustY;
    }
    // add velocity to position
    this._x += this.velX;
    this._y += this.velY;
    // perform screen wrapping if (this._x>RIGHT) { this._x = LEFT;
    if  (this._x<LEFT)  {
      this._x  =   RIGHT;
    }
    if   (this._y>BOTTOM)  {
      this._y  =   TOP;
    }
    if   (this._y<TOP)  {
      this._y =  BOTTOM;
    }
  }
    Да, мы используем одну секцию за раз.
  //  rotate  ship
  if  (rotate)   {
    this._rotation  +=  rotate* 5;
  }

Довольно просто. Берем переменную поворота, которая может иметь значения -1 или +1 в зависимости от того, какая клавиша была нажата, или 0, если клавиша не была нажата. Умножаем ее на 5, чтобы ее значениями стали -5, 0 или +5? и добавляем результат к повороту корабля. 5 - просто число, хорошо подходящее по результатам тестирования. Вы можете настраивать это значение по вашему вкусу. В идеале нужно было бы записывать его в другую константу и определять его в функции init, например, ROTATESPEED = 5. Я просто выделил это здесь, чтобы сохранять функцию init как можно более простой.

Далее следует самая сложная часть функции move.

// move ship
  if (thrust) {
    // convert rotation to radians
    rad = this._rotation*Math.PI/180;
    // get x and у components of thrust
    this.thrustX = Math.cos(rad)*thrust;
    this.thrustY = Math.sin(rad)*thrust;
    // add thrust to velocity
    this.velX += this.thrustX;
    this.velY += this.thrustY;
  }

Если thrust равна 0 (нажата клавиша UP), этот фрагмент будет полностью пропущен. Если переменная имеет какое-то значение, этот код выполняется. Сначала выполняется преобразование поворота корабля (в градусах) в радианы. Затем берется значение thrust, которое соответствует углу наклона корабля, и раскладывается на компоненты X и Y - thrustX и thrustY - с использованием основ тригонометрии, изученных ранее в данной лекции. Рисунок показывает, какие действия выполняются.

После этого мы просто прибавляем значения ускорения к скоростям по направлению осей X и Y. Это дает новую скорость, с которой корабль будет двигаться после применения ускорения в этом направлении. Имейте в виду, что на рисунке выше, если бы корабль двигался в обратную сторону, и вы применили ускорение, оно было бы направлено в обратную сторону от направления движения корабля, поэтому корабль замедлил бы ход, остановился и начал движение в противоположном направлении - в точности, как мы хотели.

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

//  add velocity to position
  this._x +=  this.velX;
  this._y +=  this.velY;
  //  perform  screen wrapping
  if   (this._x>RIGHT)  {
  this._x  =   LEFT;
  }
  if   (this._x<LEFT)  {
    this._x  =  RIGHT;
  }
  if  (this._y>BOTTOM)  {
    this._y =  TOP;
  }
  if   (this._y<TOP)  {
    this._y  =  BOTTOM;
  }
}

Настал волнующий момент. Сейчас вы запустите фильм, в котором реализованы все функциональности корабля. (В одном из углов будут находиться ненужные астероиды - не обращайте сейчас на них внимание!) Вы можете использовать три клавиши со стрелками для вращения и ускорения корабля на экране. Это очень похоже на оригинальную игру Asteroids, однако вы можете любым нужным вам образом настраивать переменные поворота и ускорения, чтобы достичь желаемого результата.

function astMove ()  {
    //  add velocity to position
    this._x +=  this.velX;
    this._y +=  this.velY;
    // perform screen wrapping
    if   (this._x>RIGHT)  {
      this._x  =   LEFT;
    }   else  if   (this._x<LEFT)   {
      this._x  =  RIGHT;
    }   else  if   (this._y>BOTTOM)  {
      this._y =  TOP;
    }   else  if   (this._y<TOP)   {
      this._y  =  BOTTOM;
    }
    //  check hitTest against ship_mc
    if   (this.hitTest(ship_mc._x, ship_mc._y, true))  {
      //   if ship is not already dead, destroy it
      if   (!shipDead)  {
        destroyShip();
        shipDead =  true;
      }
    }
  }

Первая часть функции не требует объяснения. Здесь просто складываются скорость по направлению и позиция и затем осуществляется перенос. После этого следует проверка на столкновение астероида с кораблем.

//  check hitTest against ship_mc
  if   (this.hitTest(ship_mc._x, ship_mc._y, true))  {
    //   if ship is not  already dead, destroy  it
    if   (!shipDead)   {
      destroyShip();
      shipDead =  true;
    }
  }

Этот фрагмент реализует hitTest для фильма с использованием shapeFlag=true. Как вы помните, этот метод имеет один недостаток - он будет проверять только точку _x, _y корабля, которая является центральной точкой. Поэтому нос или хвост корабля будут проходить сквозь астероид, и столкновения при этом происходить не будет. Мы могли бы использовать shapeFlag=false и осуществлять проверку по граничному прямоугольнику. Однако вследствие этого корабль время от времени уничтожался бы без столкновения с астероидом. Из двух вариантов второй раздражал бы игроков гораздо больше, чем первый. Мы не можем использовать обнаружение коллизий по расстоянию, так как фильмы имеют неправильную форму, отличную от идеального круга или квадрата. Здесь возникла бы та же самая проблема. Вы можете попытаться найти более разумное решение этой проблемы, однако, как показывает практика, это сильно усложняет программу. Поэтому, в случае с нашим примером, позволим себе не доводить его до идеального состояния.

Если происходит столкновение, выполняется функция destroyShip, которая, помимо всего прочего, удаляет корабль с рабочего места. Я выяснил, однако, при разработке этой программы, что даже после того, как корабль удален, координаты, отправленные в hitTest, в течение нескольких кадров будут продолжать вызывать столкновение. Поэтому я установил переменную shipDead на значение true при первом попадании и запустил эту переменную в качестве предпосылки запуска функции destroyShip. Это обеспечило выполнение данной функции только один раз для каждой коллизии.

function destroyShip()  {
    //  remove ship
    removeMovieClip(ship_mc);
    //  update how many lives are left
    livesLeft--;
    //  if none, end game.
    if   (livesLeft<1)   {
      gotoAndStop(2);
    }   else   {
      //  tell it to come back in two seconds
      restoreID = setInterval(restoreShip, 2000);
    }
  }

Эта функция удаляет фильм с кораблем с рабочего места и уменьшает переменную livesLeft.

Если livesLeft равна нулю, переходим в кадр 2 фильма и остаемся в нем. Я добавил в кадр 2 текст "Game Over" и кнопку перезапуска, которая возвращает фильм обратно в кадр 1.

В противном случае у нас остался еще как минимум один корабль. Мы используем setInterval для того, чтобы программа сделала паузу длиной в две секунды (это 2000 миллисекунд в переводе на время Flash), и затем выполняем функцию restoreShip. Имейте в виду, что здесь мы сохраняем ID интервала в переменной restoreID. Мы хотим, чтобы restoreShip выполнялась только один раз после столкновения, поэтому нам необходимо удалять интервал после его действия.

function restoreShip() {
    // reincarnate ship
    shiplnit();
    shipDead = false;
    //  make sure this function doesn't run again
    clearInterval(restoreID);
  }

Можно запустить игру. Астероиды теперь будут полнофункциональными объектами, так же, как и ваш корабль. Вы можете попытаться избегать их, или, если вы садист, врезайтесь в астероиды и уничтожайте корабли! Ну, конечно, в целях тестирования:

Теперь астероиды могут безжалостно врезаться в ваши корабли. Настало время мести.

function shoot()  {
    //   if we have any ammo left...
    if   (numShots<5)  {
      numShots++;
      //  create one shot and make it move
      shot_mc  =   shots_mc.attachMovie("shot", 
         "s"+shotIndex, shotIndex++);
      shot_mc.onEnterFrame = shotMove;
      //  convert ship's rotation to radians
      rad =  ship_mc._rotation*Math.PI/180;
      // position shot at ship's nose
      shot_mc._x = ship_mc._x+10*Math.cos(rad);
      shot_mc._y = ship_mc._y+10 *Math.s in(rad);
      // determine shot's velocity, adding it to ship's velicity
      shot_mc.velX = 5 *Math.cos(rad)+ship_mc.velX;
      shot_mc.velY = 5*Math.sin(rad)+ship_mc.velY;
    }
  }

Еще один кусок кода. Давайте опять разобьем его на части.

function shoot()  {
    //   if we have any ammo left...
    if   (numShots<5)  {
      numShots++;
      //   create one shot and make it move
      shot_mc = shots_mc.attachMovie("shot", 
        "s"+shotIndex, shotIndex++);
      shot_mc.onEnterFrame  =  shotMove;

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

Мой корабль имеет 20 пикселей в ширину, а также центральную точку регистрации. Это означает, что от носа до центра 10 пикселей. При повороте корабля это расстояние также рано 10 пикселям, но, как видно из правого рисунка, мы имеем очень знакомый нам треугольник. Имея угол поворота и расстояние в 10 пикселей, мы можем выяснить значения x и y, как показано на рисунке.

x = cos(angle) * distance
  y = sin(angle) * distance

Если прибавим их к значениям позиций _x и _y, то получим точную позицию для выстрела. Вот соответствующий ActionScript.

//  convert ship's rotation to radians
  rad =  ship_mc._rotation*Math.PI/180;
  //  position shot at ship's nose
  shot_mc._x = ship_mc._x + (10 * Math.cos(rad));
  shot_mc._y = ship_mc._y + (10 * Math.sin (rad));

Теперь мы сделаем почти в точности то же самое для определения скорости выстрела по направлению. Я пришел к тому, что 5 - оптимальная скорость выстрела. Снаряд вылетит из корабля под таким же углом, какой имеет в данный момент корабль. Поэтому его скорости по направлению X и Y могут быть разложены следующим образом.

x velocity = cos(angle) *velocity
  y velocity = sin(angle) *velocity

Другим небольшим внесенным мной дополнением было сложение текущей скорости по направлению корабля со скоростью снаряда, которую мы только что нашли. Если вы едете в автомобиле со скоростью 50 км/ч и бросаете из окна мяч со скоростью 10 км/ч в направлении движения автомобиля, то скорость мяча относительно земли будет равна 60 км/ч (здесь мы затрагиваем теорию относительности Эйнштейна, т.е. ее версию, представленную во Flash).

//  determine shot's velocity, adding it to ship's velicity
  shot_mc.velX  =  5 * Math.cos(rad) + ship_mc.velX;
  shot_mc.velY  =  5 * Math.sin(rad) + ship_mc.velY;

Для начала разберем хотя бы это короткое движение.

function shotMove() {
    // add velocity to position
    this._x += this.velX;
    this._y += this.velY;
    // if shot is out of range, remove it
      if (this._x>RIGHT | | this._x<LEFT | | 
        this._y>BOTTOM | | this._y<TOP) {
      removeMovieClip(this);
      // update shot count
      if (numShots>0) {
      numShots--;
      }
    }
  }

Здесь мы будем реализовывать сложную задачу, которая будет заключаться в использовании скорости по направлению для обновления позиции. Это уже нам знакомо. Затем мы выясняем, "вылетел" ли снаряд за пределы рабочего места. Если это так, удаляем его. Помните, что мы используем переменную numShots для протоколирования числа активных снарядов. Поэтому каждый раз при удалении снаряда мы уменьшаем переменную numShots. Я также выяснил, что иногда numShots может принимать отрицательное значение, что закончится тем, что можно будет выпускать больше пяти снарядов, так как переменная была уменьшена. Следовательно, прежде, чем уменьшать значение переменной, необходимо убедиться в том, что ее значение не равно нулю.

Сейчас вы можете запустить фильм. Снаряды уже выпускаются. Однако вскоре вы заметите, что снаряды кончились, и уничтожать астероиды уже не так легко.

function shotMove()  {
    //  add veloicty to position
    this._x += this.velX;
    this._y += this.velY;
    //  if shot is out of range, remove it
    if (this._x>RIGHT | | this._x<LEFT | | 
       this._y>BOTTOM | | this._y<TOP)  {
      removeMovieClip(this);
      // update shot count if (numShots>0) {
        numShots--;
      }
    }
    // loop through asteroid array, checking for hit
    for (i=0; i<ast_array.length; i++) {
      if (ast_array[i].hitTest(this._x, this._y, true)) {
        // remove shot and update count removeMovieClip(this);
        if (numShots>0) {
          numShots--;
        }
        // remove asteroid from stage
        removeMovieClip(ast_array[i]);
        // and remove it from the array
        ast_array.splice(i, 1);
        // if this was the last one, create some new ones
        if (ast_array.length<1) {
          maxAst++;
          astInitID = setInterval(astInit, 2000);
        }
      }
    }
  }

Мы используем ast_array.length в качестве управляющего элемента цикла for, так как он будет содержать число астероидов в массиве. Мы проверяем параметры снаряда _x и _y с использованием shapeFlag=true.

При попадании мы удаляем снаряд аналогично тому, как описано выше. После этого удаляем фильм с астероидом с рабочего стола и используем ast_array.spice(i, 1) для удаления этого элемента из массива. Имейте в виду, что это также уменьшит на единицу ast_array.length, что позволит нам всегда обрабатывать циклом точное число имеющихся астероидов.

Наконец, если ast_array достигает нуля - все астероиды успешно уничтожены - мы увеличиваем значение maxAst и создаем новую группу астероидов с помощью astInit. Однако мы добавим небольшой двухсекундный интервал перед запуском этой функции с помощью setInterval. Нам также потребуется удалять этот интервал astInitID, поэтому переходим к astInit и добавляем в него строку clearInterval.

function astInit() {
    // create a number of asteroids
    astIndex = 0;
    while (astIndex<maxAst) {
      createAst();
    }
    clearInterval(astInitID);
  }

Теперь запустите проект и убедитесь, что все работает. Вы должны иметь возможность уничтожить три астероида, после чего должны появиться четыре астероида, а после их уничтожения появятся пять "камушков". Итак, атака отбита, и теперь корабль имеет большое преимущество над этими космическими скалами. Давайте сделаем астероиды более опасными.

фильмов.
  function shotMove() {
    // add veloicty to position
    this._x += this.velX;
    this._y += this.velY;
    // if shot is out of range, remove it
    if (this._x>RIGHT | | this._x<LEFT | | this._y>BOTTOM | |  this._y<TOP) {
      removeMovieClip(this);
      // update shot count
      if (numShots>0) {
        numShots--;
      }
    }
    // loop through asteroid array, checking for hit
    for (i=0; i<ast_array.length; i++) {
      if (ast_array[i].hitTest(this._x, this._y, true)) {
        // remove shot and update count
        removeMovieClip(this);
        if (numShots>0) {
          numShots--;
        }
        // if asteroid is big enough, break it in two
        if (ast_array[i]._xscale>25) {
          // make this asteroid 1/2 size
          ast_array[i]._xscale /= 2;
          ast_array[i]._yscale /= 2;
          // create a new asteroid, make it same size, same position
          ast_mc = createAst();
          ast_mc._xscale = ast_array[i]._xscale;
          ast_mc._yscale = ast_array[i]._yscale;
          ast_mc._x = ast_array[i]._x;
          ast_mc._y = ast_array[i]._y;
        } else {
          // if asteroid is small, remove it from the stage
          removeMovieClip(ast_array[i]);
          // and remove it from the array
          ast_array.splice(i, 1);
          // if this was the last one, create some new ones
          if (ast_array.length<1) {
            maxAst++;
            astlnitID = setlnterval(astlnit, 2000);
          }
        }
      }
    }
  }

Первой частью этого кода является

if (ast_array[i]._xscale>25) {
    // make this asteroid 1/2 size
    ast_array[i]._xscale /= 2;
    ast_array[i]._yscale /= 2;

Сначала проверяем _xscale астероида, в который попал снаряд. Если это значение больше 25, делим его на два. Его начальной величиной будет 100. После первого попадания значением станет 50. Попадание второго снаряда уменьшит размер до значения 25. После этого выражение if примет значение "ложь", и выполнится выражение else, код которого удалит астероид.

Мы сделали имеющийся фильм меньше, и нам нужно добавить еще один, сделать его такого же размера и поместить его на той же позиции, что и первый. Это будет реализовывать вторая половина блока if.

// create a new asteroid, make it same size, same position
  ast_mc = createAst();
  ast_mc._xscale = ast_array[i]._xscale;
  ast_mc._yscale = ast_array[i]._yscale;
  ast_mc._x = ast_array[i]._x;
  ast_mc._y = ast_array[i]._y;

Помните, что функция createAst возвращает ссылку на созданный астероид. Здесь-то мы ее и используем. Мы присваиваем ее временной переменной ast_mc и настраиваем ее параметры _xscale, _yscale, _x и _y таким образом, чтобы они совпадали с параметрами астероида, в который только что попал снаряд. Также запомните, что createAst присваивает каждому новому астероиду случайные скорость и поворот, поэтому эти два маленьких обломка будут разлетаться различным образом в разных направлениях.

Другим действием, которое выполняется createAst, является добавление нового астероида в массив ast_array, чтобы он в будущем проверялся автоматически при последующих проверках элементов массива на попадание. Сейчас все функциональности собираются воедино.

Последнее, но не менее важное: нам нужно обеспечить подсчет очков. Я разместил еще одно динамическое текстовое поле вверху рабочего места для отображения количества очков. После этого добавляем последний штрих в нашу функцию shotMove. Теперь будет выполняться операция переключения на основе значения _xscale астероида, в который только что попал снаряд, и присваиваться разное количество очков, в зависимости от размера астероида - 100, 50 или 25. Это количество прибавляется к текущей сумме очков в поле.

function shotMove() {
    // add velocity to position
    this._x += this.velX;
    this._y += this.velY;
    // if shot is out of range, remove it
    if (this._x>RIGHT | | this._x<LEFT | | this._y>BOTTOM | | this._y<TOP) {
      removeMovieClip(this);
      // update shot count
      if (numShots>0) {
        numShots--;
      }
    }
    // loop through asteroid array, checking
    for hit for (i=0; i<ast_array.length; i++) {
      if (ast_array[i].hitTest(this._x, this._y, true)) {
        // determine score based on asteroid's size (_xscale)
        switch (ast_array[i]._xscale) {
        case 100 :
          score += 10;
          break;
        case 50 :
          score += 50;
            break;
          case 25 :
            score += 100;
            break;
          }
          // remove shot and update count
          removeMovieClip(this);
          if (numShots>0) {
            numShots--;
        }
        // if asteroid is big enough, break it in two
        if (ast_array[i] ._xscale>25) {
          // make this asteroid 1/2 size
          ast_array[i] ._xscale /= 2;
          ast_array[i] ._yscale /= 2;
          // create a new asteroid, make it same size, same position
          ast_mc = createAst();
          ast_mc._xscale = ast_array[i] ._xscale;
          ast_mc._yscale = ast_array[i] ._yscale;
          ast_mc._x = ast_array[i] ._x;
          ast_mc._y = ast_array[i] ._y; }
        else {
          // if asteroid is amall, remove it from the stage
          removeMovieClip (ast_array[i]);
          // and remove it from the array
          ast_array.splice(i, 1);
          // if this was the last one, create some new ones
          if (ast_array.length<1) {
            maxAst++;
            astlnitID = setInterval(astlnit, 2000);
          }
        }
      }
    }
  }

Итак, мы получили полнофункциональную версию игры Asteroids а-ля Flash, которая, однако, имеет огромное поле деятельности для усовершенствования и изменения. Вы можете сделать так, чтобы корабль взрывался при столкновении с астероидом. Это можно реализовать с помощью построения промежуточного объекта, начинающегося с третьего кадра корабля. Нужно просто выполнить gotoAndPlay(3) при попадании астероида перед его удалением. Вы можете захотеть добавить звуки с использованием материала, изученного в других местах этой книги. Вы также можете сделать так, чтобы, как и в оригинальной игре, появлялся вражеский корабль, что сделает бой еще более интересным и сложным. Для этого может быть использована большая часть того, что мы делали в нашей предыдущей "стрелялке".

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

Теперь давайте изучим некоторые физические свойства Flash.

var centerX = 275;

var centerX = 275;
  var k = .2;

onEnterFrame = function () {
    dx = centerX-ball_mc._x;
    accX = dx*k;
    velX += accX;
    ball_mc._x += velX;
  };

Здесь я выделил для ясности каждый из шагов. Некоторые предпочитают выполнять все шаги сложной функции в одной строке следующим образом.

ball_mc._x += velX += (centerX-ball_mc._x)*k;

Так можно делать, но такое выражение довольно сложно прочесть. Вы можете ввести свой собственный способ записи функции и сжать ее так, как вам нужно.

var centerX = 275;
  var k = .2;
  onEnterFrame - function () {
    dx = centerX-ball_mc._x;
    accX = dx*k;
    velX += accX;
    velX *= .9;
    ball_mc._x += velX;
  };

Можно легко продолжить работу и изменить этот файл так, что пружинящее движение будет осуществляться по осям x и y. Я реализовал это и сделал ball_mc перетаскиваемым в исходном файле Spring_2_dimensions.fla, на случай, если вы решите заняться дальнейшим экспериментированием. Весь код обсуждался ранее, поэтому я не буду останавливаться на этом файле. Если вы запустите его, вы сможете "зацеплять" и "бросать" мячик, и он всегда, в конечном счете, будет возвращаться в центр экрана.

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

clear();
  lineStyle(1, 0, 100);
  moveTo(centerX, centerY);
  lineTo(ball_mc._x, ball_mc._y);

init();
  function init() {
    cx = 275;
    cy = 200;
    onEnterFrame = rotate;
    var angle = 2;
    rad = angle*Math.PI/180;
    cosAngle = Math.cos(rad);
    sinAngle = Math.sin(rad);
  }

Рассмотрим этот код. Функция init будет указывать центральную точку и настраивать функцию onEnterFrame. После этого будет устанавливаться angle для поворота объектов в каждом кадре, с последующим переводом в радианы. Следующие две строки не добавляют ничего в функциональность программы. Однако они обеспечивают должную эффективность. Так как нам понадобится использовать cos и sin угла дважды в каждом кадре фильма, и так как они никогда не изменяются, не имеет смысл вычислять их 30 или 40 раз в секунду! Это будет делаться лишь один раз в начале фильма, с сохранением значений в переменных cosAngle и sinAngle, после чего эти переменные будут использоваться повсеместно в оставшейся части фильма.

function rotate() {
    for (i=1; i<4; i++) {
      x = this["mc"+i+"_mc"]._x-cx;
      у = this["mc"+i+"_mc"]._y-cy;
      x1 = x*cosAngle-y*sinAngle;
      y1 = y*cosAngle+x*sinAngle;
      this["mc"+i+"_mc"]._x = x1+cx;
      this["mc"+i+"_mc"]._y = y1+cy;
    }
  }

Помните, что всегда необходимо определять, вокруг чего осуществлять вращение - т.е. центральную точку - и в вычислениях отталкиваться именно от этой точки. mc1_mc расположен в точке (375,y), на расстоянии 100 пикселей от центральной точки, и 375 - то значение X, которое мы используем в вычислениях. Следовательно, мы будем вычитать значения центральной точки cx и cy из текущих координат каждого фильма. После этого будет выполняться поворот с присвоением результатов x1 и y1. Это даст новую позицию фильма относительно центральной точки, поэтому нужно прибавить cx и cy для определения наших конечных координат.

init();
  function init() {
    cx = 275;
    cy = 200;
    onEnterFrame = rotate;
    var angle = 2;
    rad = angle*Math.PI/180;
    cosAngle = Math.cos(rad);
    sinAngle = Math.sin(rad);
  }
  function rotate() {
    for (i=1; i<4; i++) {
      x = this["mc"+i+"_mc"]._x-cx;
      у = this["mc"+i+"_mc"]._y-cy;
      x1 = x*cosAngle-y*sinAngle;
      y1 = y*cosAngle+x*sinAngle;
      this["mc"+i+"_mc"]._x = x1+cx;
      this["mc"+i+"_mc"]._y = y1+cy;
      clear ();
      lineStyle (1, 0, 80);
      moveTo (mc1_mc._x, mc1_mc._y);
      lineTo (mc2_mc._x, mc2_mc._y);
      lineTo (mc3_mc._x, mc3_mc._y);
      lineTo (me1_mc._x, mc1_mc._y);
      moveTo(cx, cy);
      lineTo (mc1_mc._x, mc1_mc._y);
      moveTo (cx, cy);
      lineTo (mc2_mc._x, mc2_mc._y);
      moveTo (cx, cy);
      lineTo (mc3_mc._x, mc3_mc._y);
    }
  }

init();
  function init() {
    // set some constants
    grav = .5;
    bounce = -.8;
    TOP = 0;
    BOTTOM = Stage.height;
    LEFT = 0;
    RIGHT = Stage.width;
    // our animation function
    onEnterFrame = move;
    // make the ball draggable
    ball_mc.onPress = function() {
      this.startDrag();
      this.dragging = true;
    };
    ball_mc.onRelease = ball_mc.onReleaseOutside=function() {
      this.stopDrag();
      this.dragging = false;
    };
  }

function move() {
    // if we are not dragging the ball
    if (!ball_mc.dragging) {
      // add gravity to the у velocity
      ball_mc.velY += grav;
      // add velocity to the position
      ball_mc._x += ball_mc.velX;
      ball_mc._y += ball_mc.velY;
      // if ball hits any wall, position it at the edge of the wall
      // and have it bounce
      if (ball_mc._x<LEFT+ball_mc._width/2) {
        ball_mc._x = LEFT+ball_mc._width/2;
        ball_mc.velX *= bounce;
      } else if (ball_mc._x>RIGHT-ball_mc._width/2) {
        ball_mc._x = RIGHT-ball_mc._width/2;
        ball_mc.velX *= bounce;
      } else if (ball_mc._y<OP+ball_mc._height/2) {
        ball_mc._y = TOP+ball_mc._height/2;
        ball_mc.velY *= bounce;
      } else if (ball_mc._y>BOTTOM-ball_mc.__height/2) {
        ball_mc._y = BOTTOM-ball_mc._height/2;
        ball_mc.velY *= bounce;
      }
    } else {
      // if we ARE dragging the ball
      // velocity = new position - old position
      ball_mc.velX = ball_mc._x-ball_mc.oldx;
      ball_mc.velY = ball_mc._y-ball_mc.oldy;
      // reset old position for next time
      ball_mc.oldx = ball_mc._x;
      ball_mc.oldy = ball_mc._y;
    }
  }

Здесь содержится довольно большое количество кода, однако он уже весь вам знаком.

checkWall (wall_mc);

function checkWall(wall_mc) {
    // first do simple hitTest to see if it's close
    if (wall_mc.hitTest(ball_mc)) {
    ...
    }
  }

function checkWall(wall_mc) {
    // first do simple hitTest to see if it's close
    if (wall_mc.hitTest(ball_mc)) {
      // if so, determine ball's x and у position 
        in relation to the wall
      x = ball_mc._x-wall_mc._x;
      у = ball_mc._y-wall_mc._y;
      // convert wall's angle to radians and 
         compute cos and sin of it
      rad = wall_mc._rotation*Math.PI/180;
      cosAngle = Math.cos(rad);
      sinAngle = Math.sin(rad);
    }
  }

new_x = cos (angle) *x + sin (angle) *y
  new_y = cos (angle) *y - sin (angle) *x

function checkWall(wall_mc) {
    // first do simple hitTest to see if it's close
    if (wall_mc.hitTest(ball_mc)) {
      // if so, determine ball's x and у position 
         in relation to the wall
      x = ball_mc._x-wall_mc._x;
      у = ball_mc._y-wall_mc._y;
      // convert wall's angle to radians and compute 
         cos and sin of it
      rad = wall_mc._rotation*Math.PI/180;
      cosAngle = Math.cos(rad);
      sinAngle = Math.sin(rad);
      // rotate coordinates to align with wall angle
      x1 = cosAngle*x+sinAngle*y;
      y1 = cosAngle*y-sinAngle*x;
    }
  }

Теперь нам нужно также реализовать поворот скоростей. Это можно интерпретировать как поворот стрелки на рисунке.

function checkWall(wall_mc) {
    // first do simple hitTest to see if it's close
    if (wall_mc.hitTest(ball_mc)) {
      // if so, determine ball's x and у position 
        in relation to the wall
      x = ball_mc._x-wall_mc._x;
      у = ball_mc._y-wall_mc._y;
      // convert wall's angle to radians and compute 
         cos and sin of it
      rad = wall_mc._rotation*Math.PI/180;
      cosAngle = Math.cos(rad);
      sinAngle = Math.sin(rad);
      // rotate coordinates to align with wall angle
      x1 = cosAngle*x+sinAngle*y;
      y1 = cosAngle*y-sinAngle*x;
      // rotate velocities to align with wall angle
      vx1 = cosAngle*ball_mc.velX+sinAngle*ball_mc.velY;
      vy1 = cosAngle*ball_mc.velY+sinAngle*ball_mc.velX;
    }
  }

Заметьте, что мы не поворачиваем ни один из текущих фильмов. Это было бы пустой тратой процессорного времени, так как мы в любом случае поворачивали бы их обратно перед тем, как кто-либо их заметил. Все наши вычисления здесь носят чисто математический характер. Мы имеем воображаемый горизонтальный пол, расположенный в точке (0,0), и воображаемый шарик, расположенный на координатах x1, y1 и двигающийся с воображаемой скоростью vx1, vy1. Все, что мы сделали, это реализовали математическое представление второго, повернутого рисунка.