Cobalahmengetik kata 'Zerg Rush' di mesin pencari Google.

Hai teman teman suryanjawa cobalah ketikan pada Google dengan kata “ Zerg Rush ”Nantinya apabila teman-teman mencobanya di halaman Google, akan turun banyak huruf "O" berukuran kecil dari atas, yang kemudian, menghancurkan semua hasil pencarian mesin Google, hingga akhirnya membentuk formasi huruf "G G" berukuran besar.
Teman-teman mungkin baru melihat "Google Zerg Rush" Telur Paskah.

sebuah fitur hiburan buatan google yang termotivasi dari sebuah game Allien”Star Craft”

Dalam permainan Starcraft 2 terdapat tiga jenis penghuni, yaitu Protoss, Terran dan Zerg. Zerg adalah bangsa alien. Para Zergs ini mempunyai pasukan unik dengan nama “Zergling” yaitu alien kecil yang tugasnya menyerang sebuah bangunan secara berkelompok.
Apabila seorang pemain memiliki pasukan Zergling dalam jumlah besar dan menyerang ke arah musuh secara bertubi-tubi, maka ini disebut “Zergling rush“.
Setelah mengetikkan Zerg Rush di kotak pencarian Google, Teman-teman nantinya akan dihadapkan dengan sekelompok alien berupa huruf “O”.
Tugas pengguna adalah melindungi hasil pencarian dari serangan alien “O” ini. Arahkan pointer mouse ke mereka dan klik untuk menghancurkannya.

Huruf "O" ini akan berusaha menghancurkan setiap bagian dari hasil pencarian, termasuk menu di sebelah kiri.

 Surya pikir akan menyenangkan untuk mencoba melakukan sesuatu seperti ini sendiri.

Lihat demo Surya sebelum teman-teman membaca. Seperti yang teman teman lihat itu tidak sebagai dipoles sebagai versi Google tapi perilaku dasar adalah sama.
Surya belum melihat sumber Google jadi Surya tidak yakin bagaimana mereka memilih untuk melakukannya, tapi bagi Surya tidak ada rute lain yang lebih jelas dari elementFromPoint, sebuah metode yang mengembalikan DOM elemen pada setiap koordinat ditentukan di viewport saat ini.
Jadi, saya menciptakan banyak contoh Zergling kecil. Setiap Zerling pencarian untuk "target", yaitu setiap elemen DOM di dekatnya. Sebuah contoh Zergling akan mulai dengan melihat dalam jarak dekat, menyebutnya elementFromPoint di delapan derajat berbalik radius terus meningkat:

// (Zergling.prototype.findTarget)

for (radius = 10; radius < Zergling.VISION; radius += 50) {

  for (degree = 0; degree < 360; degree += 45) {

    x = this.x + halfWidth + radius * cos(PI/180 * degree) - scrollLeft;

    y = this.y + halfHeight + radius * sin(PI/180 * degree) - scrollTop;

    if (Zergling.isSuitableTarget(el = doc.elementFromPoint(x, y))) {

      // We have a viable target

      // ...

      break;

    }

  }

}

Setiap elemen acak tidak mungkin menjadi sasaran yang cocok sekalipun. Sebagai contoh, kita ingin menghindari kasus Zergling lainnya pada halaman. Kami juga ingin menghindari sesuatu yang terlalu besar, seperti elemen BODY. Surya juga menambahkan dalam fitur antiZerg sehingga elemen pada halaman dapat melindungi diri dari Zergs:

Zergling.isSuitableTarget = function isSuitableTarget(candidate) {

  var targetData;

  if (!candidate) {

    return false;

  }

  // Make sure none of its ancestors are currently targets:

  for (var parent = candidate; parent = parent.parentNode;) {

    if ($.data(parent, Zergling.DATA_KEY) || /antiZerg/i.test(parent.className)) {

      return false;

    }

  }

  targetData = $.data(candidate, Zergling.DATA_KEY);

  candidate = $(candidate);

  return !/zergling/i.test(candidate[0].nodeName) &&

    !/antiZerg/i.test(candidate[0].className) &&

    // Make sure it's either yet-to-be-a-target or still alive:

    (!targetData || targetData.life > 0) &&

    // Make sure it's not too big

    candidate.width() * candidate.height() < Zergling.MAX_TARGET_AREA;

};

Setelah kita memiliki target yang layak kita mulai bergerak ke arah itu.

calcMovement: function() {

  var target = this.target,

      // Move towards random position within the target element:

      xDiff = (target.position.left + random() * target.width) - this.x,

      yDiff = (target.position.top + random() * target.height) - this.y,

      angle = atan2(yDiff, xDiff);

  // Assign deltaX/Y (i.e. how much we move {x,y} on each step)

  this.dx = this.speed * cos(angle);

  this.dy = this.speed * sin(angle);

}, //...

Pada setiap langkah Zergling perlu memeriksa apakah itu mencapai target belum

:

hasReachedTarget: function() {

  var target = this.target,

      pos = target.position;

  return  this.x >= pos.left &&

          this.y >= pos.top &&

          this.x <= pos.left + target.width &&

          this.y <= pos.top + target.height

}, //...

Ketika Zergling mencapai objek itu mulai memusnahkannya:

if (this.hasReachedTarget()) {

  this.isKilling = true;

  return;

}

Dan pemusnahan sebenarnya

if (this.isKilling) {

  if (target.life > 0) {

    // It's still alive! Pulsate and continue to kill:

    target.life--;

    this.pulsate();

    target.dom.css('opacity', target.life / Zergling.LIFE);

  } else {

    // It's DEAD!

    target.dom.css('visibility', 'hidden');

    this.pulsate(0);

    this.isKilling = false;

    this.target = null;

  }

  return;

}

Setting this.target to null berarti bahwa Zergling akan mulai mencari target baru pada langkah berikutnya.

Untuk mengelola semua Zerglings kita harus mengumpulkan ZergRush per kelasnya:

function ZergRush(nZerglings) {

  var me = this,

      zerglings = this.zerglings = [],

      targets = this.targets = [];

  for (var i = 0; i < nZerglings; ++i) {

    zerglings.push(

      new Zergling(

        Math.random() * 100,

        Math.random() * 100,

        this

      )

    );

  }

  this.intervalID = setInterval(function() {

    me.step()

  }, 30);

}

Semua Zerglings mulai dari posisi acak di bagian atas-kiri halaman (mana saja dari {0,0} ke{100,100}).

Seperti yang surya katakan, itu tidak terlalu dipoles. Para Zerglings saat ini hanya titik-titik merah kecil, yang dibuat seperti:

// (in Zergling constructor):

// element used to avoid CSS conflicts and because its cool..

this.dom = $('').css({

  width: this.width,

  height: this.height,

  position: 'absolute',

  display: 'block',

  background: 'red',

  left: x,

  top: y,

  borderRadius: '5px',

  zIndex: 9999

}).appendTo(body);

 Itulah script pembuatannya

terimakasih kunjungannya
jangan lupa coment ya