Chciałbym znów poprosić osoby mające doświadczenie w programowaniu webowym o ocenę mojego kolejnego projektu, przykładowej "gry" w Javascripcie. (Tutaj link do poprzedniego wątku, gdyby ktoś chciał).

Tym razem miałem dość szamotania się z serwerem lub/oraz z PHP, więc postanowiłem użyć jedynie HTML, CSS oraz Javascript. Przy czym jest to czysty Javascript, bez żadnych bibliotek (przynajmniej na razie, póki nie znajduję dla nich zastosowania). Pisząc w CSS korzystałem jak poprzednio z metodologii BEM (Block, Element, Modifier; http://getbem.com/).

Stronę jak poprzednio udostępniam na GitHubie. Chodzi mi najbardziej o ocenę kodu źródłowego. Tym razem jednak można od razu zobaczyć, jak wszystko działa, ponieważ skoro strona nie używa serwera, mogłem ją udostępnić również na GitHub Pages (link niżej).

Co mnie najbardziej interesuje?

  1. Ocena kodu Javascript – czy użyłem odpowiednich funkcji w odpowiednich miejscach, czy nie ma niepotrzebnych lub za mało zmiennych, czy nie da się zoptymalizować pod jakimkolwiek kątem itp.
  2. Kompatybilność Javascriptu z najróżniejszymi urządzeniami mobilnymi i niemobilnymi, z różnymi systemami i przeglądarkami – jakie macie na stanie. :)
  3. Responsive design (szeroko rozumiany).
  4. Projekt kodu (np. modułowość, rozplanowanie kodu w plikach, funkcjach, metodach i skryptach).
  5. Dokumentacja, czyli README oraz Wiki na GitHubie – kwestie: przejrzystości, czytelności oraz poprawności językowej, bo napisałem ją po angielsku.
  6. Czytelność i zgodność z dobrymi praktykami pisania w HTML, CSS i Javascript.
  7. Może da się gdzieś wykorzystać jakiś framework lub bibliotekę, np. Bootstrap, JQuery, Angular? W ramach nauki bardzo bym chciał, ale tylko tam, gdzie się da (a nie na siłę).
  8. Każda inna uwaga będzie mile widziana.

Przy czym, tym razem miałbym do was pytanie specjalne nr 9, w zasadzie najważniejsze, ale najbardziej szczegółowe, dlatego daję na końcu:
9. W grze poruszają się kulki. Nie jest ich wiele (max 20), ale przy ponad 10 już zaczynają zwalniać. Ich ruch zrobiłem za pomocą funkcji setInterval – za każdym przejściem obliczam na nowo ich pozycję, piksel po pikselu. Prędkość nadaję im według wzoru v = s {piksele} / t {milisekundy}. Spójrzcie proszę w kod i powiedzcie, jak można je przyspieszyć, ja nie mam pomysłu. Coś czuję, że chodzi tu o dostęp do DOM-u (czytałem, że jest wolny) – a tego u mnie nie brakuje, ale znów nie mam pomysłu, jak go ograniczyć. Jest tam też kilka pętli, może to ich kwestia, ale też nie mam pomysłu, jak z nich zrezygnować.

Jak poprzednio myślę, że treść strony mówi sama za siebie; jeśli nie, pytajcie tutaj, wyjaśnię, co będzie trzeba. Starałem się wszystko opisać na Wiki (link niżej); jeśli coś jest niejasne, mówcie, to zmienię.

Link do kodu: https://github.com/silvuss/silvuss-jsgame-1
Link do wersji online (GitHub Pages): https://silvuss.github.io/silvuss-jsgame-1/
Link do Wiki: https://github.com/silvuss/silvuss-jsgame-1/wiki

Jak poprzednio, mała uwaga: jeżeli ktoś ma konto na GitHubie, to w ramach nauki GitHuba bardzo chętnie przeczytam tam uwagi, także bezpośrednio do kodu. Tylko bardzo proszę o podanie tam swojego nicku na 4programmers (jeśli komentujący posiada), żebym po prostu wiedział, kto zacz.