5.3. tēma: Spēles pamatloģikas programmēšana

Tavs šīs stundas izaicinājums: Apvienot UI elementus ar spēles dzinēju, nodrošinot pilnu spēles ciklu: palaišanu, aktīvo darbību un rezultātu fiksēšanu.

2.6.1. Programmē un strukturē kodu; 2.6.2. Veic algoritmu un programmu testēšanu.

Teorija: Spēles stāvokļa vadība

Laba spēle sastāv no skaidriem stāvokļiem (States). Tavai programmai ir jāzina:

Svarīgi: Atceries vienmēr resetot (atjaunot uz sākuma vērtībām) mainīgos, kad spēle tiek sākta no jauna, citādi punkti turpinās skaitīties no iepriekšējās reizes!

1. uzdevums: Starta pogas loģika

Nodrošināt, ka spēle sākas tikai tad, kad lietotājs nospiež pogu, nevis uzreiz ielādējot lapu.

Izpildes soļi:

  1. Izveido galveno funkciju saktSpeli().
  2. Šajā funkcijā ieraksti kodu, kas paslēpj sākuma ekrānu (pieliek .hidden klasi).
  3. Palaid visus setInterval vai requestAnimationFrame ciklus tieši šīs funkcijas iekšpusē.
  4. Piesaisti šo funkciju pogai "SĀKT", izmantojot addEventListener.

2. uzdevums: Varoņa un šķēršļu mijiedarbība

Aktualizēt kustības un sadursmju loģiku, lai tā strādātu ar jaunajiem UI elementiem.

Izpildes soļi:

  1. Pārliecinies, ka tavs keydown klausītājs darbojas tikai tad, kad spēle ir aktīva.
  2. Ievieto sadursmju pārbaudi galvenajā spēles ciklā.
  3. Kad notiek sadursme, izsauc funkciju beigtSpeli(), kas apstādina visus taimerus un parāda beigu ziņojumu.

3. uzdevums: Rezultātu atjaunošana reāllaikā

Savienot spēles mainīgos ar HUD paneli, lai spēlētājs redzētu savu progresu.

Izpildes soļi:

  1. Katru reizi, kad mainās punkti vai laiks, nekavējoties atjaunini atbilstošā HTML elementa innerText.
  2. Pārbaudi, vai pēc spēles beigām punkti tiek saglabāti un parādīti "Game Over" ekrānā.
  3. Veic Commit un Push ar ziņu "Pamatloģika ir pabeigta un spēle ir spēlējama".

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

Koda piemērs: Pilnais sākuma cikls

let spelesIntervals;
let punkti = 0;

function saktSpeli() {
    // 1. Atiestatām datus
    punkti = 0;
    atjaunotHUD();
    
    // 2. UI vadība
    document.getElementById("start-screen").style.display = "none";
    
    // 3. Palaižam dzinēju
    spelesIntervals = setInterval(galvenaisCikls, 20);
}

function galvenaisCikls() {
    kustinatObjektus();
    parbauditSadursmes();
}

function beigtSpeli() {
    clearInterval(spelesIntervals);
    document.getElementById("final-score").innerText = punkti;
    document.getElementById("game-over-screen").style.display = "block";
}
⬅ Iepriekšējā stunda Nākamā stunda ➡