Выживание зомби-апокалипсиса: манипулирование SVG с помощью JavaScript

  function newZombie () {

   var svg = document.createElementNS ("http://www.w3.org/2000/svg", "image");

   svg.setAttributeNS ( 'http://www.w3.org/1999/xlink','href','zombie.svg');

   svg.setAttribute ( 'ширина', '175');

   svg.setAttribute ( 'высота', '304');

   шкала вар = .16;

   var x = Math.floor (Math.random () * 550);

   var y = Math.floor (Math.random () * 350);

   var cityWidth = 600;

   var cityHeight = 400;

   var safezoneWidth = 200;

   var safezoneHeight = 100;

   var safezoneX = Math.round ((cityWidth - safezoneWidth) / 2, 0);

   var safezoneY = Math.round ((cityHeight - safezoneHeight) / 2, 0);

   if (((safezoneX - 50) <= x) && (x <= (safezoneX + safezoneWidth)) &&

   ((safezoneY - 50) <= y) && (y <= (safezoneY + safezoneHeight))) {

     switch (Math.floor (Math.random () * 4)) {

       случай 0:

       x = safezoneX - 50;

       перемена;

       Дело 1:

       x = safezoneX + safezoneWidth;

       перемена;

       случай 2:

       у = безопасная зона Y - 50;

       перемена;

       случай 3:

       y = safezoneY + safezoneHeight;

       перемена;

     }

   }

   svg.setAttribute ('transform', 'translate (' + (x) + ',' + (y) + ') scale (' + scale + ',' + scale + ')');

   document.getElementById ( 'Citybox') AppendChild (SVG).

 } 

Хотя этот код не имеет прямого отношения к SVG, этот код влияет на размещение изображения. Во-первых, он устанавливает безопасную зону 200 × 100 и вычисляет исходные координаты x, y зоны, предполагая, что она находится в центре холста 600 × 400. Во-вторых, если текущие координаты x, y зомби находятся в этой зоне, изображение перемещается в произвольно выбранном направлении, пока оно не окажется за пределами безопасной зоны.

На рисунке 4 показано, как выглядит безопасная зона после особенно неприятной волны нежити.

Рисунок 4. Безопасная зона

Лучше, но это все равно больше похоже на распродажу в Черную пятницу, чем на заражение зомби (небольшая разница, но, тем не менее, разница). Было бы лучше, если бы некоторые из этих зомби были перевернуты. Но есть проблема: как отмечено во второй части этой серии, атрибут transform может использоваться для масштабирования, поворота, перекоса, преобразования или определения совершенно новой матрицы. Обратите внимание на то, чего нет в этом списке: отразить, горизонтальное или вертикальное. Трагический недосмотр, но тот, который можно преодолеть с помощью комбинации перевода и масштаба.

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

К счастью, из-за техники, используемой для размещения изображения кросс-браузерным способом, а именно с использованием атрибутов transform: translate и transform: scale, можно добавить множитель отрицательного масштаба с очень небольшими усилиями.

Подвести итоги:

* Нет преобразования: атрибут flip — он не существует.

* Использование transform: scale (-1,1) само по себе приведет к полному отключению изображения от родительского элемента <svg>.

* Использование комбинации transform: translate и transform: scale эффективно позволяет перевернуть изображение на месте; в этом случае transform: scale выполняет двойную функцию, масштабируя изображение до нужного вам размера, что нужно было сделать в любом случае.

Чтобы это произошло, добавьте некоторую умную рандомизацию, корректировку размещения, чтобы компенсировать размер изображения, и настройку кода transform: scale:

  function newZombie () {

   var svg = document.createElementNS ("http://www.w3.org/2000/svg", "image");

   svg.setAttributeNS ( 'http://www.w3.org/1999/xlink','href','zombie.svg');

   svg.setAttribute ( 'ширина', '175');

   svg.setAttribute ( 'высота', '304');

   шкала вар = .16;

   var x = Math.floor (Math.random () * 550);

   var y = Math.floor (Math.random () * 350);

   var cityWidth = 600;

   var cityHeight = 400;

   var safezoneWidth = 200;

   var safezoneHeight = 100;

   var safezoneX = Math.round ((cityWidth - safezoneWidth) / 2, 0);

   var safezoneY = Math.round ((cityHeight - safezoneHeight) / 2, 0);

   if (((safezoneX - 50) <= x) && (x <= (safezoneX + safezoneWidth)) &&

   ((safezoneY - 50) <= y) && (y <= (safezoneY + safezoneHeight))) {

     switch (Math.floor (Math.random () * 4)) {

     случай 0:

     x = safezoneX - 50;

     перемена;

     Дело 1:

     x = safezoneX + safezoneWidth;

     перемена;

     случай 2:

     у = безопасная зона Y - 50;

     перемена;

     случай 3:

     y = safezoneY + safezoneHeight;

     перемена;

     }

   }

   flip = Math.floor (Math.random () * 2) * 2-1;  // результаты в -1 или 1

   х + = 25 - 25 * флип;  // настроить размер 50x50 зомби;  приводит к +50 или +0

   svg.setAttribute ('transform', 'translate (' + (x) + ',' + (y) + ') scale (' + (scale * flip) + ',' + scale + ')');

   document.getElementById ( 'Citybox') AppendChild (SVG).

 } 

Это приводит к немного более хаотичному взгляду на апокалипсис, показанный на рисунке 5.

Рисунок 5. Зомби. Листать зомби. С помощью transform: перевод и преобразование: масштабирование применяется

Чтобы увидеть прогноз выживания зомби-апокалипсиса в действии, как сейчас, перейдите на http://justinwhitney.com/zombies/zombies_part3.htm . Обязательно посмотрите исходный код страницы для примера кода до этого момента.

Завершение

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

Эта статья является частью технической серии HTML5 от команды Internet Explorer. Испытайте концепции, изложенные в этой статье, в течение трех месяцев бесплатного кросс-браузерного тестирования BrowserStack @ http://modern.IE .