Выживший зомби-апокалипсис: динамическая SVG и Path Animation

Хотя SVG существует уже некоторое время, его принятие в качестве части HTML5 дало ему новую жизнь. Чтобы отпраздновать этот факт, в этой серии пошаговых инструкций было исследовано, что произойдет, если мертвые также получат новую жизнь, создав предсказатель выживания после зомби-апокалипсиса, созданный почти полностью из SVG и JavaScript.

В третьей части этой серии кричащий человек в центре этого предсказателя был окружен опасностью со всех сторон. JavaScript впервые использовался для управления как Core DOM, так и SVG DOM, добавляя десятки новых зомби, а затем переключая их с помощью атрибута «transform».

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

Примечание. Это пошаговое руководство основано на законченном коде части 3 данной серии, который можно найти в качестве источника http://justinwhitney.com/zombies/zombies_part3.htm .

Добавление дополнительных элементов SVG

В третьей части этой серии было показано, как анимировать один из шести элементов управления приращением / уменьшением холста панели управления: элемент управления «Больше зомби». Это не будет делать вообще. Контроль населения также нуждается в меньшем количестве зомби. Но прежде чем мы это сделаем, нужно добавить другие изображения SVG. Человек нуждается в защите.

Начните с торговых центров. Для простоты предположим, что в этом городе есть максимум четыре торговых центра, которые будут размещены в четырех углах. Поскольку необходимо отслеживать количество торговых центров, добавьте глобальный массив для торговых центров в верхней части раздела <script>:

<script>

var malls = new Array();

…

Код newMall установит координаты x, y для нового элемента SVG на основе количества торговых центров в массиве с учетом 100 × 100 измерений самого изображения торгового центра. Остальная часть кода по сути такая же, как и в коде newZombie, с добавлением, что новый элемент SVG будет помещен в массив для целей отслеживания:

 function newMall(){

  if (malls.length < 4) {

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

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

    svg.setAttribute('width','471');

    svg.setAttribute('height','303');

    var scale = .21;

    var x = 0;

    var y = 0;

    var thisMall = malls.length;

    if (thisMall == 0 || thisMall == 2) {

      x = 20;

    } else {

      x = 480;

    }

    if (thisMall == 0 || thisMall == 1) {

      y = 10;

    } else {

      y = 300;

    }

    malls.push(svg);

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

    document.getElementById('cityBox').appendChild(svg);

  }

}

Наконец, добавьте событие мыши к кнопке приращения торгового центра, которая является элементом <path> с идентификатором «mallMore»:

 <path id="mallMore" d="M 300 150 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="newMall();" />

Результат с максимальными торговыми центрами (и без зомби) должен выглядеть как на рисунке 1.

Рисунок 1. Динамически добавленные элементы SVG Mall <image>

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

 function newRedneck(){

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

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

  svg.setAttribute('width','375');

  svg.setAttribute('height','950');

  scale = .07;

  var cityWidth = 600;

  var cityHeight = 400;

  var safezoneWidth = 200;

  var safezoneHeight = 200;

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

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

  var x = Math.floor(Math.random()*(safezoneWidth)) + safezoneX;

  var y = Math.floor(Math.random()*(safezoneHeight-100)) + safezoneY;
 
  flip = (x > (cityWidth / 2)) ? 1 : -1; //flip rednecks left of center

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

  document.getElementById('cityBox').appendChild(svg);

}

Добавьте вызов этой функции в элемент <path> с идентификатором «redneckMore»:

 <path id="redneckMore" d="M 300 250 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="newRedneck();" />

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

 <script>

  var zombies = new Array();

  var malls = new Array();

  var rednecks = new Array();

…

 //document.getElementById('cityBox').appendChild(svg);

return svg;

 malls.push(svg);

 function tickSVG(textName, increment, min, max) {

  var textElement = document.getElementById(textName);

  var currentValue = parseInt(textElement.textContent);

  currentValue += increment;

  if ( (currentValue <= max) && (currentValue >= min) ) {

    textElement.textContent = currentValue;

    isMore = (increment == Math.abs(increment));

    switch (textName) {

      case 'zombieText':

        var svgArray = zombies;

        var newSVG = (isMore ? newZombie() : svgArray[svgArray.length - 1]);

        break;

      case 'redneckText':

        var svgArray = rednecks;

        var newSVG = (isMore ? newRedneck() : svgArray[svgArray.length - 1]);

        break;

      case 'mallText':

        var svgArray = malls;

        var newSVG = (isMore ? newMall() : svgArray[svgArray.length - 1]);

        break;

    }

    if (isMore) {

      svgArray.push(newSVG);

      document.getElementById('cityBox').appendChild(newSVG);

    } else {

      document.getElementById('cityBox').removeChild(newSVG);

      svgArray.pop(svgArray.length - 1);

    }

  }

}

 <path id="zombieLess" d="M 50 50 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('zombieText',-100,0,3000);" />

<path id="zombieMore" d="M 300 50 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('zombieText',100,0,3000);" />

<path id="mallLess" d="M 50 150 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('mallText',-1,0,4);" />

<path id="mallMore" d="M 300 150 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('mallText',1,0,4);" />

<path id="redneckLess" d="M 50 250 l 50 -25 l 0 50 l -50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('redneckText',-1,0,10);" />

<path id="redneckMore" d="M 300 250 l -50 -25 l 0 50 l 50 -25" stroke="black" stroke-width="1" fill="red" onmouseup="tickSVG('redneckText',1,0,10);" />

 <script>

  var zombies = new Array();

  var malls = new Array();

  var rednecks = new Array();

  var currentOdds = 0;

…

 function calcOdds() {

  var zombieCount = parseInt(document.getElementById('zombieText').textContent);

  if (zombieCount == 0) {

    currentOdds = 100;

  } else {

    var redneckCount = parseInt(document.getElementById('redneckText').textContent);

    var mallCount = parseInt(document.getElementById('mallText').textContent);

    var speed = document.getElementById('speedText').textContent;

    var threat = Math.round((zombieCount * (speed == 'Slow' ? 2 : 18)) / 180);

    var protection = Math.round(((mallCount * 10) + (redneckCount * 5)) / 60 * 100);

    currentOdds = Math.round((100 + protection - threat) / 2);

  }

  if (currentOdds > 100) currentOdds = 100;

  if (currentOdds < 0) currentOdds = 0;

}

 <g id="oddsButton" style="cursor: pointer;" onmouseup="calcOdds(); alert(currentOdds);">

 function movePointer() {

  calcOdds();

  document.getElementById('oddsText').textContent = currentOdds + '%';

  var newY = -2 * currentOdds; //relative Y coordinate

  newY += 300; //actual Y coordinate

  document.getElementById('oddsPointer').setAttribute('points',

    "150," + newY + " 100," + (newY - 25) + " 100," + (newY + 25));

}

 <g id="oddsButton" style="cursor: pointer;" onmouseup="movePointer();">

 <g id="oddsMeter" stroke="#000000" stroke-width="2">

  <path d="M100 100 h75 m-75 100 h75 m-75 100 h75" stroke-width="3" />

  <path d="M100 150 h50 m-50 100 h50" />

  <path id="oddsPath" d="M 0 0 L 0 -200" />

  <polygon id="oddsPointer" points="150,300 100,275 100,325" fill="#FF0000" stroke-width="1">

    <animateMotion dur="2s" begin="oddsButton.click">

      <mpath xlink:href="#oddsPath" />

    </animateMotion>

  </polygon>

  <rect x="90" y="75" rx="15" ry="10" width="20" height="250" fill="#0000FF" />

</g>

 function supportsAnimation() {

  return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Animation", "1.1");

}

 <script>

  var zombies = new Array();

  var malls = new Array();

  var rednecks = new Array();

  var currentOdds = 0;

  var previousL = 0;

 function movePointer() {

  calcOdds();

  document.getElementById('oddsText').textContent = currentOdds + '%';

  var newY = -2 * currentOdds; //relative Y coordinate

  if (supportsAnimation()) {

    document.getElementById('oddsPath').setAttribute('d','M 0 ' + previousL + ' L 0 ' + newY);

      previousL = newY;

  } else {

    newY += 300; //actual Y coordinate

    document.getElementById('oddsPointer').setAttribute('points',

     "150," + newY + " 100," + (newY - 25) + " 100," + (newY + 25));

  }

}