4.4. tēma: Laika kontrole (Timers) un spēles cikls

Tavs šīs stundas izaicinājums: Izveidot automātisku spēles ciklu, izmantojot laika kontroles funkcijas, lai spēles elementi (šķēršļi, laika atskaite) darbotos patstāvīgi bez lietotāja iejaukšanās.

2.6.1. Pieraksta un izpilda algoritmus; 3.4.3. Skaidro tehnoloģisko procesu norisi (reāllaika sistēmas).

Teorija: Kas ir Spēles Cikls (Game Loop)?

Gandrīz visas datorspēles pamatā ir "Game Loop" – kods, kas atkārtojas desmitiem reižu sekundē (FPS - frames per second). Tas dara trīs lietas: nolasa spēlētāja ievadi, atjaunina pozīcijas un pārzīmē ekrānu.

setInterval(funkcija, milisekundes): Iebūvēts JS rīks, kas liek pārlūkam atkārtoti izsaukt norādīto funkciju ik pēc noteikta laika (1000 ms = 1 sekunde).
clearInterval(id): Rīks, kas aptur iepriekš sākto ciklu. Tas ir svarīgi, lai spēle apstātos, kad iestājas "Game Over" vai beidzas laiks.
Automātiskā kustība: Ja mēs `setInterval` ciklā katru reizi palielinām ienaidnieka `X` koordinātu par 5 pikseļiem (ik pēc 20ms), cilvēka acij izskatīsies, ka objekts plūdeni slīd pa ekrānu.

1. uzdevums: Laika atskaites (Timer) izveide

Izmantot `setInterval`, lai izveidotu laika atskaiti, kas samazina atlikušo spēles laiku ik sekundi.

Izpildes soļi:

Sava index.html faila saskarnē pievieno: <h3>Atlikušais laiks: <span id="laiks">30</span></h3>.
JS failā izveido mainīgo let atlikusaisLaiks = 30;.
Izveido funkciju function laikaAtskaite() { ... }, kas samazina atlikusaisLaiks par 1 un atjaunina HTML innerText.
Izsauc to ar intervālu: let spelesTaimeris = setInterval(laikaAtskaite, 1000);. Pārbaudi pārlūkā, kā skaitļi paši nomainās ik sekundi!

2. uzdevums: Cikla apturēšana un "Game Over"

Iemācīties apturēt laika atskaiti, kad tā sasniedz nulli, lai neaizietu negatīvos skaitļos.

Izpildes soļi:

Papildini savu laikaAtskaite() funkciju ar if sazarojumu.
Pārbaudi: if (atlikusaisLaiks <= 0) { ... }.
Iekšā šajā `if` blokā izsauc clearInterval(spelesTaimeris); un izvadi uz ekrāna ziņojumu "Laiks beidzies!". Pārbaudi kodu, uzliekot sākuma laiku uz 3 sekundēm, lai ātrāk notestētu.

3. uzdevums: Automātiska ienaidnieka kustība

Izmantot ātru intervālu, lai izveidotu plūdenu objekta animāciju ekrānā.

Izpildes soļi:

HTML izveido jaunu bloku <div id="ienaidnieks"></div> (ar sarkanu krāsu un `position: absolute;` CSS failā).
JS failā izveido mainīgo let ienaidnieksY = 0;.
Izveido ātru intervālu (piemēram, ik pēc 20ms jeb 50 FPS): let ienaidniekaKustiba = setInterval(kustinatIenaidnieku, 20);.
Funkcijā kustinatIenaidnieku() katru reizi palielini ienaidnieksY par 2 un atjaunini document.getElementById("ienaidnieks").style.top = ienaidnieksY + "px";. Ienaidniekam jāsāk "krist" uz leju! Sinhronizē darbu ar GitHub.

Biežākās kļūdas (un kā tās labot):

"Zūdošais" taimera ID: Ja definēsi let spelesTaimeris = setInterval(...) funkcijas iekšpusē, tu nevarēsi to apturēt ar clearInterval() citā funkcijā (Scope kļūda). Taimera mainīgo vienmēr definē faila sākumā!
Paātrināšanās kļūda (Multiple intervals): Ja funkcija, kas iedarbina setInterval, tiek izsaukta vairākas reizes (piemēram, katru reizi nospiežot "Sākt spēli"), tiks palaisti vairāki paralēli taimeri, un laiks vai kustība kļūs neprātīgi ātra. Vienmēr pārbaudi, vai iepriekšējais intervāls ir apturēts pirms jauna sākšanas.
Neaizmirsti "px": Automātiskā kustība nestrādās, ja piemirsīsi pievienot mērvienību (...style.top = Y + "px").

Koda piemērs

let atlikusaisLaiks = 10;

// Definējam mainīgo intervālam, lai vēlāk to varētu apturēt
let taimerisID; 

function atjauninotLaiku() {
    atlikusaisLaiks--; // Samazinām par 1
    document.getElementById("laiks").innerText = atlikusaisLaiks;

    // Pārbaudām, vai laiks beidzies
    if (atlikusaisLaiks <= 0) {
        clearInterval(taimerisID); // Apturam taimeri
        console.log("Spēle beigusies! Laiks iztecēja.");
        
        // Šeit mēs varētu apturēt arī ienaidnieku kustību
        // clearInterval(ienaidniekaKustiba);
    }
}

// Palaižam taimeri ik pēc 1000 milisekundēm (1 sekunde)
taimerisID = setInterval(atjauninotLaiku, 1000);

(Pārlūkā laiks samazināsies ik sekundi, līdz apstāsies pie 0, izvairoties no negatīviem skaitļiem, un konsolē parādīsies paziņojums par spēles beigām.)