maciejpedzich/tis-pl

Spolszczony klon Tetrisa w 4 kB kodu JavaScript

Tis PL

Oryginaly projekt autorstwa Thomasa Ten Cate znajdziesz tutaj. Ja go tylko przełożyłem na język polski.

Wypróbuj demo Tis PL z kodem źródłowym w tle.

Tis PL to spolszczony, samowystarczalny (tj. bez bibliotek) klon gry Tetris® w niecałych 4 kB czystego kodu JavaScript (ECMAScript 5), włącznie z generowaniem niezbędnych znaczników HTML oraz styli CSS.

Tis PL może być dołączony do każdej strony internetowej poprzez dodanie znacznika <script>. Można go aktywować jako tzw. easter egga, wprowadzając kod Konami.

Funkcje

Tis posiada niemal wszystkie funkcje, których możesz się spodziewać po nowoczesnym Tetrisie:

• Wszystkie siedem kształtów tetromino.
• Możliwość ich poruszania oraz obracania.
• Powtarzanie klawiszy.
• Przyspieszanie i upuszczanie bloków.
• Blok duch, czyli podgląd miejsca tetromino.
• Opóźnienie zablokowania pozycji bloku.
• Losowy wybór kolejnych bloków.
• Animacja usunięcia linii.
• Podgląd następnego tetromino.
• Nieskończona liczba poziomów, im wyższy poziom tym bloki spadają szybciej.
• Wynik zależny od obecnego poziomu oraz liczby usuniętych linii.
• Animowany ekran końca gry.
• Efekty dźwiękowe.
• Muzyka z sopranem i basem.

Brakujące funkcje

• Przyznawanie punktów za tzw. T-spiny oraz usuwanie linii odzdzielonych przez inną linię.
• Miejsce na tetromino na później.
• Podgląd kilku kolejnych bloków jednocześnie.

Stosowanie

Po prostu pobierz tis.min.js z tego repozytorium, umieść plik gdziekolwiek chcesz na serwerze i wstaw poniższe przed znacznikiem </body> w kodzie HTML:

<script src="/sciezka/do/tis.min.js"></script>

Teraz, odwiedzający stronę otrzymają miłą niespodziankę po wprowadzeniu kodu Konami.

Uwagi odnośnie implementacji

Aby kod był w miarę rozsądny, musi polegać na UglifyJS w celu nadawania nowych nazw zmiennym, usuwania klamr i innych niuansów. Mimo to, wiele rzeczy należało napisać własnoręcznie. W tej sekcji opisano wszystkie wykorzystane w projekcie sztuczki.

HTML/CSS

• Wyodrębnianie wspólnych części kodu HTML i CSS do łańcuchów, na przykład: '<div style="margin:'.
• Używanie pc zamiast px w stylach CSS; 1 pica odpowiada 16 pikselom.

Dane gry

• Muzyka została zakodowana jako łańcuch znaków, gdzie każdy znak reprezentuje zarówno tonację, jak i czas odgrywania nuty
• Kształty tetromino w poszczególnych obrotach przedstawiono w postaci mask bitowych, ale ponieważ nie da się w sposób efektywny zakodować bajtów powyżej 127 w UTF-8, zakodowano je w Base64.
• Tabele kolizji bloku ze ścianą zakodowano jako łańcuchy, gdzie każdy znak odpowiada pojedyńczemu przesunięciu wzdłuż osi x oraz y.
• Kolory tetromino również przedstawiono w postaci łańcuchów w stylu #fff (oczywiście bez #), oddzielonych znakiem 9. Korzystamy z cyfry, ponieważ nie musimy jej wtedy otaczać cudzysłowami w metodzie Array.split().
• Efekty dźwiękowe zakodowano jako pojedyńcze liczby, przeznaczając kilka bitów dla szybkości zanikania, kilka kolejnych dla pierwotnej częstotliwości, a pozostałe przeznaczono na częstotliwość po odtworzeniu 1000 (1e3) próbek.

JavaScript

• Nazwy globalnych obiektów (takich jak window, document) oraz często wykorzystywanych daych/metod przechowywane są w zmiennych dla krótszego dostępu.
• Zamiast document.getElementById(...), korzysta się z faktu, że elementy są z przypisanym id są zarejestrowane w obiekcie window, a elementy te odczytujemy poprzez window[...].
• Ponieważ deklaracje zmiennych są kosztowne, należy je wykonywać w zasięgu globalnym i wykorzystywać je ponownie tyle razy, ile to możliwe. Utrudnia to bezpieczną inwokację funkcji.
• Należy zastępować wywołania funkcji jej ciałem, ponieważ słowo function jest okropnie długie.
• Niech undefined będzie pożądaną pierwotną wartością każdej możliwej zmienniej, w celu uniknięcia konieczności ich inicjalizacji.
• Trzeba mieć świadomość, że zapis for(i in a) stanowi alternatywę dla for(i=0;i<n;i++). Jednakże nie jest to zawsze zapis krótszy, bo tradycyjna pętla for pozwala na umieszczenie warunku wykonywania instrukcji oraz wyrażenie zwiększenia/zmniejszenia wartości zmiennej
• Umieszczaj przyporządkowania wartości wewnątrz wyrażeń gdziekolwiek to możliwe: zamiast x++;y=2*x, pisz y=2*x++.
• x>=0&&x<4 możesz zastąpić !(x&~3). Działa to nawet wtedy, gdy x jest ujemne.
• Korzystaj z ~~(a+b) zamiast Math.floor(a+b) aby otrzymać liczbę całkowitą. 0|(a+b) również zadziała.
• Dla arbitralnych stałych, 9 jest lepsze niż 10, a 99 lepsze niż 100.
• switch/case jest strasznie rozwlekłe, szczególnie kiedy potrzebujesz break (czyli praktycznie zawsze). Po prostu używaj zamiast tego if/else if.
• Istnieje również etykieta (label) działający jak goto, aby przerwać dwie pętle for jednocześnie. To chyba jedyne sensowne zastosowanie etykiet w języku JavaScript.