Skip to content

Tutorial JavaScript GameDev – Codați un joc animat de fizică [Curs complet]

Tutorial JavaScript GameDev – Codați un joc animat de fizică [Curs complet]

Aflați cum să codificați un joc JavaScript cu fizică interesantă și mecanică AI.

Ce face un joc grozav? Este vorba despre imagini frumoase și rafinate sau despre un joc care se simte bine și receptiv? Este vorba despre idei unice, sau poate despre micile detalii, secrete speciale și ouă de Paște? Care sunt ingredientele unei rețete perfecte de dezvoltare a unui joc? Să explorăm tema pădurii ciuperci fantezie și să învățăm toate tehnicile de care aveți nevoie pentru a vă crea propriile jocuri 2D cu JavaScript vanilla, HTML5, CSS3 și HTML Canvas.

✏️ Curs creat de @Frankslaboratory

⭐️ Active ⭐️
Toate imaginile proiectului: https://www.frankslaboratory.co.uk/downloads/109/all_project_images.zip
Fundal: https://www.cursuriaz.ro/wp-content/uploads/localimages/background.png
Acoperire: https://www.cursuriaz.ro/wp-content/uploads/localimages/overlay.png
Jucător: https://www.cursuriaz.ro/wp-content/uploads/localimages/bull.png
Ou: https://www.cursuriaz.ro/wp-content/uploads/localimages/egg.png
Toad single: https://www.cursuriaz.ro/wp-content/uploads/localimages/toad.png
Larvă: https://www.cursuriaz.ro/wp-content/uploads/localimages/larva.png
Broaște râioase: https://www.cursuriaz.ro/wp-content/uploads/localimages/toads.png
Imagini bonus, artă ecologică, piese separate HQ în format PSD etc: https://www.frankslaboratory.co.uk/downloads/109/bonus_image_source_files.zip

O sa inveti:
– Cum să implementezi un AI foarte simplu pentru a face creaturile să se simtă vii
– Cum să controlăm FPS-ul jocului nostru și cum să măsuram timpul pentru a declanșa evenimente periodice
– Cum să reporniți jocul apăsând un buton
– Cum să aplicați detectarea coliziunilor, să rezolvați coliziunile și să o utilizați pentru a simula fizica
– Cum să utilizați metoda drawImage încorporată pentru a desena medii aleatorii de joc și personaje animate dintr-o foaie de sprite
– Cum să capturați poziția mouse-ului și să animați o foaie de sprite cu 8 direcții pe baza poziției relative dintre mouse și personajul jucătorului
– Cum să utilizați HTML5, CSS3 și JavaScript simplu vanilie pentru a crea un joc de la zero. Vom scrie și înțelege fiecare linie de cod, nu ne vom baza pe niciun cadru sau bibliotecă externă
… și mult mai mult

⭐️ Cuprins ⭐️
⌨️(0:00:00) Introducere
⌨️(0:01:01) Configurare de bază
⌨️(0:04:51) Programare orientată pe obiecte în JavaScript
⌨️(0:09:14) Desenarea jucătorului
⌨️(0:16:24) Comenzi mouse
⌨️(0:22:24) Făcând jucătorul să se miște
⌨️(0:30:04) Crearea de obstacole
⌨️(0:36:37) Obstacole care nu se suprapun
⌨️(0:43:12) Imagini randomizate dintr-o foaie de sprite
⌨️(0:48:27) Reguli de poziționare
⌨️(0:54:26) Metodă reutilizabilă de detectare a coliziunilor
⌨️(0:58:31) Să adăugăm fizica
⌨️(1:06:38) Animație sprite în 8 direcții
⌨️(1:10:52) Unghiuri de animație
⌨️(1:17:58) Modul de depanare
⌨️(1:21:31) Limitele de mișcare a jucătorilor
⌨️(1:24:20) FPS
⌨️(1:33:59) Clasa de ouă
⌨️(1:38:52) Adăugând periodic ouă noi
⌨️(1:45:51) Fizica ouălor
⌨️(1:51:26) Ordine de extragere
⌨️(1:59:44) Clasa inamicului
⌨️(2:11:03) Clasa larvelor
⌨️(2:14:30) Clocirea ouălor
⌨️(2:24:28) Sprite larve și ciocniri
⌨️(2:29:06) Obținerea de puncte
⌨️(2:31:47) Efecte de particule
⌨️(2:40:42) Mișcarea particulelor
⌨️(2:47:46) Aspecte aleatorii ale inamicului
⌨️(2:52:09) Câștigă și pierde condiția
⌨️(3:02:41) Reporniți jocul

🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 Îl atrag pe Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Titlul Erdeniz
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org

Citiți sute de articole despre programare: https://freecodecamp.org/news

Cursuri interesante:

Leave a Reply

Your email address will not be published. Required fields are marked *