Tag: js

Amiga emulowana w JavaScript

To połączenie moich dwóch światów – webdesignu i Amigi.

Amiga jest już tak bardzo retro, a maszyny liczące tak mocarne, że mogą ją emulować w języku skryptowym na stronie internetowej. I to działa.

No dobra, javascript mocno korzysta z UAE. Ale wciąż – to działa. W przeglądarce. Lokalnie.

Jeśli masz odpowiednie kickstarty (takie amigowe ROMy) i odpowiednie ADFy (czyli pliki będące zmapowanymi amigowymi dyskietkami np. z grami)) to możesz odpalić emulację Ami w przeglądarce w ciągu kilku sekund:

https://scriptedamigaemulator.net/example.htm

Czasem laguje, czasem nie do końca działa, ale w większości przypadków śmiga. Odpaliłem już Workbencha, kilka gierek i kilka dem scenowych. Nic do zarzucenia.

Z resztą, korzystając z AROSa – możesz sam/a przetestować (bez posiadania ROMów czy ADFów): https://scriptedamigaemulator.net/

Jak dla mnie szczękoopad miesiąca.

Mini Miner 64

Jakiś czas temu z moimi synami i z niewielką pomocą AI (ChatGPT 4o wtedy jeszcze – i nie jestem przekonany czy bardziej poprawiał błędy czy może je generował) stworzyliśmy prostą grę w html/js/css.
Na kilka miesięcy o niej zapomniałem, przypomniałem sobie dopiero teraz, toteż zapisuję na blogu dla potomności (i głównie dla siebie samego):

https://codepen.io/uranik/full/xbZrXpV

(ale w kod nie patrzeć, tam straszny śmietnik jest) (aha, i to beta, więc coś może nie działać (na pewno nie działa wziątka przyspieszacza pojazdu))

Na razie wklejam z codepen. Być może kiedyś mi się zachce, to przeportuję na katalog w uranik.pl żeby natywnie było :>
Ok, jest też natywnie: uranik.pl/miniminer64

Jak szybko zbierzesz wszystkie minerałki? :)

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…