Wesprzyj na Patronite ► https://patronite.pl/pasja-informatyki
Trzeci odcinek kursu pozwoli nam zrozumieć jak w JavaScript przetwarzane są napisy, czyli tzw. łańcuchy (stringi). Oczywiście moglibyśmy potestować zachowanie się łańcuchów na jakichś przykładowych sentencjach, ale to by było nudne. Zamiast zajmować się na sucho takimi klasykami, wypłyńmy na nieco głębszą wodę i zróbmy sobie dzisiaj grę komputerową, która będzie operować na łańcuchach. Znamy ją myślę wszyscy – nazywa się wisielec, albo szubienica.
▬▬▬▬▬▬▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬▬▬▬▬▬▬▬
PLIKI DO ODCINKA:
http://miroslawzelent.pl/kurs-javascript/przetwarzanie-lancuchow-gra-wisielec
DOBROWOLNE WSPARCIE:
http://patronite.pl/pasja-informatyki
http://miroslawzelent.pl/dobrowolna-darowizna/
CODE REVIEW NA FORUM:
http://bit.ly/code-reviews-odcinkow
TRENAŻER EGZAMINACYJNY:
http://egzamin-informatyk.pl/
▬▬▬▬▬▬▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬▬▬▬▬▬▬▬
MUZYKA:
Muzyka w intro:
Runaways – YouTube Audio Library: https://youtu.be/wyCp0cqPL3Y
Muzyka z podsumowania:
Crimson Fly – Huma-Huma: http://youtu.be/-D2gn7pjxWU
▬▬▬▬▬▬▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬▬▬▬▬▬▬▬
ZAPRASZAMY:
http://pasja-informatyki.pl/
http://bit.ly/pasja-fb
http://bit.ly/pasja-gplus
http://egzamin-informatyk.pl/
http://miroslawzelent.pl/
http://forum.pasja-informatyki.pl/
Tweets by stelmach_damian
Tweets by MiroslawZelent
http://bit.ly/pasja-itunes
Original source
25 responses to “Kurs JavaScript odc. 3: Gra w wisielca. Przetwarzanie łańcuchów”
Ja alfabet zrobiłem ręcznie
Świetny materiał, aż głowa mnie boli od ilości wiedzy 🙂
2:15
Co to za tajemnicze i lekko przezroczyste liczby?
6 5 19 20 9 14 1 12 5 14 20 5
Wiecej.. wiecej.. wiecej.. To jest ciekawsze od Uncharted 4, czy Horizon: Zero Down..!!!
panie miroslawie niech pan kontynuuje swoją robotę!
Umie ktoś wyjaśnić dlaczego dodając tą linijkę w html-u
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
sprawiam iż plik js nie może dołączyć? Gdy go usuwam wszystko śmiga, jak tylko wpisze, nagle ciemno.
Polecam dodać do css'a linijki (np. pod element body):
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Zapobiegają one możliwości zaznaczania tekstu, co bardzo denerwuje przy wciskaniu kilkakrotnie jednego przycisku. Estetyczniej wtedy to wygląda. To jedynie dodatek, ale fajnie to wygląda 😀
Mirosławie troszkę się pomyliłeś przy 33 i 34 literce w tabeli 😀 W alfabecie polskim 2 ostatnie litery są w tej kolejności: Ź Ż natomiast Ty napisałeś na odwrót. Wiem, że napisałem to dosyć późno, ale oglądam drugi raz dla przypomnienia (sam tworzę podobną stronę) i dopiero teraz to zauważyłem. Minuta: 49:03
1:24:00
Super!
czy ma ktos pomysl jak napisac tak żeby pierwszy gracz wpisal haslo a drugi je odgaduje
48:00 Można było też zrobić var litery="aąbcćdeęfghijklłmnńoópqrsśtuvwxyzźż";
Swietne jak zawsze, pozdrawiam i czekam na wiecej!
Jak wczytać wszystkie obrazy podczas wczytywania się pierwszej strony?
Chodzi o to, że kolejne obrazy wczytywane są dopiero w momencie kliknięcia złej litery, a w przypadku gorszego połączenia internetowego, zanim obraz się załaduje minie kilka sekund, a to powoduje laga w grze… 🙂 gdyby wszystkie obrazy zostały pobrane od razu po wczytaniu się strony, wtedy następowałoby jedynie podmienianie obrazków, a nie ich pobranie i dopiero podmienienie, a to umożliwiłoby płynną rozgrywkę bez zbędnych zacięć 🙂
W podsumowaniu jest błąd
napis.toUpperCase(); zamiana na małe litery
napis.toLowerCase(); zamiana na DUŻE litery
powinno być na odwrót
pozdrawiam
Dzięki Tobie, spodobało mi się programowanie!! Dzięki 🙂
nie każdy zdaje sobie sprawę ile pracy wymaga przygotowanie tutoriala z takim flow i jednocześnie wysoką wartością merytoryczną… szacun 🙂
Witam. Jestem wielkim fanem kanału, fajnie że szybko to się tak rozwinęło, widzów przybywa. Wszystko super. Ale z drugiej strony nie uczył bym młodych złych nawyków, takich jak innerHTML czy onClick w htmlu. I od samego początku pisać już po angielsku żeby wyuczyć sobie ten nawyk. Mam nadzieję że na wszystko przyjdzie z czasem 🙂 Pozdrawiam serdecznie, nie jestem hejterem. Obejrzałem dużo filmików, dobra robota, ale nasunęła mi się właśnie taka myśl.
Nie wyświetla mi polskich znaków. Co dziwne, jak otwieram gotowy skrypt pana Mirosława, to działa. Sądziłem na początku, że mam literówkę w moim kodzie, ale kopiuje fragmenty kodu z gotowego skryptu i też nie działa. Jakieś pomysły? Z góry dzięki!
W jakim odcinku znajdę coś na temat testów, wiem, że oglądałem. Z góry dzięki.
Zrobił ktoś kod do losowania hasel?
Witam,
Według mnie kod ten jest już dość zaawansowany. Próbowałem zrobić całą grę sam, bez pańskiego filmiku i naprawdę ciężko i topornie to szło, można się w tym wszystkim pogubić. Jednak będę się starać by osiągnąć to do perfekcji, zwłaszcza tą logikę żeby wszystko jasno i przejrzyście się ze sobą wiązało 🙂
Witam Panie Mirosławie. Mam pytanie, jeśli nie rozumiem przedstawionego tutaj przykładu, co powinienem zrobić? Czy ma Pan jakieś propozycje książek albo kursów dla wyjątkowo opornych?
Na serio, przepisuje kod ale nie wiem zupełnie co sie dzieje. miałem styczność z programowaniem w techinkum, przerobiłem cały kurs HTML i CSS, wszystko jasne, ale tutaj, nie rozumiem zupełnie działania tego programu, wszystko wydaje sie cholernie skomplikowane
Mam problem, gdy wpisuję pętlę odpowiedzialną za wypisanie divów z literkami, nie układają się one jeden przy drugim, lecz każdy w nowej linijce (jednak na szerokości diva alfabet). Wklepałem w css float: left; a problem ciągle mnie dręczy. Pomoże ktoś?
litery w jednej lini kodu:
var litery = ["A","Ą","B", "C", "Ć","D", "E", "Ę", "F", "G", "H", "I", "J", "K", "L", "Ł", "M", "N","Ń", "O","Ó", "P","Q","R", "S","Ś", "T", "U", "V","W", "X", "Y", "Z", "Ź", "Ż"];