Konfigurator giftów dostępnych w 'przykładowym" sklepie'. Strona z listą dostępnych przedmiotów za pomocą HTML / PHP przekazuje id wybranego produktu do kolejnej strony, na której bazując na przesłanym "id" wczytywane większe zdjęcie produktu, na które klient może dodać swoje logo, przeskalować je, obrócić oraz ostatecznie zapisać / pobrać stworzoną przez siebie wizualizację na dysku. Skrypt stworzony w oparciu o AI Gemini od Google.
Przetestuj...Próba (jak widać udana) stworzenia pseudo obrotu 'trójwymiarowego' modelu na stronie WWW. Pseudo, poniewa ruch mysza powoduje podmianę gotowych renderów obiektu - plików jpg (animacja obrotu modelu o 360 stopni). Dokładnie 40 klatek. Projekt stworzony na wzór płatnego rozwiązania znalezionego w internecie. Wszystkie zdjęcia (rendery) są wcześniej pobierane do pamięci przeglądarki aby uniknąć opóźnienia podczas rozpoczynania animacji (czas potrzebny na pobranie zdjęć dopiero gdy są potrzebne). HTML, CSS, JavaScript.
Przetestuj online...Prosta gra typu „pamięć” w której aby wygrać musimy dopasować do siebie 2 takie same symbole. Skrypt napisany w JavaScript w oparciu o HTML i wzbogacony odpowiednimi stylami CSS. Za poprawne dopasowanie gracz nagradzany jest 20 punktami, błędne dopasowanie to -5 pkt. próba „oszukiwania” karana jest -20 pkt. Przy każdym uruchomieniu gry kafelki rozkładane są losowo (pseudo losowo). Gra stworzona na bazie tutoriala znalezionego w internecie i nieco rozbudowana, dodana grafika, dźwięki i efekty znikania kafelków. Jak na jeden z pierwszych projektów myślę że wyszło fajnie.
Zagraj online...Skrypt stworzony w JavaScript oraz HTML + css. Skrypt ma za zadanie sprawdzić, czy prostokąty (lub kwadraty) o podanych wymiarach i 'środkach' przecinają się, znajdują się jeden w drugim, ,lub są zupełnie rozdzielone. Teoretycznie zadanie było do wykonania w konsoli (w oryginale do napisania w języku JAVE), ale skoro HTML i JS dają takie, możliwości - czemu nie spróbować przedstawić tego zadania graficznie przy pomocy elementy canvas. Zadanie zaczerpnięte z: Y. Daniel Liang "Wprowadzenie do Javy. Programowanie i struktury danych".
Przetestuj...Skrypt JavaScript oraz HTML i SCC umożliwiający tworzenie własnych etykiet i zapisywanie ich do pliku pdf nadającego się do druku. Skrypt umożliwia ustawienie wymiaru etykiety (ze spadami) wczytanie logotypu w formie pliku png lub jpg, wpisanie wybranych treści etykiety, zmianę koloru oraz wielkości czcionki a także wczytanie kodu kreskowego (EAN) - plik SVG. Po kliknięciu „gwiazdki” w prawej części menu pobrana zostanie paczka przykładowych plików do przetestowania skryptu. Po kliknięciu „print” użytkownik ma wybór, czy chce wydrukować plik, czy zapisać pdf. Istnieje też wstępna opcja importowania danych z pliku csv oraz wybór między dwoma szablonami etykiety. Dwie ostatnie opcje przygotowane bardziej dla sprawdzenie, czy taka opcja zadziała.
Przetestuj...Jak widać – prosta gra bazująca wstawianiu we wskazane miejsce na przemian „O” lub „X”. Wygrywa ten kto stworzy linię. Po każdym wstawieniu O lub X skrypt sprawdza wszystkie możliwości ustawiania znaków – a w zasadzie sumę każdej możliwej linii.
Zagraj online...Kto nie pamięta „konsoli” gier na 2 baterie paluszki w której było pełno gier bazujących na „kwadratowych” klockach. Tetris, jakieś samolociki i samochodziki. Poniżej gra wzorowana właśnie na wyścigach z takiej konsoli.
Zagraj online...Jakże skomplikowana gra :) Tak, to najzwyklejsza gra w kamień, papier, nożyce z komputerem. Gracz wybiera swój „symbol” a następnie następuje losowy wybór symbolu przez skrypt. Bardziej chodziło o losowanie randomowych liczb oraz o zabawę stylami CSS i animacją elementów za pomocą CSS.
Zagraj online...Jako że w firmie mieliśmy przez pewien czas małe zamieszanie z tworzeniem banerów, pomyślałem, że fajnie byłoby mieć taki skrypt, który byłby dostępny nawet na telefonie, aby każdy z potrzebujących w razie braku grafika mógł sobie stworzyć baner na własne potrzeby (tak, wiem, jest Canva). Ale bardziej chodziło o samo sprawdzenie czy się da. No i jak widać da się. Do wyboru są różne rozmiary banerów, (i) informacja, możliwość przesuwania wczytanego zdjęcia, zmiany kolory tła. Przygotowany w ten sposób baner można pobrać na dysk jako plik jpg.
Przetestuj...Prosta "gierka" stworzona ... po przejrzeniu książki "JavaScript for kids". Parę pomysłów na "aplikacje" się tam znajdzie. Gra polega na klikaniu na mapie aby znaleźć ukryty skarb (lokalizacja skarbu losowana przy każdym przeładowaniu strony). Skrypt podaje odległość kliknięcia od skarbu (obliczany na podstawie twierdzenia pitagorasa).
Zagraj...Skrypt stworzony w ramach propozycji rozwiązania problemu rónych zdjęć (pion, poziom, kwadrat) w firmowej stopce mailowej. Takie proste rozwiązanie, aby każdy pracownik miał wstawione w stopce takie samo, kwadratowe zdjęcie, bez kombinowania, bez szukania kogoś do kadrowania zdjęć. Wgrywamy zdjęcie, przeskalowujemy i pobieramy plik png (w tej wersji już z zaokrąglonymi narożnikami).
Przetestuj...Gra stworzona w ramach kursu JavaScript wykupionego na portalu Udemy. Jak widać udało się ukończyć kurs, stworzyć grę i nawet zdobyć certyfikat :) Dzięki temu kursowi powstała np. gra wyścigowa „brick game” powyżej. Także zdobyta wiedza nie poszła w las. A i sama gra o „zabójcy ufoków” zostałą troszkę zmodyfikowana.
Zagraj online...A tu już typowa strona WWW mająca na celu przetestowania animacji za pomocą styli css. Projekt zainspirowany animacją zobaczoną na Pinterest. Na laptopach full HD działa, na telefonach się nie skupiałem, więc najpewniej wszytko się rozjeżdża :)
Zobacz...Każdy z nas napewno grał na kartce w statki – tutaj uproszczona wersja elektroniczna. Tak naprawdę cała ta „gra” miała na celu przetestowanie dynamicznego tworzenie elementów strony w HTML za pomocą skryptu JavaScript. Każde z pól gry jest oddzielnym elementem div z odpowiednio ustawionym tłem. Strzały komputera to losowo wybierane pole z listy wszystkich dostępnych pól . Niestety losowe wybieranie pola i sprawdzanie jego dostępności do strzału zawieszało przeglądarkę, stąd w ramach optymalizacji pomysł z listą pól i usuwaniem pola w które został już oddany strzał. Działa, da się zagrać, czyli zamierzony efekt został osiągnięty. Czy da się lepiej ? Napewno, napewno .. czas pokaże…
Zagraj online...