https://connect.facebook.net/pl_PL/all.js

Dostajemy w 57 kodu błąd:

Uncaught SyntaxError: Unexpected identifier

Co ciekawe ładując SDK po http://

http://connect.facebook.net/pl_PL/all.js

lub też wersje angielską po https://

https://connect.facebook.net/en_GB/all.js

wszystko działa.

Przykład aplikacji która nie działa z powodu tego buga (spróbuj kliknąć na button [zaproś] w prawym górnym rogu): https://www.facebook.com/ZabezpieczamSie/app_299888393406047

Aktualizacja
Problem już nie występuje, najwyraźniej poprawiono

Tematem tego wpisu jest bardzo dziwny błąd na którego natknęliśmy się podczas developowania naszych gier.

Jako, że systemowe przeglądarki urządzeń mobilnych (Android, iOS) są oparte o WebKit to zdarza nam się część testów przeprowadzać na komputerze za pomocą Chrome. Generalnie jeśli coś na Chromie działa to na urządzeniu mobilnym też powinno (wyłączając niektóre przypadki np. brak zaimpelemtowania mechanizmu localStorage na starszych wersjach Androida). W tym przypadku niestety jest inaczej…

Problem pojawia się podczas użycia funkcji bind() znanaj z Mootools (w jQuery funkcja bind robi zupełne coś innego), która umożliwia przekazanie kontekstu this wraz z parametrami do funkcji. Patrz:

http://mootools.net/docs/core/Types/Function#Function:bind
 

A więc załączając poniższy kod:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(bind) {
    var self = this,
        args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : [];

    return function() {
      if (arguments.length > 0) {
        args = args.concat(Array.prototype.slice.call(arguments));
      }
      return self.apply(bind, args);
    };
  }
}

możemy napisać:

var Foo = function(){
  this.a = function(){
    setTimeout(this.b.bind(this, 123), 100);

    // bez uzycia bind() musilibysmy napisac tak
    //
    // var that = this;
    // setTimeout(function(){
    //  that.b(123);
    // }, 100);
  };

  this.b = function(param){
    console.log(this, param); // Foo, 123
  };
}

var oFoo = new Foo();
oFoo.a();

Funkcja ta jest bardzo fajna, i po poznaniu Mootoolsów jest jedna z rzeczy której mi brakuje w jQuery.

Zmierzając do sedna sprawy. Problem pojawia się na przeglądarkach mobilnych kiedy użyjemy bind w połączeniu ze słuchaczem eventa. Przykład dostępny jest TUTAJ

W przykładowym kodzie załączamy 2 corowe pliki:

• w Core.js znajduje się prototyp funkcji bind() jak i funkcja inherit() odpowiedzialna za dziedziczenie
• EventEmitter.js to klasa umożliwiająca rzucanie i słuchanie zdarzeń przez nasze klasy. Wystarczy że taka klasa będzie dziedziczyła po EventEmitter.

Nasza przykładowa klasa wygląda tak:

var Example = (function(){
  var exampleClass = function(){
    this.initialize();
  };

  exampleClass.prototype = {
    initialize: function(){
      // to nie dziala prawidlowo
      this.addListener('meEvent', this.listener.bind(this));

      // a to juz dziala prawidlowo
      var that = this;
      this.addListener('meEvent', function(e, param){
        that.listener(e, param);
      });

      // tak tez bedzie dzialac prawidlowo
      // this.addListener('meEvent', this.listener);
    },

    listener: function(e, param){
      alert('this.listener: ' + param);
    },

    fireEvent: function(param){
      this.fire('meEvent', param);
    }
  };

  inherit(EventEmitter, exampleClass, exampleClass.prototype);

  return exampleClass
}());

Natomiast używamy tego w ten sposób:

var ex = new Example();

ex.fireEvent(1);
ex.fireEvent(2);
ex.fireEvent(3);

Czyli co tutaj robimy:

• przy stworzeniu obiektu klasy Example tworzone są 2 funkcje nasłuchujące zdarzenia meEvent, jedna z użyciem bind druga bez jego użycia
• podczas wywołania metody fireEvent() jest rzucane zdarzenie z parametrem podanym w tej metodzie

Na PCowym Chromie, wynikiem tego jest 6 alertów (pierwsza kolumna przedstawia słuchacza zdefiniowanego za pomocą bind, druga bez niego), kolejno:

1, 1
2, 2
3, 3

Jeśli odpalimy to na przeglądarce moblinej, otrzymamy:

1, 1
1, 2
1, 3

Zobacz ten przykład

Uogólniając – jeśli użyjemy bind() to na przeglądarkach mobilnych do każdego słuchacza zdarzenia zostaje przekazany parametr taki sam jaki został wywołany przy pierwszym rzuceniu tego zdarzenia.

Błąd najprawdopodobniej pojawia się także pomijając zdarzenia, jednak nie umiem odtworzyć takiej sytuacji. Generalnie, jeśli używamy tak zdefiniowaną funkcje bind() na urządzeniach mobilnych to czasami przekazywanie przez nie parametry nie są tymi których oczekujemy. Natomiast nie zaobserwowaliśmy błędów jeśli chodzi o przekazywanie kontekstu this.

Jeśli ktoś spotkał się z tym błędem lub zna inne różnice implementacyjne między Chromem a przeglądarkami mobilnymi zapraszam do dzielenia się w komentarzach.

Jest to zbiór testów, które mają w łatwy sposób zidentyfikować jakie możliwości ma dana wersja mobilnej przeglądarki. Dzięki temu chcą walczyć z fragmentaryzacją i pomóc programistom lepiej wykorzystać dostępne możliwości.

W tym momencie test jest podzielony na trzy pierścienie (rings).

Ring 0 reprezentuje podstawowe funkcjonalności. Zbiór możliwości dostępnych obecnie na największej ilości urządzeń (w tym momencie jest to iOS5 i Android 2.2 Froyo).

Ring 1 reprezentuje funkcjonalności potrzebne to tworzenia takich gier jak Angry Birds, Where is My Wather, aplikacji Facebooka, Twittera czy Instagram. Sprawdza między innymi:

- Akceleracje obiekty Canvas
- DRM (wideo i audio)
- element audio, kodek mp3, możliwość odgrywania więcej niż jednego źródła dźwięku w tym samym czasie
- aparat
- blokadę zmiany położenia ekranu i zdarzenia zmiany tego położenia
- multi-touch
- podstawowe funkcjonalności web workerów
- funkcjonalności pierścienia 0 bez wykorzystania prefiksów
- WOFF
- IndexedDB

Ring 3 reprezentuje funkcjonalności, które staną się powszechne w kolejnych latach. Takie, które umożliwią tworzenie np. gier 3D albo zaawansowanych gier wieloosobowych. Sprawdza między innymi:

- WebGL
- Web notifications
- Audio API
- WebSockets
- SVG

Rozwój tego zestawu nie jest skończony i w przyszłości pojawią się kolejne pierścienie. Cały pakiet został opublikowany jako Open Source, więc wy możecie także się przyłączyć i go rozwijać. Twórcy mają nadzieje wspomóc za jego pomocą Core Mobile Web Platform Community Group w ich staraniach standaryzujących.

Sprawdźcie sami jak testy się sprawują: http://rng.io/

Żródła:
Ringmark na Github-e
announcing ringmark a mobile browser test suite
ringmark is now open source
The methodology behind ringmark
Core Mobile Web Platform Community Group

Zuma Blitz level progressbar

W erze gier takich jak World of Warcraft czy Farmville zjawisko “levelowania” i “nabijania expa” jest dość popularnym zjawiskiem. Mechanizm ten na pewno napędza rozgrywkę i sprawia że użytkownik chce grać widząc swój postęp.

Dzisiaj udostępniam gotowy kod realizujący taki feature, całość jest pisana z zamysłem urządzeń mobilnych (brak wymaganych bibliotek, wykorzystanie CSS Transforms).

ZOBACZ DEMO

Niestety kompletnie w tym wszystkim zapomniałem o tagu <progress/> w HTML5 http://www.w3schools.com/html5/tag_progress.asp i niestety mój kod wykorzystuje divy, mimo że nowy tag pasuje tutaj idealnie. Nie sprawdzałem tego ale wydaje mi się że poza semantycznym kodem (i wcale nie mówię że to nie jest ważne) żadnych innych zysków nie będziemy mieli np. w postaci większej wydajności.

 
Całość realizuje kilka podstawowych funkcji:

• możemy dowolnie konfigurować doświadczenie wymagane na dany level
• pasek przy przejściu na następny level jest dopełniany do końca a następnie zerowany (nie ma efekty zmniejszania paska)
• możliwość podpięcia callbacka na dowolną funkcje przy przejściu na kolejny level
• całość jest napisana z myślą o urządzeniach moblinych

Kod może nie piorunuje ale radzi sobie całkiem nieźle a samo użycie jest bardzo proste:

var oBar = new pBar({
  elems: {
    bar: document.getElementById('pBar'),
    proc: document.getElementById('pBarProc'),
    value: document.getElementById('pBarValue'),
    max: document.getElementById('pBarMax'),
    level: document.getElementById('pBarLevel')
  },
  levels: [
    {n: 1, max: 400},
    {n: 2, max: 900},
    {n: 3, max: 1500},
    {n: 4, max: 2200},
    {n: 5, max: 3400},
    {n: 6, max: 5000},
    {n: 7, max: 7000}
  ],
  value: 0,
  duration: 500,
  freq: 40,
  onNextLevel: fOnNextLevel,
  isAnimate: true,
  isAnimateValues: false
});

Z myślą o wydajności, klasa pBar nie generuje HTMLa i należy napisać go samemu, w moim przykładnie jest to:

<div class="pBarContainer">
  <div id="pBar" class="pBar"></div>
    <div class="text">
      <span>
        <span id="pBarValue">x</span> / <span id="pBarMax">x</span>
      </span>
      <span class="procContainer">
        <span class="proc" id="pBarProc"></span> %
      </span>
      <span class="level">
        Level <span id="pBarLevel">1</span>
      </span>
    </div>
    <div id="stars">
      <div id="star1" class="star hidden"></div>
    </div>
 </div>

Ze spraw technicznych chciałby zwrócić uwagę tylko na jeden szczegół. Jeśli używamy CSS Transforms na urządzeniach mobilnych to zawszę, ale to zawszę, dodajemy do animowanego elementu:

translate3d(0, 0, 0);

Dzięki temu zyskujemy na wydajności poprzez włączenie hardware-owej akcelaracji animacji. Różnice można zobaczyć na tym filmiku:

• Browsera ze wsparciem dla XMLHttpRequest Level 2 – co nie jest w obecnej chwili dużym problemem. Wszystkie popularne przeglądarki (poza IE) implementują już ten standard. Dotyczy to również systemowych przeglądarek w systemach Android i iOS. Jeżeli zaś chodzi o IE, to od wersji 8, możemy skorzystać z odpowiednika XDomainRequest.
• Ustawienia odpowiednich nagłówków odpowiedzi po stronie serwera. Sprawa jest banalna. Omówimy ją sobie na przykładzie aplikacji PHP.

Na początek stwórz kod po stronie klienta:

      var method = 'POST', // równie dobrze request możemy wysłać GETem
          url = 'http://cors.bushidoit.com/sample1.php'; // tutaj wpisz swoją domenę

      var xhr = new XMLHttpRequest();
      xhr.onerror = function(){
        alert('error')
      };
      xhr.onreadystatechange = function(){
        if (4 === xhr.readyState && 200 === xhr.status) {
          alert(xhr.responseText)
        }
      }

      xhr.open(method, url, true);
      // Jeżeli wysyłamy dane POSTem, to musimy ustawić jeszcze dodatkowy nagłówek
      if('POST' === method){
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      }

      xhr.send('msg=Foo');

Po stronie serwera kod jest jeszcze prostszy:

<?php
// Domena która jest dopuszczona do wykonywania zapytania - możemy użyć widlcarda (*)
header('Access-Control-Allow-Origin: *');
// Lista dozwolonych metod zapytania
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

echo $_POST['msg'];
?>

Wszystko działa ładnie, do czasu kiedy zechcemy wysyłać / odbierać ciasteczka. Choćby na potrzeby urzymywania sesji. Do takich zapytań musimy dołożyć jeszcze jeden parametr:

      xhr.withCredentials = "true";

a po stronie serwera:

header('Access-Control-Allow-Credentials: true');

w takim przypadku, musimy również dokładnie określić domenę z której przychodzi request. Nie mamy możliwości skorzystania z wildcarda *.
Tutaj możecie zobaczyć działające Demo bez ciasteczek oraz Demo z ciasteczkami.

Dla uproszczenia, nasz przykład nie działa w IE. Tutaj znajdziecie przykładową implementację z wykorzystaniem XDomainRequest.

Firma Game Closure autorzy SKD do tworzenia multi-platformowych gier w HTML5 uzyskała właśnie 12 milionów dolarów na rozwój swojego biznesu. Sami właściciele chwalą się, że dzięki ich narzędziom uda się w przyszłości zmniejszyć czas tworzenia gier na wiele systemów z 12 miesięcy do 6 tygodni. Firmie udało się zdobyć dofinansowanie po stworzeniu gry Pop Star Defence, która pokazywała możliwości ich SDK.

Sami możecie sprawdzić ją wpisując jako kod “popstarhtml5″.
Gra zadziałała mi tylko w Chromie. Ipad i Samsung GalaxyS poległy i nic nie udało się wyświetlić.

Mimo to bardzo się cieszę, że inwestorzy wierzą w gry w HTML5 pomimo niedawnego bankructwa firmy Moblyng(zdobyli 7.5 miliona dolarów z pomysłem na biznes bardzo podobnym z tym który prezentują Game Closure). Mam wątpliwości co prawda czy model technologiczny wielo-platformowego silnika do gier się sprawdzi. Szczególnie na urządzeniach mobilnych, gdzie waga Twojego kodu ma duże znaczenie a i “przeglądarkowe piekło” jeszcze bardzo mocno daje się we znaki. Dodatkowo te 6 tygodni wystarczające na stworzenie gry można włożyć między bajki. Ale oczywiście trzymam kciuki za Game Closure i że wspomoże to rozwój rynku gier HTML5.

Żródła:
Game Closure
Artykuł o dofinansowaniu z Venture Beat
Gra Pop Star Defence
Game Closure

W samym CSSie można zrobić całkiem sporo, a dobrym przykładem tego może być Nyan cat stworzony przez Michała Budzyńskiego . Wystarczy tylko poznać kilka sztuczek i możemy zbudować coś całkiem fajnego. Jedną z takich sztuczek jest właśnie tworzenie trójkątów za pomocą samego CSS`a.

Całość jest banalnie prosta a opiera się o właściwe wykorzystanie atrybutu border. Poszczególne obramowania kontenera (górne, prawe, dolne i boczne) przecinają się pod kątem 45* jeśli wielkość tych obramowań jest taka sama. Najlepiej zobrazuje to poniższy obrazek:

A więc żeby uzyskać trójkąt wystarczy stworzyć kontener o wymiarach 0x0px ustawiając odpowiednio dużą wielkość obramowania

div {
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
}

Teraz ustawmy sobie różne kolory dla kolejnych stron obramowania

div {
  (...)
  border-color: red blue green yellow;
}

Tutaj możesz zobaczyć efekt

Aby uzyskać efekt trójkąta należy jeszcze tylko ukryć 3 z 4 części obramowania za pomocą koloru transparent

div {
  (...)
  border-color: red transparent transparent transparent;
}

I w ten sposób otrzymaliśmy trójkąt Dodam tylko, że istnieje możliwość tworzenia różnokątnych figur, wystarczy zdefiniować różną szerokość dla kolejnych części obramowania:

div {
  width: 0;
  height: 0;
  border-width: 30px;
  border-left-width: 10px;
  border-right-width: 80px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}
​

Całość działa na wszystkich testowanych przeglądarkach, z tym że na IE7 należy pamiętać o definicji height: 0;, podczas jej braku przeglądarka ustawia wysokość na jakąś dziwną defaultową wartość font-size z tego kontenera.

Animacje jeszcze do niedawna były zastrzeżone dla JavaScriptu. Co rusz pojawiały się demonstracje oparte na jQuery i MooTools, przedstawiające wydumane przejścia tekstów czy kontenerów, a czasem i niewielkie filmiki.

Teraz to CSS3 chce odebrać palmę pierwszeństwa skryptom. I idzie mu całkiem nieźle! Największym minusem animacji w stylach jest brak wsparcia w Internet Explorer’rze (na chwilę obecną IE9 nie wspiera praktycznie niczego transformacjami 2D). Opera nie jest wiele lepsza, również nie obsługując większości nowych opcji. Dlatego właśnie animacje w CSS3 są świetnym rozwiązaniem dla aplikacji mobilnych uruchamianych przez przeglądarkę – WebKit obecny w iOS i na Androidzie obsługuje wszystkie te „fanaberie” poza transformacjami 3D. Niestety, należy – dla pełnej zgodności – dopisywać suffix –webkit (dla Mozilli jest to -moz, ale skoro kładę nacisk na telefony, pomijam to w przykładach).

Ale przejdźmy do najważniejszego – do kodu.

Najpierw stwórzmy sobie prosty kontener #box, będący niewielkim, czarnym kwadratem:

#box {
  background: #000;
  color: #fff;
  width: 200px;
  height: 200px;
  text-align: center;
  margin: 100px;
  padding: 10px;
  font: 12px/200px Arial, sans-serif;
  position: absolute;
}

„Klatkowanie” w CSS3 robi się dwustopniowo. Najpierw należy zdefiniować klatki i nazwać swoją animację, dalej opisać jej kroki w procentach. Następnie, już w elemencie, na który ma oddziaływać, zastosować ją. Ważne jest to, że taka definicja może zawierać w sobie dwa kroki, może zawierać ich sto – są definiowane w procentach. Przykład:

@-webkit-keyframes blink {
  0% {
    background: #000;
    color: #fff;
  }
  100% {
    padding: 50px;
    background: #fff;
    color: #000;
    line-height: 150px;
  }
}

Ważne, żeby korzystać z klatek rozsądnie. Zdefiniowane dużej ilości w momencie, gdy chcemy osiągnąć płynne przejście będzie błędem. Wyobraźcie sobie to na zasadzie biegu ze sztafetą – przy przekazaniu drugiemu zawodnikowi, następuje minimalne zwolnienie – tak samo tutaj, przy przejściu z, powiedzmy, 20% do 40%, nastąpi lekkie spowolnienie. Robiąc animację od 0% do 100%, takiej przerwy nie będzie.

Naturalnie, jeżeli chcemy więcej efektów, dodanie przejść staje się konieczne. Powiedzmy, że od połowy animacji chcemy poruszać kontenerem, ale tak, by na końcu animacji wrócił na stare miejsce. Rozbudujmy zatem kod.

@-webkit-keyframes blink {
  0% {
    background: #000;
    color: #fff;
    top: 0;
    left: 0;
  }
  50% {
    top: 100px;
    left: 100px
  }
  75% {
    top: 150px;
    left: 500px
  }
  100% {
    padding: 50px;
    background: #fff;
    color: #000;
    line-height: 200px;
    top: 0;
    left: 0
  }
}

Jak widzicie, dodałem kolejną klatkę dopiero w 50%, dlatego połowę czasu trwania animacji zajmie kontenerowi #box dotarcie do wyznaczonej lokalizacji, potem przez kolejne trzy czwarte będzie szedł dalej, a potem ostatnią cząstkę wykorzysta na powrót do pozycji nominalnej.

No dobrze, pokazałem tu, jak definiować animacje. Ale jak je uruchamiać? To bardzo proste, przy czym należy pamiętać, że są dwa konieczne elementy do zdefiniowania. I kilka opcjonalnych.

Załóżmy, że uruchamiamy animację kiedy najedziemy na kontener myszą – czyli :hover. Definiujemy zatem

#box:hover {
  cursor: pointer;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 5s;
}

Oprócz zmiany kursora będącej czystą kosmetyką, dodałem dwie opcje – animation-name i animation-duration. Nazwy wydają się być jasne, ale dla formalności – pierwsza to nazwa, którą wcześniej definiowaliśmy, druga to czas trwania całości (czyli od 0 do 100%). Łatwo więc wyobrazić sobie, ile trwają teraz poszczególne przejścia.

Wspomniane wcześniej opcjonalne opcje dodają smaku animacjom, niekiedy naprawdę je ratując.

Ważne na pewno będzie powtarzanie animacji. Bez tego, ona przelatuje tylko raz, potem kończy „żywot”. Z pomocą przychodzi animation-iteration-count. Obsługuje dwie formy – tekst i liczbę. Można ustawić, by animacja powtarzała się sześć razy:

#box:hover {
  -webkit-animation-iteration-count: 6
}

Ale można też tak, by krążyła w nieskończoność:

#box:hover {
  -webkit-animation-iteration-count: infinite
}

Należy pamiętać, żeby w takim wypadku zerować ją, czyli w 100% ustawić takie same opcje, jak przy 0%. Polecam wtedy taką alternatywę:

95% {
  padding: 50px;
  background: #fff;
  color: #000;
  line-height: 200px;
  top: 0;
  left: 0
}
100% {
  background: #000;
  color: #fff;
  top: 0;
  left: 0;
}

Następną ciekawą funkcją jest kierunek – animation-direction. Obsługuje tylko tekst – dwa słowa – normal i alternate. Pierwsza to opcja przypisana z góry, druga to odwrotność, czyli wracanie się animacji. Wykonuje wtedy kroki od tyłu.

#box:hover {
  -webkit-animation-direction: alternate;
}

Dodatkowe funkcje można uzyskać dodając JavaScript, ale o tym kiedy indziej.

Teraz wystarczy wrzucić do pliku html wszystkie te elementy i uruchomić w Chrome lub przeglądarce na telefonie. Prosta animacja naszego autorstwa już działa. Warto pamiętać, że animacja nie musi działać na :hover, może być klasą dodawaną w jakimś wypadku czy nawet zwykłym elementem, tworzonym od razu lub po jakimś zdarzeniu.

Zynga Vieporter

Biblioteka ta stworzona przede wszystkim aby zautomatyzować wypełniania właściwości taga “vieport” i ustawianie rozmiarów ekranu. Dodatkowo umożliwia łatwiejsze osiągniecie trybu pełnoekranowego (kontrolki przeglądarki są ukryte) i pozycjonowania elementów.

To co nas najbardziej zainteresowało (w kontekście gier, które tworzymy) to pełen ekran i dodatkowo detekcja zmiany orientacji telefonu. Niestety w większości nasze gry umieszczane są na portalach w elemencie Iframe i tego niestety Vieporter póki co prawidłowo nie obsługuje. W innym przypadku jednak może być bardzo dobrym rozwiązaniem.

Zynga Scroller

Z kolei ta biblioteka ma ułatwić wewnętrzny scroll elementów(DOM i Canvas). W tej chwili niestety większość popularnych urządzeń mobilnych nie wspiera takiej opcji i jeżeli np. chcemy przesunąć tylko zawartość jednego elementu DIV to trzeba ostro się namęczyć aby działało to bezproblemowo na wszystkich urządzeniach.

Jest to moim zdaniem szczególnie ważne dla twórców gier bo łatwo sobie wyobrazić sytuację gdzie chcemy mieć jednolite nie przesuwalne tło a nad nim element z jakimiś informacjami albo bonusami.

Póki co sami nie mieliśmy okazji tego przetestować bo zawsze udawało nam się obejść te problemy na etapie gamedesignu, ale jeżeli chcecie sami sprawdzić jak to działa poniżej kilka dem stworzonych przez Zyngę.

• Easy Scroller
• DOM Demo
• Canvas Demo
• Paging X-Axis
• Paging Y-Axis
• Snapping to Cells
• Pull-to-Refresh

Zynga’s Jukebox

W tej bibliotece Zynga stara się rozwiązać problem odtwarzania dźwięków. W tej chwili jest to możliwe ale działa to bardzo różnie. Do każdej przeglądarki trzeba podejść indywidualnie biorąc pod uwagę także system operacyjny, czy moc urządzenie.  Problem jest  bardzo złożony i czasami trzeba uciekać się do hacków.  Jukebox ma pomóc w rozwiązaniu tych wszystkich problemów(ze szczególnym uwzględnieniem wydajności na słabszych telefonach).

Dema możecie sprawdzić pod tymi linkami:

• Single Playback Demo
• Multi Playback Demo

Jest także specjalne demo dla urządzeni z systemem IOS. Na tych telefonach i tabletach  można odtwarzać w przeglądarce tylko jeden dźwięk na raz. Czyli zrobienie np. muzyki w tle robi się bardzo problematyczne.  Testowałem rozwiązanie Zyngi na swoim starym iphonie i jako tako działa. Może nie perfekcyjnie ale daje rade. Możecie z resztą wypróbować sami.

• IOS demo

Mam nadzieję, że te biblioteki pomogą Wam w tworzeniu gier i może komuś ułatwią życie.

Źródła:
Zynga Vieporter
Zynga Scroller
Zynga’s Jukebox

Dla ciekawskich:
Blog techniczny Zyngi

Spróbujmy stworzyć więc prostą stronę, która składa się z nagłówka treści i stopki:

  <div class="wrapper">
    <header>display: box example</header>
    <div class="content">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
    <footer>frontend.pl</footer>
  </div>

Chcemy by stopka miała stała wysokość, natomiast nagłówek i treść będą rozszerzały się zależnie od rozmiaru okna. Ponadto w treść zostanie podzielona na 3 kolumny, które też odpowiednio będą zmieniać swój rozmiar.

Przykładowy CSS będzie wyglądał na ten sposób:

    /* Na poczatek resetujemy domyślne wartości dla dokumentu */
    html,
    body{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Tahoma, Arial;
    }

    /* element wrapujący, wymagany by strona rozciągała się na cała wysokość */
    .wrapper{
      width: 100%;
      height: 100%;

      /* chcemy by dzieci tego elementu dostosowywały się do rozmiaru okna */
      display: -webkit-box;
     	display: -moz-box;
     	display: box;

      /* oraz były wyświetlone jeden pod drugim */
      -webkit-box-orient: vertical;
     	-moz-box-orient: vertical;
     	box-orient: vertical;

    }

    .content,
    header,
    footer{
      background: #599908;
      width: 100%;
    }

    footer{
      /* Stopka ma mieć stała wysokość 50px */
      height: 50px;
    }

    header{
      /* Przy pomocy box-flex ustalamy proporcje rozmiarów elementów znajdujących
         się wewnątrz kontenera z display: box, które mają płynnie dostosowywać
         się do jego wielkości. Ustawiona tuatj wartość spowoduje że nagłówek
         będzie zajmowaj 1/6 wysokości - 50px przeznaczonych na stopkę strony */
      -webkit-box-flex: 1;
     	-moz-box-flex: 1;
     	box-flex: 1;
    }

    .content{
      background: #fff;
      /* Treść strony będzie zajmowała 5/6 wysokości, również pomijając stopkę */
      -webkit-box-flex: 5;
     	-moz-box-flex: 5;
     	box-flex: 5;

      /* Ponadto chcemy, by w tresci strony znajdowały się 3 kolumny,
         również dynamicznie dostosowujac się do rozmiaru, tym razem w poziomie */
      display: -webkit-box;
     	display: -moz-box;
     	display: box;
    }

    .left,
    .right{
      background: #99397d;
      /* Boczne kolumny zajmują 2/10 szerokości strony */
      -webkit-box-flex: 1;
     	-moz-box-flex: 1;
     	box-flex: 1;
    }
    .center{
      /* A główna 8/10 */
      -webkit-box-flex: 8;
     	-moz-box-flex: 8;
     	box-flex: 8;
    }

Wynik powyższego kodu można podejrzeć na tym demie.

W powyższym przykładzie skorzystaliśmy z box-orient. Oto co jeszcze mamy do dyspozycji:

• box-orient – definiuje orientację elementów wewnątrz kontenera,
• box-align i box-pack- umożliwiają pozycjonowanie dzieci,
• box-direction – pozwala odwrócić kolejność elementów,
• box-flex – użylismy go już wyżej, służy określeniu proporcji rozmiarów.

Obecnie właściwość tę wspierają Firefox, Chrome, IE od wersji 10, oraz przeglądarki na Adroidach i iOSach. Co ciekawe Opera na chwilę obecną jeszcze nie zaimplementowała tego rozwiązania. Możemy jednak skorzystać z biblioteki Flexiejs, która doda nam obsługę display: box w przeglądarkach, w których wciąż brakuje natywnej implementacji (oczywiście kosztem wydajności). Ponadto na stronie biblioteki można pobawić się wszystkimi opisanymi wyżej wartościami “na żywo”.