Info lectie

Nivel: Incepator/Mediu

Versiune Flash: MX, MX 2004

Timp necesar: 1 & 1/2 Ore

Descriere: Aceasta lectie trateaza un joc de curse "contra timp". Dupa terminare, iti vei putea crea propriul joc de curse cu propriile trasee, ciocniri, recorduri si altele.

Cuprins:

Pasul 1: Miscarea masinii

Pasul 2: Coliziuni

Pasul 3: Tururi si Cronometrare

Pasul 4: Artificii Grafice

Info pasul

In Continuare: In pasul 3 jocul devine mai dinamic si mai interactiv.

Adaugam tururi, cel mai bun timp si timp total la 10 ture.

Lectia Joc de Curse in Flash - Partea I Miscare si Coliziuni - Pasul 3

Descarca racing_part1_step3.fla

1. Pana in acest moment avem un motor de joc 100% functional, insa nu avem jocul. Nu avem un scop. Astfel ca, va fi necesar sa ii construim un scop, si pentru ca aceasta lectie se refera la un joc de curse cu timp, vom adauga ture si cronometre.

2. Deschideti racing_part1_step3.fla, fisierul acestei lectii.

3. veti observa ca am adaugat doua cadre pe fiecare layer, numindu-le "ready set", "go" si "finish". In primul cadru un movieclip va porni textul "ready, set, go". Cand "go" este afisat _root se va muta pe cadrul "go" unde masina se poate misca.

De ce masina nu se poate misca in primul cadru? Ei bine, deoarece movieclipul "stepper" exista doar in cadrul al2lea, astfel ca acolo functia "step" va fi executata.

In al doilea cadru, pe stratul numit "actions" veti gasi doua variabile noi. Acestea vor stoca timpul exact cand a pornit cursa (initialTime|) si timpu exact cand a inceput tura curenta (lapTime).

Cand jocul s-a terminat, dupa ce jucatorul termina 10 tururi, _root se va muta la cadrul "finish" unde un movieClip cu informatii va fi afisat.

3. Bun! Ceea ce trebuie sa determinam in continuare este daca jucatorul a temrinat un tur sau nu, asa ca vom adauga doua movieClip-uri ( linia rosie din partea dreapta ) si vom verifica daca masina a "atins" acest movieClip, si in caz afirmativ, vei sti ca turul s-a terminat... hmm... nu chiar :) (n.e. frumos caracter oral are domn profesor :P )

In primul rand, masina va atinge acest movieclip pret de mai mult de un cadru. Poate timp de doua, poate timp de zece, sau poate 100 de cadre, nu poti determina acest numar deoarece depinde de viteaza masinii. Si in loc sa maresti numarul de ture cu unu, il vei mari cu doua, zece sau chiar 100, astfel vei termina cursa inainte sa o incepi.

A doua problema, presupunand ca ai rezolvat-o pe prima, este ca jucatorul are posibilitatea sa treaca de linia de finish (a2a linie din dreapta) apoi sa se intoarca la aceeasi linie si sa o atinga iarasi, crescand numarul de ture, chiar daca tura nu s-a incheiat.Problema poate fi rezolvata in mai multe moduri insa noi vom folosi una care rezolva ambele probleme: vom adauga un punct de verificare (linia rosie de la stanga). Acest punct va fi plasat undeva la mijlocul cursei astfel incat jucatorul va pierde mai mult timp pentru a se intoarce spre sosire fata de cazul in care va merge in mod normal spre terminarea turei. Bineinteles ca daca vrei o cursa si mai securizata, vei dauga mai mult de un punct de verificare. Dupa terminarea acetei lectii, vei putea cu usurinta sa adaugi puncte de verificare in plus.

4. Deschide fereastra cu actiuni din primul cadru aflat pe layerul "actions". Avem doua functii noi ce au legatura cu calcularea timpului cursei - setTimes (calculeaza si seteaza timpul total al cursei) and setBestLap (caluleaza si seteaza timpul cel mai bun). le vom prezenta pe rand pentru a vedea ce fac.

function setTimes() {
//calculam timpul scurs, in milisecunde, de la inceperea cursei timeElapsed = getTimer()-_root.initialTime; //calculam minutele, secundele si zecimile de secunda, setandu-le la variabilele corespunzatoare milliseconds = timeElapsed;
seconds = Math.floor(milliseconds/1000);
minutes = Math.floor(seconds/60);
minutesTXT = minutes;
secondsTXT = seconds-minutes*60;
tensTXT = Math.round((milliseconds-seconds*1000)/10); //daca minutele, sacundele sau zecimile de sucunda au numai un caracter adaugam un "0" inainte - rafinament pur estetic ;) if (minutesTXT<10) {
minutesTXT = "0"+minutesTXT;
}
if (secondsTXT<10) {
secondsTXT = "0"+secondsTXT;
}
if (tensTXT<10) {
tensTXT = "0"+tensTXT;
} //punem toate cele 3 variabile in una singura pentru a fi folosita de tabela cu timp _root.totalTimeTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
}

//and the second function function setBestLap() {
//aceasta functie face acelasi lucru ca si prima, doar ca aici vom folosi timpul scurs de la inceperea turei curente bestTime = getTimer()-_root.lapTime;
milliseconds = bestTime; //nu calculam cel mai bun timp, in cazul in care masina trece linia de start/finish pentru prima data if (oldMilliseconds>milliseconds || oldMilliseconds==null) {
oldMilliseconds = milliseconds;
seconds = Math.floor(milliseconds/1000);
minutes = Math.floor(seconds/60);
minutesTXT = minutes;
secondsTXT = seconds-minutes*60;
tensTXT = Math.round((milliseconds-seconds*1000)/10); if (minutesTXT<10) {
minutesTXT = "0"+minutesTXT;
}
if (secondsTXT<10) {
secondsTXT = "0"+secondsTXT;
}
if (tensTXT<10) {
tensTXT = "0"+tensTXT;
}
_root.bestLapTXT = minutesTXT+"."+secondsTXT+"."+tensTXT;
} //setam timpul initial ca fiind momentul cand masina a trecut de linia de sosire _root.lapTime = getTimer();
}

5. Si acum inca o data. (promit ca este ultima data) inapoi la functia "step", haideti sa analizam liniile noi.

//puncte de verificare //verificam daca masina "atinge" punctul de verificare curent (punctul curnent poate fi doar primul sau al2lea; primul este linia de start/finish) if (_root["car"+who].hitTest(_root["checkpoint"+_root["currentCheckpoint"+who]])) {
//daca punctul curent e cel de start/finish crestem numarul turei if (_root["currentCheckpoint"+who] == 1) {
//daca tura curenta nu este 0, verificam daca are cel mai bun timp if (_root["currentLap"+who] != 0) {
_root.setBestLap();
} //daca este ultimul tur, _root se ma muta la cadrul "finish" if (_root["currentLap"+who] == _root.totalLaps){
_root.gotoAndStop("finish");
}else{
_root["currentLap"+who]++;
} _root.currentLapTXT = _root["currentLap"+who]+"/10";
}

//setam ca verificarea sa se faca la urmatorul checkpoint _root["currentCheckpoint"+who]++; //daca punctul de verificare este ultimul, setam noul punct la linia de start if (_root["currentCheckpoint"+who]>_root.checkpoints) {
_root["currentCheckpoint"+who] = 1;
}
}

6. Asta este tot :) Haideti acum sa vedem ultimele retusuri grafice, si sa vedem jocul nostru complet.

« Pasul Anterior   Pasul Urmator »
© Witchhut SRL toate drepturile rezervate