Javascriptowe gry w 13kb

Od 2012 roku jest organizowany konkurs na zaprogramowanie gry przeglądarkowej w javascripcie, z tym że limit wielkości pliku z grą to 13kb. Każdy rok ma jakiś temat (słowo) przewodnie, na przykład w 2018 roku takim słowem było „offline”. Wygrana jest niebagatelna, bo (obecnie) powyżej $30k, a zakwalifikowani dostają koszulki i naklejki i gadżety.
No a cały contest prowadzi Polak – Andrzej Mazur. :)

Projekt nazywa się js13kGames.

Mimo że większość gier dopuszczonych do konkursu jest powtarzalna i nieciekawa – zdarzają się mega perełki, które wciągają od pierwszego zagrania. Warto sprawdzić chociażby 3 pierwsze miejsca w każdym roku.

Może kiedyś sam wezmę udział…

Postarzanie zdjęć przez Javascript

W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.

Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.

Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.

Clippy – narzędzie do tworzenia kształtów

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Fancybox pozamiatał wszystkie lightboxy

To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.

Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Sposób na linie w js – dowolnie pochyłe

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Filtrowanie obrazków w locie


CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Pokaz animacji CSS

Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…

Intro na przeglądarkę – znak czasu

Pamiętacie scenowe dema? Wypas graficzny i muzyczny, mający po prostu robić wrażenie. Szczególną formą dem były tzw. intra – czyli wypas graficzny i muzyczny, zamieszczony w pliku o ograniczonej wielkości. Nawet w 1024 bajtach dało się zmieścić kilka fajnych efektów.

Piszę o tym dlatego, że pojawiło się coś, co dla mnie jest znakiem czasu. Otóż pojawiło się właśnie takie intro 1024b, ale … na przeglądarkę. Intro nie jest megaskomplikowane, ale jak na 1 kb (JEDEN KILOBAJT!) wielkości – rzuca na kolana (aby je zobaczyć – kliknij w minaiturę obok). Jednak  nie to jest najważniejsze. Najważniejsze jest to, że dziełko jest zaprogramowane w czymś, co stanowi po części „hack” na przeglądarkę – wykorzystuje jej nietypowe funkcjonalności, a po części jest kodem js.

Zmierzam do tego, że, dla mnie w sposób jasny i widoczny, przeglądarka internetowa została po raz pierwszy potraktowana jak system operacyjny, a nawet jak cały komputer. Panie i Panowie – myślę że można już pełną gęba krzyczeć, ze zdecydowanie wchodzimy w erę wirtualizacji i systemów rozproszonych. To tylko kwestia (niedługiego) czasu – a komputery (o ile to jeszcze będą komputery) nie będą miały dysków, procesorów ani kart graficznych – będą tylko interfejsem, z mocnym łączem internetowym, a utrzymanie, przetwarzanie i generowanie danych będzie się działo „gdzieś tam w sieci”.

Żyjemy w przełomowych czasach – strasznie się z tego cieszę :)