›_ ebskola.lv
← 5.2 5.4 →

5.3 Spēles pamatloģikas programmēšana

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

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: Spēles stāvokļa vadība

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

Piezīme: 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! 

// Spēles stāvokļa pārvaldība
const spele = { dzivibas: 3, punkti: 0, limenis: 1 };

function zaudet_dzivibu() {
  spele.dzivibas--;
  if (spele.dzivibas <= 0) gameOver();
}

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 5.3 Spēles pamatloģikas programmēšana; 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 stāvokļa pārvaldība
const spele = { dzivibas: 3, punkti: 0, limenis: 1 };

function zaudet_dzivibu() {
  spele.dzivibas--;
  if (spele.dzivibas <= 0) gameOver();
}
  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 izveido stāvokļa objektu: const spele = { punkti: 0, dzivibas: 3, limenis: 1, aktiva: false };
  2. Atjaunini saktSpeli(): atiestatiet spele.punkti, spele.dzivibas un iestati spele.aktiva = true.
  3. Izveido funkciju atjaunotHud(), kas vienlaikus atjauno visus HUD elementus (#punkti, #dzivibas, #limenis).
  4. Izsauc atjaunotHud() no saktSpeli(), zaudetDzivibu() un pievienotPunktus().
  5. Saglabā un sāc spēli - pārbaudi, ka HUD rāda 0 punktus un 3 dzīvības.
  6. Ļauj ienaidniekam pietrāpīt - pārbaudi, ka dzīvības samazinās un spēle beidzas pie 0.
  7. Restartē - pārbaudi, ka visi dati atjaunojas.
  8. Veic git commit -m "Implement full game state machine".

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

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

  1. Sāc spēli un pietrāpinies ienaidniekam - pārbaudi, ka dzīvības iet no 3 uz 2.
  2. Pietrāpinies vēlreiz - 2 → 1.
  3. Pietrāpinies trešo reizi - pārbaudi, ka parādās beigu ekrāns un taimers apstājas.
  4. Nospied "Mēģināt vēlreiz" - pārbaudi, ka visi dati ir atjaunoti (3 dzīvības, 0 punkti).
  5. Salabo vienu kļūdu, piemēram, ja punkti turpinās no iepriekšējās kārtas.
  6. Pārbaudi, ka spele.aktiva === false pēc beigu ekrāna parādīšanās.
  7. Pieraksti vienu secinājumu: kāpēc labāk izmantot vienu stāvokļa objektu spele nekā daudzus atsevišķus mainīgos.

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno grūtības palielināšanu: kad spele.punkti >= 50, palielini ienaidnieka ātrumu.
  2. Izmanto mainīgo spele.atrums = 3 spēles ciklā vietā, kur iepriekš bija fiksēts skaitlis.
  3. Kad tiek sasniegts slieksnis, iestati spele.atrums = 6.
  4. Atver pārlūkā - savāc 50 punktus un pārbaudi, ka ienaidnieks kļūst ātrāks.
  5. Salabo, ja ātrums nemainās - pārbaudi, vai nosacījums tiek pārbaudīts katru kadru.
  6. Veic git commit -m "Add difficulty scaling at 50 points".
  7. Demonstrē klasesbiedram - vai viņš pamana, kad ienaidnieks kļūst ātrāks?

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 ➡