If you type in the Google search for the word Zerg Rush, then there will be a drop-down letter O, which will gradually destroy the entire text of the search results. If you look at the source of the page, you can see

<div class="zr_zergling_container" style="-webkit-user-select: none; left: 390px; top: 720.5px; "> <div class="zr_yellow" style="-webkit-transform: rotate(10deg); "></div> <div class="zr_health" style="width: 20px; background-color: rgb(0, 153, 51); visibility: hidden; "></div> </div>

The background of the element is a picture with the letter O. And somewhere in the scripts there is a manipulation of the coordinates and angle of the elements.

There is a desire to repeat the game. What is the easiest way to do this?

  1. Copy Google Hike - div + js.
  2. Draw everything on HTML5 canvas (it’s not clear what will happen to the rest of the page text).
  3. Use built-in SVG.

    1 answer 1

    The turn only goes in eight directions. Accordingly, CSS sprites will save the world from Canvas and SVG. Why save? Because they are completely unnecessary here.
    If you need a smooth rotation - definitely the canvas: SVG will have to be cut again, so that IE can understand.