Învață să faci jocuri 2D cu HTML, CSS și JavaScript simplu, fără cadre și fără biblioteci! De la animația sprite până la managementul statului, în această serie de proiecte veți învăța tot ce aveți nevoie pentru a vă crea propriile jocuri animate 2D! Vom merge pas cu pas explicând fiecare tehnică pe o mică bază de cod independentă și apoi vom folosi tot ce am învățat pentru a crea un singur joc final.
✏️ Curs de Frank’s Laboratory. https://www.youtube.com/c/Frankslaboratory
⭐️ Active ⭐️
🕹 Proiect 1: Tehnici de animație cu sprite JavaScript Vanilla
https://www.cursuriaz.ro/wp-content/uploads/localimages/shadow_dog.png
🕹 Proiectul 2: fundaluri Parallax cu JavaScript
Zip straturi: https://frankslaboratory.co.uk/downloads/backgroundLayers.zip
🕹 Proiectul 3: Modele de mișcare a inamicului
Zip inamicii: https://frankslaboratory.co.uk/downloads/enemies.zip
🕹 Proiectul 4: Animații de coliziune dintr-o foaie de sprite
https://www.cursuriaz.ro/wp-content/uploads/localimages/boom.png
🕹 Proiectul 5: Joc Point & shoot
corb: https://www.cursuriaz.ro/wp-content/uploads/localimages/raven.png
nor de praf: https://www.cursuriaz.ro/wp-content/uploads/localimages/boom.png
🕹 Proiectul 6: Varietatea inamicului în jocurile JavaScript
vierme: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_worm.png
fantomă: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ghost.png
păianjen: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_spider.png
🕹 Project 7: Joc cu defilare laterală cu suport mobil
Jucător: https://www.cursuriaz.ro/wp-content/uploads/localimages/player.png
Fundal: https://www.cursuriaz.ro/wp-content/uploads/localimages/background_single.png
Dusman: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_1.png
🕹 Proiectul 8: Managementul statului în jocurile JavaScript
https://www.cursuriaz.ro/wp-content/uploads/localimages/dog_left_right_white.png
🕹 Proiectul 9: Joc final de alergători fără sfârșit cu toate caracteristicile
Jucător: https://www.cursuriaz.ro/wp-content/uploads/localimages/player.png658db2c7539cb.png
🕹 Straturi de fundal ale orașului:
Stratul 1: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-1.png
Stratul 2: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-2.png
Stratul 3: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-3.png
Stratul 4: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-4.png
Stratul 5: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-5.png
🕹 Textura focului:
https://www.cursuriaz.ro/wp-content/uploads/localimages/fire.png
🕹 Animație de coliziune:
https://www.cursuriaz.ro/wp-content/uploads/localimages/boom.png658db2df7aa84.png
🕹 Vieți:
https://www.cursuriaz.ro/wp-content/uploads/localimages/lives.png
https://www.cursuriaz.ro/wp-content/uploads/localimages/heart.png
🕹 Straturi de fundal de pădure:
Stratul 1: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-1.png658db2e331d83.png
Stratul 2: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-2.png658db2e933820.png
Stratul 3: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-3.png658db2ed98715.png
Stratul 4: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-4.png658db2f04445a.png
Stratul 5: https://www.cursuriaz.ro/wp-content/uploads/localimages/layer-5.png658db2f248ae3.png
🕹 18 dușmani:
Păianjen mare: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_spider_big.png
Liliacul 1: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_bat_1.png
Spinner: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_spinner.png
Păianjen mic: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_spider.png658db2feb2a78.png
Fantoma 1: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ghost_1.png
Liliacul 2: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_bat_2.png
Corb: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_raven.png
Liliacul 3: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_bat_3.png
Fantoma 2: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ghost_2.png
A zbura: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_fly.png
Fantoma 3: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ghost_3.png
Fantoma 4: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ghost_4.png
Mână: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_hand.png
Plantă: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_plant.png
Vierme: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_worm.png658db3166d17a.png
Zombi care umblă: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_zombie.png
Zombi de la sol: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_ground_zombie.png
Digger: https://www.cursuriaz.ro/wp-content/uploads/localimages/enemy_digger.png
🔗 Mai multe active de artă: https://bevouliin.com/
⭐️ Cuprins ⭐️
0:00:00 Introducere
0:01:28 Proiectul 1: Tehnici de animație cu sprite JavaScript Vanilla
0:43:07 Proiectul 2: Fundaluri Parallax
1:25:33 Proiectul 3: Modele de mișcare a inamicului
2:13:31 Detectarea coliziunilor între dreptunghiuri
2:19:23 Detectarea coliziunilor între cercuri
2:24:14 Proiectul 4: Animații de coliziune dintr-o foaie de sprite
2:48:35 Proiectul 5: Joc Point & shoot
3:50:44 Proiectul 6: Varietatea inamicului
4:45:49 Proiectul 7: Joc cu defilare laterală cu suport mobil
5:54:04 Proiectul 8: Managementul statului
7:02:57 Proiectul 9: Joc final de alergători fără sfârșit cu toate caracteristicile
