›_ ebskola.lv
← 4.3 4.5 →

4.4 Laika kontrole (Timers) un spēles cikls

Stundas uzdevums: 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).

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

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. 

// Spēles cikls ar setInterval (60 FPS)
let punkti = 0;
const cikls = setInterval(() => {
  punkti += 1;
  document.getElementById("score").textContent = punkti;
}, 1000 / 60);

// Pārtraukšana
clearInterval(cikls);

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 4.4 Laika kontrole (Timers) un spēles cikls; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

// Spēles cikls ar setInterval (60 FPS)
let punkti = 0;
const cikls = setInterval(() => {
  punkti += 1;
  document.getElementById("score").textContent = punkti;
}, 1000 / 60);

// Pārtraukšana
clearInterval(cikls);
  1. Atver darba failu vai rīku. JavaScript fragmentu ievieto script.js failā vai lapas esošajā skripta daļā.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver script.js un pievieno: let ciklsId = null; let speleAktiva = false; let ienX = 0;
  2. Pievieno funkciju saktSpeli(), kas iestata speleAktiva = true un sāk setInterval(spelesCikls, 16).
  3. Pievieno funkciju spelesCikls(), kas palielina ienX += 3 un atjauno ienaidnieka pozīciju; ja ienX > 400, atiestatiet uz 0.
  4. Pievieno funkciju beigtSpeli(), kas izsauc clearInterval(ciklsId) un rāda "Spēle beigusies!".
  5. Atver index.html, pievieno pogas "Sākt" un "Apturēt" un pievieno ienaidnieka elementu ar position: absolute.
  6. Saglabā un atver pārlūkā - nospied "Sākt" un pārbaudi, ka ienaidnieks sāk kustēties pa ekrānu.
  7. Nospied "Apturēt" - pārbaudi, ka kustība apstājas.
  8. Veic git commit -m "Add game loop with setInterval".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver pārlūkā un nospied "Sākt" - pārbaudi, ka ienaidnieks kustās plūdeni bez raustīšanās.
  2. Nospied "Apturēt" un vēlreiz "Sākt" - pārbaudi, ka ienaidnieks sāk no sākuma pozīcijas.
  3. Mēģini nospiest "Sākt" divreiz - pārbaudi, vai ienaidnieks kustās divreiz ātrāk (kļūda!).
  4. Salabo: pirms setInterval izsauc clearInterval(ciklsId).
  5. Palielini ienX += 3 uz += 10 - pārbaudi, ka kustība kļūst ātrāka.
  6. Atjauno uz sākotnējo ātrumu un pārbaudi, ka spēle joprojām darbojas stabili.
  7. Pieraksti vienu secinājumu: kāpēc clearInterval jāizsauc pirms jaunas setInterval sākšanas.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno mainīgo let sekundes = 30; un elementu <p id="taimeris">30</p>.
  2. Pievieno atsevišķu taimeri ar setInterval, kas samazina sekundes par 1 ik sekundi.
  3. Atjaunini <p id="taimeris"> ar aktuālo vērtību katru sekundi.
  4. Kad sekundes <= 0, izsauc beigtSpeli().
  5. Atver pārlūkā, sāc spēli un pārbaudi, ka taimeris iet atpakaļ un spēle beidzas pie 0.
  6. Veic git commit -m "Add countdown timer to game".
  7. Demonstrē klasesbiedram - vai viņš saprot, ka spēle automātiski beidzas pēc 30 sekundēm?

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

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.)
⬅ Iepriekšējā stunda Nākamā stunda ➡