Programujemy grę Sliding Puzzle w JavaScript
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- W tym filmie pokazuje Wam, jak użyć JavaScriptu w połączeniu z HTML i CSS, żeby tworzyć gry! Jest to super sposób na naukę front-endu. Zapraszam!
Nasza grupa na FB: / zaczynamy.programowac
Odwiedź nasz fanpage: / jakzaczacprogramowac
Subskrybuj: / @jzp
Zapisz się na newsletter: jakzaczacprogr...
Link do gry na githubie: github.com/kaa...
Bardzo dobry i ciekawy film naprawdę sie wiele można nauczyć
Hej, sory za odkop, ale czy ktoś może mi wytłumaczyć w jaki sposób działają te ify z 25:25, skoro jeśli if nieważne czy zwraca true czy false to wykonują się dokładnie te same czynności? Dokładniej chodzi o linijke 49 i 63 - przed i za else jest ten sam kawałek kodu. No chyba że ja czegoś nie widzę :D
Polecam ustawić font-size: 0px; dla .tile
Chciałem dodać swój obrazek do gry. Zmieniłem mu wartości: 300px na 300px. Po wpisaniu tych dwóch linijek kodu na końcu: column.style['background-position-x'] = `-${rowIndex * 100}px`;
column.style['background-posiotion-y'] = `-${columnIndex * 100}px` widzę jedynie część mojego obrazka powielonego w kilku kawałkach zamiast całego. Czegoś tu nie wychwyciłem.
Rozumiem że jak przekazujemy do funkcji obiekt to działami na tym obiekcie w pamięci i modyfikujemy go tak?
Bo jak to jest że robiąc appendChild mamy jakby zerowanie aktualnych dzieci że dodaje się 9 nowych a nie że mamy np. 18 itd?
Zgadza się
@@JZP ale jak to się dzieje że te elementy dzieci się nie powielają skoro dodajemy 9 nowych ale poprzednie też są w DOM?
@@rmateooo Zobacz, że render wywoływane jest tylko raz. Potem już po prostu przesuwamy elementy.
11:23 Niestety ale gameTiles u mnie nie dziala prawdopodobnie przez to ze zle stawiam nawiasy, ale nie wiem jak one maja byc dokladnie postawione
A jesteś w stanie udostępnić swój kod na githubie albo na codepenie, żeby podpowiedzieć Ci co poprawić?
@@JZP Akurat z tym sobie poradziłem już sam, ale tutaj 15:34 kiedy naciskam na cos pisze ,,undefined undefined"
const gameTiles = document.querySelectorAll('.tile');
const gameBoard = document.querySelector('#game-board');
const gameState = [
[gameTiles[0], gameTiles[1], gameTiles[2]],
[gameTiles[3], gameTiles[4], gameTiles[5]],
[gameTiles[6], gameTiles[7], gameTiles[8]],
];
gameBoard.addEventListener('click', (event) => {
const target = event.target;
let x, y;
gameState.forEach((row, rowIndex) => {
row.forEach((column, columnIndex) => {
if (column === target) {
x = rowIndex;
y = columnIndex;
}
});
});
console.log(x, y);
});
@@lukaszqw Zrobiłem sobie potrzebną strukturę (#game-board i 9 .tile w nim). Potem skopiowałem Twój kod i działa poprawnie. Zobacz, czy masz odpowiednio ułożony HTML i czy w tablicy gameState faktycznie znajdują się wszystkie elementy a nie 9 razy "undefined".
Uwaga oto BUG wywołany metodą COPY-PASTE: th-cam.com/video/dOxrZ3F_gu8/w-d-xo.html
na szczęście późniejsze zmiany wszystko naprawiły...
Kiedy kurs angielskiego
Bardzo dobry kanał, mnóstwo przydatnej wiedzy, oby było tego więcej :)
Hej, oglądnęłam już kilka filmów z Waszego kanału, zrobiłam z Wami CV. Chciałam teraz zrobić tę grę ale już na początku utknęłam. Po wpisaniu nic mi się automatycznie nie uzupełnia dalej. Jestem zupełnie początkująca więc będę wdzięczna za wskazówkę co robię źle. Może to w ustawieniach VSC?
27:20 przykładowym uproszczeniem mogłoby być policzenie różnicy w ixach i igrekach między pustym a klikniętym polem i sprawdzić, czy suma tych dwóch różnic daje nam 1
mam pytanie to tzreba robic wszystko po kolei jak pan ?
Cześć! W materiale staram się iść krok po kroku, tak aby najłatwiej było zrozumieć co robię. Oczywiście, możesz robić materiał szybciej albo samemu implementować poszczególne partie jeśli wiesz co robisz ;)
Pozdro!
dziękuję człowieku, uratowałeś mi życie
Bardzo wartościowy film! Podoba mi się sposób, w jaki tłumaczysz, bo nie od razu podajesz ostateczną wersję gry tylko pokazujesz jak dochodziłeś do poszczególnych rozwiązań i jak je ulepszałeś.
Muszę popracować nad umiejętnością rozwiązywania problemów programistycznych i rozkładania ich na czynniki pierwsze.
Spróbuję napisać podobną grę nie zaglądając do Twojego kodu :)
Super materiał i ciekawe tipy!
Daje suba i będę Was odwiedzał chłopaki!
spróbujcie zrobić arkanoid!
x + y == emptyX + emptyY - 1 || x + y == emptyX + emptyY + 1
W konsoli nie pokazywalo mi sie nic
No fajnie tylko żeby zacząć grę to elementy muszą być pomieszane i za każdym startem gry inaczej. Jak to zrobić?
Jest to dość skomplikowany problem. Można randomowo wykonywać dostepne ruchy i tak pomieszać planszę albo zaimplementować specjalny algorytm mieszający. Tutaj opisane jak to zrobic developerslogblog.wordpress.com/2020/04/01/how-to-shuffle-an-slide-puzzle/
Super film! Czekam na więcej takich poradników :)
Super! Cieszę się, że film Ci się podobał :)
Super, większość podstawowych komend już znam a nie wpadłbym na uczenie się ich w ten sposób. Czekam na więcej
Świetne! Jako początkujący jestem zaskoczony jak można "poniewierać" DOMem przez js...
i jak ważne w tym zawodzie jest myślenie abstrakcyjne. Sam bym nie wpadł na ten sposób zrealizowania gry.
Róbcie wiyncyj!
Super, że film Ci się spodobał! Dzięki za dobre słowo.
Jeśli chciałbyś mieć trochę większy wpływ na treści naszych filmów, to zapraszamy na naszą grupę na FB. Co jakiś czas pytamy się tam o to co interesuje naszych widzów!
Pozdro,
Kacper
ja bym chciał link tego programu w którym ty to robisz ale no naprawdę to mi się przyda
Siema! Program nazywa się Visual Studio Code jest dostępny za darmo. Dodatkowo mam zainstalowany plugin Prettier, który formatuje mi kod ;)
Bardzo dziękuję
Fajnie, spróbuję jutro :)
Cieszę się. Powodzenia ;)
nie zrozumiałem, nie znam polskiego
A co jeżeli css html i js zapisuja sie jaka oddzielne pliki?
Nie bardzo rozumiem, czy mógłbyś rozwinąć? W tutorialu kod HTML, CSS I JS są w oddzielnych plikach.
Html i js sie zapisuja normalnie a css w formie notatnika, przez co kod nie dziala
@@piotrburak9067 A jakiego edytora używasz?
@@JZP visual studio code
@@piotrburak9067 Spróbuj użyć funkcji Plik -> Zapisz jako i upewnij się, że wpisujesz rozszerzenie .css po nazwie pliku.
Bardzo ciekawy projekt. Mam jedną prośbę, czy jesteś wstanie dograć film, w którym ten projekt, będzie posiadał możliwość automatycznego i losowego mieszania kostek Puzzli ? Pozdrawiam
Cieszę się, że Ci się podobało! W pierwotnej wersji planowałem, aby gra miała opcję automatycznego mieszania. Nie dodałem jej bo okazuje się, że nie jest to takie proste i film rozciągnąłby się pewnie dwukrotnie. Jest na to kilka metod - tutaj jest fajny opis developerslogblog.wordpress.com/2020/04/01/how-to-shuffle-an-slide-puzzle/. Mamy już zaplanowane kilka filmów w przód. Nie mogę nic obiecać, ale może taki film kiedyś się pojawi. Bardzo zachęcam Cię do użycia mojego kodu z Githuba i spróbowania napisania tego samemu! Może to być świetny projekt. Jeśli się zdecydujesz, to nie zapomnij podzielić się efektami!
@@JZP Dziękuję za odpowiedź i podpowiedź. Uczę się od 4 miesięcy front-endu i powoli zamierzam zrobić swój projekt, zainspirował mnie wasz projekt. Poza możliwością mieszania Puzzli ,chcę zrobić możliwość wybory obrazka oraz wielkości Sliding Puzzle, a połączenie całości ze stoperem zliczającym czas rozwiązywania Puzzli, wydaje się ciekawym projektem. Jednak zastanawiam się czy zdołam sobie z tym poradzić w najbliższym czasie. Pozdrawiam.
@@pawes.3096 Super, brzmi jak świetny projekt. Ja bym do tego podszedł w takiej kolejności:
1. Zmiana wielkości puzzla,
2. Wybranie obrazka,
3. Mieszanie,
4. Mierzenie czasu.
Jestem przekonany, że jeśli będziesz konsekwentne dążył do celu, uczył się, spędzisz sporo czasu nad rozwiązaniem zadania to na bank Ci się uda. A ile się przy tym jeszcze nauczysz! Powodzenia i nie zapomnij podzielić się wynikami :)
@@JZP Dzięki za potwierdzenie kolejności bo w głowie miałem tą kolejność :) Gdy projekt będzie gotowy na pewno się podzielę. Obecnie pracuję nad stroną (dodatek do CV i umieszczę tam cztery projekty. Puzzle będzie największym). Pozdrawiam i czekam na kolejne Wasze filmy.
@@pawes.3096 i jak? Zrobiłeś losowanie? Chciałbyś się może podzielić jeśli ci się udało?
tylko jak zrobić żeby tile były pomieszane od początku?
Są na to przynajmniej dwa sposoby - prosty i wolny oraz szybki i trudny ;) Przychodzi Ci jakieś potencjalne rozwiązanie do głowy?