Îmbunătățiți-vă abilitățile JavaScript cu aceste 9 videoclipuri de tutoriale distractive pentru proiecte de jocuri

Faptul că 98,4% din toate site-urile web folosesc JavaScript este motivul pentru care ar trebui să-l cunoașteți ca dezvoltator. Privind retrospectiv, realizarea unui joc cu JavaScript nu numai că te ajută să înveți rapid. De asemenea, vă permite să stăpâniți cum să aplicați conceptele sale simple la complexe în diferite situații la locul de muncă, indiferent dacă sunteți începător sau perfecționat.

Dacă înveți mai bine cu demonstrații vizuale, aceste tutoriale de jocuri bazate pe JavaScript de pe YouTube merită timpul tău.

1. Joc de cărți cu JavaScript

Acest joc de cărți JavaScript cu Gavin Lon vă arată cum să răsturnați cărțile cu peste 600 de linii de cod JavaScript. În timp ce accentul principal este să predați JavaScript, veți învăța și să combinați puterea de proiectare a CSS cu structura DOM a HTML pentru a obține receptivitate cu JavaScript.

Scopul final al proiectului este să răstoarne câteva cărți, iar jucătorul ghicește Asul când cărțile schimbă în sfârșit locurile. Fiecare card este o imagine a patru roluri diferite de card. Deci, deși nu veți proiecta singur cărțile, veți învăța să manipulați pozițiile acestora în mod receptiv, să creșteți rundele de joc, să adăugați sau să eliminați scoruri pe măsură ce nivelurile se schimbă și să stocați scorurile jocului în stocarea locală a browserului-toate folosind JavaScript.

Tutorialul este treptat și ușor de urmat, în ciuda greutății pe care o veți face în spatele scenei. Este perfect pentru începători și reîmprospătari. Deși este vorba despre construirea unui joc de cărți, vă expune la majoritatea tehnicilor de cablare JavaScript în situații reale. În plus, vă dezvăluie capacitatea de gândire.

2. Joc Breakout 2D cu JavaScript

​​​

Dacă doriți să învățați să controlați intervalele de acțiune și să mutați elementele DOM în mod dinamic folosind JavaScript, Ania Kubów arată cât de distractiv devine cu acest tutorial de joc de tip breakout folosind JavaScript. Ca un plus, videoclipul demonstrează, de asemenea, cum să găzduiești și să-ți prezinți proiectul potențialilor angajatori.

Gândiți-vă la fiecare posibilitate dintr-un joc breakout; o platformă în mișcare cu o minge care lovește pereții tangențial pentru a sparge cărămizile deasupra ei. Și veți codifica sistemul de recompense și în acesta. În ansamblu, acest tutorial de joc de tip breakout merită luat în considerare dacă doriți să construiți ceva de la zero, fără a utiliza agenți terți sau imagini din sursă.

În timp ce vă conectați logica în cadrul funcțiilor, videoclipul învață mai multe despre clasă JavaScript și concepte de obiect în pași simpli, inclusiv cele mai bune practici privind declarațiile condiționate ca și carcasa comutatorului.

3. Joc JavaScript Snake

Dezvăluie nostalgia jocului Snake II de la Nokia 3310, creând acest joc JavaScript cu șarpe cu Kyle. Probabil ați mai jucat acest lucru și probabil îl veți juca de mai multe ori într-o viață, deoarece veți codifica unul folosind vanilla JavaScript.

În timp ce vă învață să conectați DOM-ul în mod dinamic, acest videoclip demonstrează cum puteți construi și utiliza module personalizate în JavaScript. Prin urmare, vă deschide o oportunitate de a învăța despre separarea preocupărilor folosind principiul nu te repeta (DRY).

În culise, veți stăpâni concepte JavaScript mai avansate. Sarcini, inclusiv crearea unei grile pentru jucători, plasarea alimentelor, construirea corpului șarpelui, alungirea șarpelui, codificarea logica de navigare, crearea unei scheme de recompense și penalizări și controlul vitezei șarpelui, vă va expune JavaScript.

4. Joc Tic Tac Toe cu JavaScript

​​​​​

Poate că jocul tău Tic Tac Toe devine clar pe măsură ce construiești unul cu JavaScript într-un alt videoclip cu Kyle. Acesta este un simplu, dar valoros proiect pentru începătorii JavaScript să mănânci pe măsură ce vei rezolva probleme complexe.

Videoclipul nu se termină numai cu JavaScript. De asemenea, demonstrează cum să prinzi designul interfeței cu utilizatorul folosind CSS. Cu consecvență și angajament, puteți învăța aproape toate tehnicile necesare pentru a începe călătoria dvs. de dezvoltare web în acest videoclip.

În timp ce manipulează DOM-ul cu JavaScript, videoclipul înglobează greutățile legate de codificarea deciziilor de câștig și de remiză, de a decide rândurile jucătorilor și de alinierea obiectelor. Funcțiile, buclele și condițiile JavaScript sunt câteva dintre conceptele avansate pe care le veți învăța în acest tutorial video JavaScript Tic tac Toe.

5. Slide Puzzle Joc cu JavaScript

Puzzle-urile pot fi gândite. Dar construirea unuia cu JavaScript vanilla sună ca o modalitate distractivă de a-ți explora creativitatea și de a învăța concepte JavaScript de la bază până la complexe.

Doriți să codificați în acest tutorial, dacă doriți să vedeți cum să utilizați concepte JavaScript, inclusiv comutatoarele condiționate și manipularea dinamică a poziției DOM folosind funcții personalizate și încorporate.

Deși tutorul plasează JavaScript într-o etichetă de script în fișierul HTML, puteți roti scriptul într-un fișier JavaScript dedicat și îl puteți conecta la DOM în cazul dvs. pentru claritate. Indiferent, cel mai bine este să vă concentrați pe logica de bază și pe procesul de gândire pentru a vă atinge obiectivul, inclusiv cum să aplicați ceea ce învățați aici la mai multe scenarii din viața reală.

6. Joc de curse cu mașini cu JavaScript

Construirea unui joc de curse cu mașini folosind JavaScript vanilla ar putea să nu ofere cea mai bună rezultate grafice. Dar conectarea unui joc de curse cu mașini funcțional în timp ce urmați acest tutorial vă va învăța să folosiți puterea de a folosi JavaScript în orice aplicație.

Acest tutorial implică plasarea a două mașini (una roșie și una albastră) pe o pistă de curse. Mașina albastră apare aleatoriu din orice direcție, iar vehiculul roșu, reprezentând jucătorul, încearcă să evite o coliziune. Jocul se termină odată ce există contact între ambele mașini.

Deși aceasta este o descriere simplă a ceea ce veți construi în aceasta, veți învăța o logică avansată JavaScript pentru manipularea și stilizarea DOM. De asemenea, veți obține informații despre operatorii JavaScript în timp ce creați recompense și penalități pentru jucători.

În timp ce adăugați funcționalități la melodie, unele concepte pe care le veți învăța includ evenimente JavaScript, condiții, funcții anonime, animație JavaScript, controlul intervalelor și multe altele.

7. Joc Mario cu JavaScript

Acest tutorial de joc JavaScript Mario este tot ce ai nevoie pentru a-ți afunda capul în esențialul JavaScript. În timp ce a crea un joc Mario cu JavaScript sună complex, Chris, profesorul tău, arată că este mai mult decât posibil în acest videoclip YouTube. Așa că s-ar putea să vrei să prinzi distracția și să-ți explorezi capacitatea de gândire critică, construind împreună.

Deși începătorii s-ar putea găsi tutorialul puțin avansat, este o căutare genială pentru reîmprospătatori pentru a-și duce abilitățile JavaScript la nivelul următor.

Pe lângă faptul că înveți despre manipulările elementelor, vei folosi puterea JavaScript pur pentru a construi un boilerplate de pânză receptiv pentru interfața de joc folosind programare orientată pe obiecte (OOP). Deoarece jucătorul este mobil mobil, aplicația de control al tastaturii JavaScript, gestionarea evenimentelor, bucle, operatorii, condițiile și funcțiile încorporate și personalizate se numără printre experiențele pe mai multe proiecte pe care le veți avea câştig.

8. Construiește Minesweeper cu JavaScript

Doriți să explorați puterea funcțiilor recursive și metode matrice în înmulțirea elementelor DOM cu JavaScript? Poate doriți să începeți cu acest tutorial JavaScript Minesweeper de Ania Kubów pe Traversy Media.

Implică multă atenție la detalii. Dar este un tutorial prietenos pentru începători și unul dintre cele mai bune pentru a vă înfășura sistemul de aspect al grilei folosind JavaScript. Scopul final este de a crea un șablon de grilă în care jucătorii să evite să calce pe o mină.

Oricât de simplu sună, veți scrie multă logică de programare care implică majoritatea tehnicilor de bază JavaScript pentru a conecta funcționalitatea jocului în spatele scenei.

9. Tutorial joc JavaScript Pokemon cu pânză HTML

Pokemon este unul dintre cele mai complexe proiecte de jocuri pe care le poți crea folosind JavaScript. Cu toate acestea, dacă aveți nevoie de ore lungi de codare riguroasă cu JavaScript și sunteți gata să ieșiți reînnoit cu mai multă încredere, ar fi bine să intrați în acest tutorial.

Pe lângă scripturile DOM și animația cu JavaScript, videoclipul vă învață cum să mutați și să redați elemente, inclusiv audio și imagini, folosind JavaScript. Există multe lucruri pe care tutorialul dezvăluie despre JavaScript, pe care le veți găsi valoroase în orice problemă de codificare din viața reală.

Pe lângă alte tehnici de manipulare JavaScript de bază, tutorialul folosește, de asemenea, în mare măsură conceptele OOP; acest lucru este valoros dacă intenționați să vă aprofundați mai târziu în TypeScript. Unul dintre factorii de simplificare ai acestui tutorial este modul în care tutorul conturează sarcinile.

Este ușor să dai înapoi când îți imaginezi sistemul complex pe care îl vei crea pentru ca acest lucru să funcționeze. Dar gândește-te la ce ai de câștigat până la urmă.

Aflați aplicațiile JavaScript de rezolvare a problemelor

Jocurile folosesc unele dintre cele mai receptive și intuitive logici în programare. Deci, merită să învățați JavaScript din crearea unuia. Deși aceste tutoriale sunt bazate pe jocuri, vă expun conceptele de bază JavaScript aplicabile multor alte probleme de codare, inclusiv dezvoltarea web și crearea de aplicații mobile. Chiar dacă intenționați să apelați mai târziu la cadre, veți aplica aceste concepte indiferent.