Joc Breakout în JavaScript

Pentru că o mare parte dintre participanții de la atelierele CoderDojo Iași și-au exprimat dorința de a dezvolta jocuri, astăzi vom face un prim pas, începând cu unul simplu, foarte cunoscut sub numele de Breakout. Vom folosi în acest sens tehnologii specifice dezvoltării web, cum ar fi cele studiate în cadrul edițiilor CoderDojo Iași, folosind, printre altele, și platforma Codecademy. Astfel, pentru a înțelege cu adevărat implementarea, este recomandat să aveți cunoștințe fundamentale de HTML, CSS și, în principal, puțin mai avansate de JavaScript.

Vom urmări în acest tutorial ce implică dezoltarea unui joc ca cel din acest exemplu, pas cu pas, cu explicații pentru principalele elemente folosite. Vom mai avea și unele mici exerciții care, deși nu sunt necesare în terminarea jocului nostru, vi le recomand pentru a înțelege cu adevărat pașii urmați. Acest articol se bazează într-o proporție mare pe un altul găsit aici, pe care îl puteți urmări dacă aveți un nivel de cunoaștere al limbii engleze cât de cât avansat. De asemenea în această versiune am încercat să personalizez ceva mai mult jocul, să elimin unele lucruri de o relevanță mai scăzută și să adaug unele lucruri care, cred eu, pot face experiența mai plăcută.

Structura HTML

Într-un nou fișier index.html pe calculatorul vostru putem începe cu o structură clasică de fișier HTML, în care vom include un singur element care s-ar putea să vi se pară nou, un tag cu numele „canvas”. Acesta este folosit în special din cauza faptului că pe suprafața sa se pot desena elemente, figuri geometrice. Deci prima variantă a paginii noastre va arăta cam așa:

Toate instrucțiunile care desenează efectiv pătratul roșu sunt cuprinse între metodele beginPath și closePath. Întâi am definit pătratul folosind metoda rect, căreia i-am dat 4 parametri. Primii doi definesc de la ce coordonate să se înceapă figura noastră, numărătoarea începând din colțul stânga sus. Următorii doi specifică lățimea și înălțimea elementului desenat. Cu alte cuvinte, am instruit programul nostru să deseneze o figură începând la 20px distanță de marginea stânga și 40 de cea de sus și am specificat că ne dorim ca lățimea și înălțimea să fie de câte 50px, obținând astfel un pătrat la acea poziție.

Prin proprietatea fillStyle am decis că vrem să „umplem” figura noastră folosind culoarea roșu, iar metoda fill a desenat efectiv acest lucru. Desigur, nu suntem limitați la a folosi doar forme de acest gen. Copiați aceste linii la finalul scriptului nostru:

După ce reîncărcați pagina ar trebui să vedeți un cerc verde în apropierea pătratului roșu desenat mai devreme. După cum vedeți, procedeul este foarte similar. Diferența notabilă ar fi faptul că am folosit metoda arc, în loc de rect. Cu primii doi parametri am stabilit unde va fi centrul cercului nostru, al treilea, 20, a determinat raza cercului. Următorii doi parametri definesc unghiul de plecare și de sfârșit pentru desenul nostru. Nu vă faceți griji dacă nu sunteți familiarizați cu sensul acestor valori, cele folosite aici sunt standard dacă vrem să desenăm un cerc complet.

De asemenea, în loc să folosim metoda fill pentru a desena o formă „plină”, putem folosi o alta, denumită stroke, cu ajutorul căreia vom obține doar un contur. De exemplu, dacă veți copia următoarele linii la finalul scriptului nostru:

ar trebui să obțineți un dreptunghi cu muchiile albastre.

Exercițiu: Înainte de a trece mai departe puteți petrece puțin timp încercând să schimbați dimensiunile și culorile formelor definite mai sus, pentru a vă familiariza cu ele.

Din ce am făcut până acum deja știți să desenați mingea din jocul nostru. Urmează să o facem să se miște. De fapt vom simula acest lucru, desenând-o, ștergând-o și desenând-o din nou la o altă poziție la fiecare pas.

Bucla de desenare

Jocul nostru va avea diverse elemente care se mișcă, apar sau dispar de pe ecran, așa că aproape tot timpul va trebui să schimbăm conținutul elementului nostru de tip canvas. Unii dintre voi v-ați familiarizat deja din anumite tutoriale folosite în precedentele ateliere cu ideea de buclă infinită, un set de inscrucțiuni menit să ruleze continuu, atâta timp cât programul funcționează. Ceva foarte similar vom face și acum. Ștergeți tot din interiorul scriptului nostru, în afară de primele două linii, și copiați în loc următoarele instrucțiuni:

Am început prin a defini o funcție pe care o vom folosi pentru a desena conținutul nostru la fiecare pas, denumit și frame. Apoi folosind funcția JavaScript setInterval am făcut în așa fel încât tot ce vom scrie noi în deseneaza să fie executat din nou la fiecare 10 milisecunde. Acesta este un interval de timp foarte scurt, de o sută de ori mai mic decât o secundă, fiind aproape insesizabil pentru ochi, fiind astfel potrivit pentru a da senzația de mișcare contiuă.

Acum, în interiorul funcției deseneaza, copiați următoarele linii:

Aceste linii ar trebui să vă fie familiare deja din pașii precedenți. Dacă salvați fișierul și reîncărcați pagina, mingea noastră ar trebui să fie desenată pe ecran la fiecare 10 milisecunde. Desigur, nu vom avea senzația de mișcare pentru că o desenăm în același loc de fiecare dată.

Mișcarea mingii

Inițial am desenat mingea noastră la coordonatele (50, 50), dar acum le vom salva într-o pereche de variabile pentru a le putea schimba valorile. Vom folosi o convenție standard pentru coordonate și vom denumi aceste variabile x și y. Deasupra funcției noastre adăugați următoarele linii:

Deci pentru x am folosit o valoare egală cu jumătate din lățimea spațiului nostru de joc, elementul canvas, iar pentru y am folosit înălțimea, din care am scăzut 30px, pentru a avea suficient spațiu să desenăm mingea. Acum înlocuiți conținutul funcției noastre cu:

Până aici nu am făcut decât să desenăm mingea într-un alt loc. Acum, pentru partea mai importantă, vom mai defini două variabile deasupra funcției noastre, imediat sub cele două existente, x și y:

Această notație, care folosește litera d înaintea unei valori, este una destul de comună pentru a reprezenta modificarea unei valori (pentru cei familiarizați cu geometria, vine de la delta). Deci aceste două variabile vor reprezenta valorile cu care modificăm poziția mingii la fiecare pas, una pentru lățime (dx) și una pentru înălțime (dy). În concluzie tot ce mai trebuie să facem acum este să folosim aceste două valori pentru a modifica cele două coordonate, x și y, la fiecare pas. Adăugați două linii la finalul funcție noastre astfel încât conținutul său să devină:

Dacă salvați fișierul și reîncărcați pagina ar trebui să vedeți că mișcarea a început să funcționeze. Desigur, un inconvenient rămas ar fi faptul că mingea noastră pare să lase o urmă pe traseul său.

Eliberarea spațiului de joc

Mingea lasă o urmă din cauză că la fiecare pas o desenăm într-o nouă poziție, dar precedenta rămâne acolo de asemenea. Din fericire acest lucru este foarte ușor de rezolvat folosind metoda clearRect, care ne va ajuta să eliberăm spațiul nostru de joc. Adăugați următoarea linie la începutul funcției noastre, înainte de tot conținutul deja existent:

Această funcție elimită conținutul din elementrul nostru de tip canvas între coordonatele specificate. Folosind 0 pentru primii doi parametri i-am transmis să înceapă din colțul stânga sus, iar folosind lățimea și înălțimea elementului pentru următorii doi i-am descris colțul dreapta jos. Deci înainte de a desena ceva, funcția noastră va șterge conținutul spațiului de joc în întregime, permițându-ne să definim fiecare pas (frame) independent.

Organizarea codului

Este foarte normal pentru programatori ca uneori să se vadă nevoiți să își restructureze codul pentru a-l face mai eficient sau mai ușor de înțeles. Înlocuiți funcția deseneaza cu următoarele două:

După ce salvați veți observa că rezultatul este exact același. Întradevăr, nu am schimbat comportamentul jocului nostru, dar am organizat sursele puțin. Am extras logica necesară desenării mingii într-o funcție separată. Astfel este mai ușor să înțelegem funcția deseneaza și am pregătit terenul pentru următorii pași, în care vom avea de desenat și alte obiecte.

Exercițiu: încercați să schimbați viteza mingii sau direcția în care se mișcă.

Deja am făcut primele progrese, dar momentan mingea noastră dispare după ce ajunge la limita din dreapta a spațiului de joc. În continuare vom implementa o simplă detectare a coliziunii cu peretele și vom schimba direcția de mișcare când observăm acest lucru.

Detectarea atingerii pereților

Pentru a face calculele mai ușoare vom defini o variabilă în care vom reține raza mingii. Așa că în zona în care ați declarat varabile, sub cele existente, înainte de funcții, adăugați următoarea linie:

Iar în funcția deseneazaMinge, înlocuiți apelul care desenează mingea în așa fel încât să folosească noua variabilă în loc de valoarea statică 10:

Există patru „pereți” în spațiul nostru de joc, să începem cu cel de sus. Deci trebuie să verificăm dacă mingea atinge marginea de sus, iar dacă da să îi schimbăm direcția, păstrând-o astfel în interiorul elementului nostru. Având în vedere că sistemul de coordonate începe din colțul stânga sus putem adăuga următorul bloc la finalul funcției deseneaza:

Cu alte cuvinte: dacă poziția pe verticală (y) urmează să devină mai mică decât 0, schimbăm direcția de mișcare transformând valoarea lui dx în ea însăși inversată. Dacă acest cod acoperă coliziunea cu marginea de sus, atunci ceva similar am putea folosi și pentru cea de jos:

Deci și în cazul în care poziția pe aceeași axă devine mai mare decât cea maxim disponibilă vom schimba din nou direcția de mișcare pe verticală. Din cauză că ambele cazuri vor face același lucru, probabil știți că putem simplifica cele două expresii înlocuindu-le pe ambele cu:

Pentru a trata și cazurile de pe axa orizontală, deci peretele din stânga și cel din dreapta, vom folosi un bloc foarte similar, înlocuind y cu x, dy cu dx și înălțimea spațiului de joc cu lățimea sa:

În acest moment mingea ar trebui deja să își mențină mișcarea în interiorul elementului canvas și să își schimbe direcția la fieacre coliziune cu un perete. Totuși, dacă sunteți foarte atenți, ați putea observa că în momentul în care mingea ajunge la margine, pare să dispară parțial pentru foarte puțin timp înainte de a schimba direcția. Acest lucru se întâmplă din cauză că poziția noastră curentă, determinată de x și y, se referă la centrul mingii, deci jumătate din ea iese din spațiul de joc înainte să schimbăm direcția. Pentru a trata acest caz trebuie să luăm în calcul raza mingii și vom folosi variabila definită înainte să adăugăm regulile de coliziune. Practic în marginea de jos și cea din dreapta vom compara cu înălțimea și lățimea, dar din care scadem raza, iar pentru cele de sus și stânga vom compara cu (0+) raza mingii. Deci cele două reguli devin:

Exercițiu: încercați să schimbați culoarea mingii cu una aleatoare de fiecare dată când aceasta atinge un perete.

Momentan mingea noastră se respinge de cei pentru pereți, dar nu putem interacționa cu ea, iar un joc nu poate exista fără interacțiune din partea noastră. Așa că vom defini o paletă în partea de jos a ecranului, pe care o vom putea muta și de care mingea se va respinge.

Definirea unei palete pentru a lovi mingea

Să definim câteva variabile utile pentru paleta noastră. Adăugați următoarele definiții sub celelalte variabile existente, înaintea funcțiilor:

În aceste linii am definit o variabilă pentru a reține înălțimea paletei, una pentru lățimea sa și o a treia care va reține poziția pe axa orizontală unde începe paleta, pentru că ea nu va putea fi mutată pe verticală, ca mingea. Acum, imediat sub funcția deseneazaMinge și înainte de deseneaza adăugați o nouă funcție astfel:

Paleta poate fi desenată oriunde, dar avem nevoie de interacțiune pentru a o muta. Pentru a obține acest lucru vom avea nevoie de:

• două variabile care să rețină dacă a fost apăsat butonul pentru deplasare la stânga sau cel pentru deplasare la dreapta
• un mod de a detecta dacă un buton a fost apăsat sau eliberat
• două funcții: una care să pornească mișcarea când butonul este apăsat și una care să o oprească atunci când este eliberat

Deci putem începe prin a defini două variabile de tip Boolean (true/false) care să rețină dacă butonul stânga sau butonul dreapta a fost apăsat. Adăugați următoarele două linii în zona în care ați definit variabile:

Adăugați următoarele linii în partea de jos a scriptului nostru, deasupra apelului către funcția setInterval:

Prin acestea doar am spus ca atunci când o tastă este apăsată funcția trateazaApasare trebuie să fie apelată, iar atunci când o tastă este eliberată funcția trateazaEliberare va fi folosită. Acum va trebui să definim aceste funcții, adăugând următoarele linii imediat sub cele definite puțin mai sus:

Când un buton de care suntem interesați este apăsat atunci variabila relevantă (dreapta sau stânga) va fi schimbată în true. Fiecare dintre cele două funcții primesc ca și parametru în variabila „e” ceea ce numește un eveniment. Acesta descrie interacțiunea întâlnită. 39 și 37 nu sunt decât niște coduri pentru tastele săgeată dreapta și săgeată stânga.

Acum tot ce rămâne să facem este ca în funcția deseneaza, unde decidem deplasarea mingii, să adăugam și logica pentru deplasarea paletei. Astfel, la finalul funcției puteți adăuga:

Dar, din ce am învățat când am definit mișcarea mingii, acest test nu este tocmai corect, din cauză că nu tratează atingerea marginii spațiului de joc. În acest caz este mult mai ușor, pur și simplu nu mai trebuie să lăsăm paleta să se miște când a ajuns la unul dintre capete, chiar dacă butonul este apăsat. Așa că vom înlocui liniile tocmai adăugate cu:

Acum tot ce ne-a rămas de făcut este să apelăm funcția care desenează paleta în cea care desenează toate elementele din spațiul de joc. Așa că acum trebuie să adăugați un apel:

în interiorul funcției deseneaza, imediat după apelul către funcția deseneazaMinge, de exemplu.

Dacă salvați și reîncărcați pagina veți observa că acum aveți paleta în partea de jos a ecranului și că atunci când apăsați pe butoanele stânga sau dreapta aceasta se mișcă în direcția dorită.

Exercițiu: înainte de a trece mai departe încercați să faceți paleta să se miște mai repede, mai încet, sau să îi schimbați dimensiunea.

Deși am progresat considerabil în dezvoltarea jocului nostru, momentan nu conține un aspect foarte important în totate jocurile: posibilitatea de a pierde. În breakout condiția este foarte ușoară: utilizatorul pierde dacă mingea „cade” prin partea de jos a spațiului de joc, fără a fi lovită de paletă.

Implementarea condiției de a pierde

Localizați următoarea zonă din codul deja existent:

În loc să lăsăm mingea să se respingă de cei patru pereți va trebui să permitem doar trei: stânga, sus și dreapta. Deci va trebui să edităm al doilea bloc din exemplul de mai sus, astfel încât să declanșeze starea de „game over” atunci când peretele de jos este atins. Momentan vom trata cazul foarte simplu: vom afișa un mesaj. În primul rând vom pregăti un element în pagină, în care vom scrie mesajul. În partea de HTML, sub elementul de tip canvas adăugați următoarea linie:

Acum avem un element fără conținut, dar care are un ID care poate fi folosit pentru a îi adăuga. De asemenea ar fi util să oprim desenarea atunci când jocul este pierdut. Pentru a face acest lucru editați linia din partea de jos a scriptului în care se folosește funcția setInterval, astfel încât să captați un identificator pentru intervalul definit într-o variabilă, astfel:

Acum putem înlocui al doilea bloc if dintre cele două menționate puțin mai sus cu:

Astfel vom păstra logica de schimbare a direcției atunci când mingea lovește peretele de sus, dar atunci când ajunge la cel de jos vom scrie mesajul „GAME OVER”, cu roșu, în elementul nostru de tip div. De asemenea am oprit bucla noastră infinită, pentru a menține elementul de tip canvas în starea curentă.

Totuși în acest moment jocul este pierdut chiar dacă poziționăm paleta în așa fel încât mingea să o lovească.

Coliziunea mingii cu paleta

Așa cum am definit coliziunea cu pereții va trebui acum să implementăm ceva similar pentru interacțiunea dintre minge și paletă. Un mod simplu pentru a defini acest caz ar fi să verificăm dacă centrul mingii se află între capetele paletei. Deci va trebui să adăugăm o excepție în condiția de terminare a jocului. Editați blocul de mai sus astfel încât să arate așa:

Adăugând acest bloc if ne-am asigurat că atunci când mingea ajunge în partea de jos a spațiului de joc, dacă atinge și paleta îi schimbăm direcția, dacă nu jocul este pierdut.

În acest moment ne apropiem de ceea ce s-ar putea numi cu adevărat un „joc”. Avem o condiție de a pierde, momentul în care mingea lovește peretele de jos, și ceva ce trebuie să facem pentru a evita asta, să poziționăm paleta în așa fel încât mingea să se lovească de ea și să își schimbe direcția din nou.

Exercițiu: înainte de a trece mai departe puteți încerca să vedeți dacă puteți să faceți în așa fel încât mingea să își mărească viteza de fiecare dată când lovește paleta, dând astfel un nivel sporit de dificultate jocului.

După cum ziceam, am putea deja considera că avem deja un joc. Dar în starea curentă ne vom plictisi repede de el. O parte foarte importantă în jocul breakout este să avem câteva rânduri de „cărămizi” care să fie „sparte” de către minge atunci când le lovește.

Definirea setului de cărămizi

În zona în care ați definit variabile, înaintea funcțiilor adăugați următoarele linii:

Prin acestea am definit numărul de linii și coloane de cărămizi, dimensiunile (înălțime și lățime) pentru fiecare dintre ele, distanța dintre două cărămizi alăturate, distanța lor față de marginea de sus și distanța față de marginea din stânga.

Acum avem pregătite valorile care definesc conceptele importante necesare, va trebui să pregătim și o structură în care să reținem fiecare cărămidă în parte. Pentru acest lucru vom putea folosi un Array. Mai exact ar fi un tablou cu două nivele, din cauza faptului că avem un număr de linii și de coloane. Unii dintre voi poate au auzit despre acest tip de structură și sub numele de matrice. Imediat sub variabilele definite mai sus adăugați:

Am folosit variabila c pentru a parcurge coloanele de cărămizi și l pentru a parcurge liniile. Pe baza lor nu am făcut decât să inițializăm un obiect pentru fiecare cărămidă în parte. Aceste date vor fi folosite în continuare pentru a desena cărămizile și pentru a detecta coliziunea dintre minge și fiecare dintre ele.

Logica desenării cărămizilor

Așa cum am definit o funcție care desenează mingea si una pentru paletă, vom defeni una nouă pentru a desena cărămizile. În zona în care am definit funcții adăugați:

Din nou, parcurgem pașii folosind numărul de coloane și de linii și desenăm un chenar cu lățimea și înălțimea egale cu cele definite pentru cărămizi. Acum problema rămâne că le desenăm pe toate în punctul de coordonate (0, 0), deci în colțul stânga-sus. Pentru a corecta acest lucru vom adăuga următoarele două linii în interiorul blocurilor noastre for:

Deci poziția pe axa orizontală, caramidaX, este calculată folosind lățimea unei cărămizi + distanța dintre ele înmulțite cu numărul coloanei curente. La valoarea obținută vom adăuga distanța care trebuie să o păstrăm față de marginea din stânga. Într-un mod similar, poziție pe axa verticală, caramidaY, va fi calculată adunând înălțimea cărămizii și distanța dintre ele, înmulțind rezultatul cu numărul liniei curente și adunând la final distanța pe care trebuie să o păstrăm față de marginea de sus.

Acum trebuie doar să folosim valorile calculate mai sus. Editați funcția deseneazaCaramizi în așa fel încât să arate astfel:

Acum tot ce trebuie să mai facem pentru a vedea cărămizile este să apelăm funcția care le desenează în cadrul celei care generează tot spațiul de joc. Deci, în interiorul funcției deseneaza, imediat după ce ați apelat deseneazaMinge și deseneazaPaleta adăugați și

Dacă salvați fișierul și reîncărcați pagina acum ar trebui să vedeți și cărămizile desenate în partea de sus a spațiului de joc. Desigur, momentan mingea nu interacționează cu ele, urmează să implementăm acest lucru.

Exercițiu: încercați să schimbați numărul de linii de cărămizi, numărul de coloane, culoarea sau dimensiunea lor.

În acest moment avem cărămizile desenate pe ecran, dar mingea trece „prin” ele. Așa cum a mai fost cazul pentru pereți și paletă, va trebui să adăugăm funcționalitatea pentru a detecta coliziunea dintre minge și o cărămidă.

Detectarea coliziunii

Pentru început vom crea o funcție care parcurge lista de cărămizi, în care vom implementa apoi verificarea condiției de coliziune. Vom folosi același tip de parcurgere a listei de cărămizi și vom salva la fiecare pas elementul curent într-o variabilă denumită caramida. Putem începe prin a defini funcția noastră astfel:

Dacă centrul mingii se va afla în interiorul unei cărămizi îi vom schimba direcția de mișcare. Pentru ca centrul să fie într-o cărămidă următoarele condiții trebuie să fie satisfăcute simultan:

• poziția x a mingii trebuie să fie mai mare decât poziția x a cărămizii
• poziția x a mingii trebuie să fie mai mică decât poziția x a cărămizii plus lățimea unei cărămizi (latimeCaramida)
• poziția y a mingii trebuie să fie mai mare decât poziția y a cărămizii
• poziția y a mingii trebuie să fie mai mică decât poziția y a cărămizii plus înălțimea unei cărămizi (inaltimeCaramida)

Pentru a „traduce” aceste condiții în cod vom edita funcția de mai sus astfel încât să aibă următoarea definiție:

Eliminare cărămidă la impact

Vom începe prin a mai adăuga încă un câmp în definiția cărămizilor, pe lângă cele existente, coordonatele x și y. Vom denumi acest câmp status. Editați zona în care am definit inițial lista de cărămizi, în zona de declarare a variabilelor astfel încât să arate astfel:

Apoi vom actualiza funcția deseneazaCaramizi astfel încât să afișeze doar cărămizile cu statusul 1:

Folosirea și actualizarea statusului în detectarea coliziunii

În continuare vom actualiza funcția detecteazaColiziune în așa fel încât să ia în considerare doar cărămizile cu status 1 și să îl actualizeze în 0 la impact.

 

Activarea detectării coliziunii

Acum tot ce a rămas de făcut este să apelăm funcția noastră detecteazaColiziune în cadrul celei ce generează întregul spațiu de joc, deseneaza. Adăugați următoarea linie imediat după apelul către deseneazaPaleta:

Exercițiu: încercați să schimbați culoarea mingii de fiecare dată când lovește o cărămidă.

Faptul că putem „sparge” cărămizi face jocul mai interesant, dar un element care ar putea adăuga interes ar fi să ținem un scor, numărând cărămizile atinse.

Ținerea scorului

Pentru a reține un scor vom avea nevoie de o variabilă. Adăugați următoarea linie în zona de declarare a variabilelor, sub cele existente, imediat deasupra funcțiilor:

Vom avea nevoie și de o funcție pentru desenarea scorului pe spațiul de joc. Adăugați următoarea funcție imediat după detecteazaColiziune:

Desenarea textului pe canvas este similară cu desenarea formelor folosite până acum. Definirea font-ului este asemănătoare cu modul în care ați face acest lucru în CSS. Funcția fillStyle va determina culoarea textului, iar fillText va adăuga textul efectiv. Următorii doi parametri reprezintă coordonatele de la care va începe scrisul, deci am ales o poziție în apropiere de colțul stânga-sus.

Pentru a ține evidența scorului editați funcția detecteazaColiziune, adăugând linia evidențiată mai jos pentru a incrementa valoarea variabilei scor de fiecare dată când „spargem” o cărămidă.

Apelând funcția deseneazaScor în interiorul deseneaza vom ține scorul actualizat la fiecare pas. Adăugați următoarea linie imediat după apelul către funcția deseneazaPaleta:

Afișarea unui mesaj pentru câștigarea jocului

Așa cum am implementat o condiție pentru pierderea jocului, acum că avem o evidență a scorului, putem adăuga și o condiție pentru câștigare. Verificarea este foarte ușoară: atunci când scorul este egal cu numărul total de cărămizi înseamnă că jocul a fost câștigat. În funcția detecteazaColiziune, imediat după linia adăugată mai sus, adăugați cele cinci evidențiate aici:

După cum vedeți, tratarea cazului este similară cu cea de atunci când se pierde. Am schimbat mesajul și culoarea, din roșu, în verde.

Exercițiu: schimbați numărul de puncte acordate pentru eliminarea unei cărămizi.

Jocul nostru poate fi considerat deja terminat, dar îi mai putem adăuga unele elemente pentru a-l face mai interesant.

Acordarea unui numări de „vieți”

Jocul ar putea fi mai ușor de jucat dacă ni s-ar permite să facem una sau două greșeli. Implementarea unui număr de vieți disponibile este destul de simplă. Vom porni cu o variabilă care va reține numărul de vieți. Adăugați următoarea linie în zona în care am definit variabilele:

Apoi vom defini o funcție foarte similară cele ce afișează scorul, pe care o vom folosi pentru a ține evidența numărului de vieți:

În loc să terminăm jocul atunci când mingea ajunge la limita de jos, vom scădea numărul de vieți. Schimbați zona în care se afișează mesajul „GAME OVER” astfel:

Numărul de vieți scade de fiecare dată când mingea ajunge jos. Dacă nu mai avem vieți disponibile atunci afișăm mesajul de joc pierdut, dar dacă mai avem doar repoziționăm mingea și paleta în locurile în care se aflau inițial.

După cum v-ați obșnuit deja, tot ce mai trebuie să facem este să apelăm funcția deseneazaVieti în cadrul deseneaza, imediat după apelul către deseneazaScor, adăugând următoarea linie:

Funcționalitatea jocului nostru este terminată. La final putem să îl facem puțin mai interesant adăugându-i unele sunete.

Adăugare sunete

Vom defini o funcție care va reda un sunet primit ca parametru, pe care o vom folosi în unele puncte critice ale jocului:

Ca și exemplu am pregătit 5 fișiere de sunet, ale căror adrese le vom salva în variabile în partea de sus a scriptului nostru:

Putem edita funcția detecteazaColiziune astfel încât să reproducem sunetul relevant atunci când o cărămidă este atinsă și atunci când jocul este câștigat:

Într-un mod similar puteți adăuga un apel faSunet(sunetPerete); atunci când mingea atinge peretele, faSunet(sunetLovitura); atunci când este lovită de paletă sau faSunet(sunetJocTerminat); atunci când jocul este pierdut. Ca un exercițiu final încercați să faceți acest lucru singuri.

Optimizare performanță

Așa cum spuneam mai sus, este normal atunci când programăm să îmbunătățim calitatea codului nostru, chair dacă acest lucru nu schimbă modul în care funcționează. Acum, că jocul nostru este practic terminat, putem face o mică schimbare pentru a-l face mai performant. Până în acest punct am redesenat conținutul spațiului de joc la fiecare 10 milisecunde, obținând astfel senzația de mișcare continuă. Deși acest interval este suficient de mic, nu știm dacă este cel mai bun care poate fi obținut în browserul nostru. Pentru a renunța la abordarea care folosește un interval de timp vom începe prin a defini o variabilă care reține dacă jocul nostru s-a terminat, indiferent dacă a fost câștigat sau pierdut. Adăugați următoarea linie în zona de declarare a variabilelor:

Îi vom actualiza valoarea în cele două locuri în care jocul nostru este terminat, înlocuind apelul către clearInterval(interval) cu:

Apoi vom înlocui linia care pornește intervalul nostru folosind funcția setInterval printr-un simplu apel către funcția deseneaza:

Până aici funcția noastră a fost apelată o singură dată, deci va desena doar primul frame din joc. Pentru a continua, chiar în interiorul funcției deseneaza, vom adăuga un apel către ea însăși, dar doar dacă jocul nu s-a terminat. La finalul funcției „principale” adăugați:

Folosind această nouă funcție, requestAnimationFrame, practic i-am cerut browserului să reînceapă desenarea imediat după ce un nou frame poate fi afișat, în loc de intevalul fix de 10 milisecunde. Prin această mică modificare am sporit performanța jocului, din cauză că lăsăm browserul să calculeze când chiar este necesară o regenerare a spațiului de joc și când poate face asta.

Încheire

Jocul nostru poate fi considerat încheiat acum, dar, dacă doriți, puteți continua implementarea pe cont propriu. Poate ați observat că, deși am încheiat tutorialul, jocul obținut nu este chiar la fel cu cel din exemplul dat. Asta este din cauză că aș vrea să vă provoc să faceți ultima parte fără îndrumare, dar cu ajutor din partea mentorilor dacă este nevoie, desigur. Un alt motiv ar fi faptul că, deși breakout pare un joc previzibil, care se comportă la fel în fiecare implementare, puteți să continuați în așa fel încât varianta voastră să fie diferită de a mea sau a celorlalți colegi. Voi termina prin a vă da câteva idei în acest sens.

Voi începe cu cele din exemplul meu:

• când mingea lovește paleta viteza este mărită puțin, adăugând dificultate
• dacă o cărămidă este spartă fără ca mingea să ajungă jos, la paletă, ci imediat după o alta, se adaugă două puncte în loc de unu. Astfel scorul poate varia mai mult, față de scorul maxim standard de 27
• nu tot timpul, dar cu o probabilitate destul de mare, atunci când mingea lovește paleta scad lățimea paletei cu 1px, jocul devenind astfel din ce în ce mai greu
• de asemenea, cu o probabilitate scăzută de această dată, paleta își poate diminua lățima mai drastic, scăzând 10px, dar doar pentru o perioadă de 10 secunde, timp în care paleta are o altă culoare, marcând starea de penalizare
• am implementat o funcție de reîncepere a jocului, pentru a nu mai reîncârca pagina când vrem să reluăm jocul
• am reținut scorurile pentru a afișa un clasament

Nu uitați că pentru a vedea implementarea mea nu trebui decât să faceți click dreapta în pagină și să vedeți sursa. Puteți să vă inspirați de acolo pentru a dezvolta jocul vostru în continuare. Nu vă feriți să faceți lucrurile puțin diferit, puteți obține ceva mai interesant.

Alte idei care nu fac parte din exemplul meu, dar care ar trebui să le puteți implementa destul de ușor ar fi:

• cărămizile pot avea nivele, unele dintre ele nu trebuie să dispară când sunt atinse, pot doar să își schimbe culoarea și să fie nevoie să fie lovite din nou
• puteți adăuga conceptul de nivele de dificultate; de fiecare dată când jocul este câștigat puteți reîncepe, dar în așa fel încât să fie puțin mai dificil
• la un nivel ridicat de dificultate puteți folosi două mingi simultan
• cu o anumită probabilitate, pentru o perioadă scurtă de timp controalele paletei pot fi inversate; astfel, când se va apăsa butonul stânga paleta se va mișca în dreapta și invers

De fapt aveți foarte multe posibilități, trebuie doar să vă folosiți imaginația și apoi să vă puneți în practică planul.

De asemenea, dacă ați înțeles destul de bine acest tutorial, ar trebui să puteți cu ușurință să implementați un joc diferit, dar cu o logică asemănătoare. De exemplu un joc „tenis” ar putea să renunțe la rândul de cărămizi și să aibă două palete: una sus și una jos. Puteți face în așa fel încât cea de jos să fie controlată ca și în acest joc, iar cea de sus să folosească alte taste, de exemplu Z și C. În acest fel doi jucători diferiți vor putea juca de la aceeași tastatură. Veți putea ține scorul separat pentru fiecare jucător, acesta fiind definit ca numărul de jocuri în care celălat a „scăpat” mingea afară.