Dźwięk w grze
Ciężko znaleźć naprawdę darmowe dźwięki i muzykę w internecie. Zwykle napis "free" w tytule strony prowadza w błąd i później się okazuje, że są ukryte koszty. Jedną ze stron, gdzie możecie ściągnąć naprawdę darmowe dźwięki jest: https://www.dl-sounds.com/. Niezłą kopalnią dźwięków okazał się YouTube.Muzyka w tle
Do tła muzycznego ściąłem dwa utwory. Jeden to łagodna muzyczka, drugi to odgłosy łąki. Aby nie komplikować kodu, postanowiłem połączyć te dwie ścieżki dźwiękowe. Należało też skrócić trwające 14 minut odgłosy łąki. Z pomocą przyszedł mi program open source Audacity.
Jak dla amatora w dziedzinie obróbki dźwięku, program okazał się całkiem prosty w używaniu. Pomimo tego, że posiada wiele opcji, nie trzeba się w nie wgłębiać wykonując podstawowe czynności takie jak przycięcie, przesunięcie lub przyciszenie jednej ze ścieżek.
Zapisany utwór umieściłem w HTML:
<audio id="backgroundSound" autoplay loop>
<source src="sound/background1.mp3" />
</audio>
Jednak nie wszystkim podkład muzyczny może się podobać. Przycisk do wyłączenia muzyki w SVG i teraz każdy może sobie wyłączyć.
Pozostałe dźwięki: klikania, udanego odgadnięcia, porażki i wygranej, także umieściłem w HTML. Javascript po odpowiednim zdarzeniu uruchamia dźwięk.
Mam nadzieję, że takie użycie głosu Google Translate, jest w pełni legalne. W każdym razie nie znalazłem zapisu zabraniającego tego.
Efekty możecie sprawdzić tutaj.
Pewnie niektórzy już widzą, o co chodzi. Pobieram elementy z klasą "no-clicked" za pomocą querySelectorAll, a to o oznacza, że nie operuje na żywym DOM. Kliknięcia zmienią klasy, ale NodeList zostanie taki sam.
var characters = document.querySelectorAll("no-clicked")
Zamiana querySelectorAll na getElementsByClassName rozwiązała problem.
Jeżeli to czytasz ShiroUmizake, to pamiętam o twoich radach z forum. Gdy już gra będzie wyglądała zadowalająco to zabiorę się za dodawanie renderów i przekształcenie kodu na modułowy.
<source src="sound/background1.mp3" />
</audio>
Jednak nie wszystkim podkład muzyczny może się podobać. Przycisk do wyłączenia muzyki w SVG i teraz każdy może sobie wyłączyć.
Pozostałe dźwięki: klikania, udanego odgadnięcia, porażki i wygranej, także umieściłem w HTML. Javascript po odpowiednim zdarzeniu uruchamia dźwięk.
Dźwięki liter
Nie udało mi się znaleźć dźwięków liter po angielsku, ale i z tym sobie poradziłem. Z pomocą przyszedł mi Google Translate. Tłumaczyłem każdą literę, po czym otwierałem DevTools Chrome, wchodziłem na zakładkę Network, następnie wybierałem link zaczynający się od "translate ..." i otwierałem w nowej zakładce. Teraz wystarczyło "ctrl+s" i plik dźwiękowy litery lądował w bibliotece.
Efekty możecie sprawdzić tutaj.
A teraz z innej beczki, bug odkryty i zlikwidowany
W poprzednim wpisie napisałem, że wykryłem buga, przez który kliknięte postacie nie zachowywały się, jak powinny. Niekiedy chowały się trzy, niekiedy wszystkie. Po przestudiowaniu algorytmu wydawało mi się, że wszystko jest w porządku.Pewnie niektórzy już widzą, o co chodzi. Pobieram elementy z klasą "no-clicked" za pomocą querySelectorAll, a to o oznacza, że nie operuje na żywym DOM. Kliknięcia zmienią klasy, ale NodeList zostanie taki sam.
var characters = document.querySelectorAll("no-clicked")
Zamiana querySelectorAll na getElementsByClassName rozwiązała problem.
Co następne?
Już przyszła pora na opracowanie ekranu powitalnego i menu startowego. Niektórych może razić jakość kodu. Wiem, że jest trochę do poprawy i tym zajmę się w ostatnim tygodniu trwania konkursu.Jeżeli to czytasz ShiroUmizake, to pamiętam o twoich radach z forum. Gdy już gra będzie wyglądała zadowalająco to zabiorę się za dodawanie renderów i przekształcenie kodu na modułowy.
Komentarze
Prześlij komentarz