›_ ebskola.lv
← 5.1 5.3 →

5.2 Vizuālo resursu un saskarnes (UI) pabeigšana

Stundas uzdevums: Izveidot funkcionālu un estētisku spēles lietotāja saskarni (UI), iekļaujot sākuma izvēlni un spēles stāvokļa informācijas paneli.

2.4.11. Veido tīmekļa vietnes noformējumu; 1.1.2. Analizē lietojamību un vizuālo komunikāciju.

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: UI vs UX spēlēs

Spēļu izstrādē mēs runājam par diviem svarīgiem jēdzieniem:

Laba prakse: Izmanto display: none; un display: block; savā CSS, lai pārslēgtos starp "Sākuma ekrānu" un pašu "Spēles laukumu" bez jaunas lapas pārlādēšanas.

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.2 Vizuālo resursu un saskarnes (UI) pabeigš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.

<section class="iesildisanas-demo">
  <h2>5.2 Vizuālo resursu un saskarnes (UI) pabeigšana</h2>
  <p id="rezultats">Sākuma teksts</p>
  <button id="poga">Pārbaudīt</button>
</section>
.iesildisanas-demo {
  padding: 16px;
  border: 2px solid #FFB142;
  border-radius: 6px;
}

.iesildisanas-demo button {
  cursor: pointer;
}
const rezultats = document.querySelector("#rezultats");
const poga = document.querySelector("#poga");

poga.addEventListener("click", () => {
  rezultats.textContent = "Kods darbojas: 5.2 Vizuālo resursu un saskarnes (UI) pabeigšana";
});
  1. Atver darba failu vai rīku. Sagataves ievieto atbilstošajos projekta failos: index.html, style.css un script.js.
  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 index.html un izveido trīs ekrānus: sākuma izvēlni (#menu), spēles logu (#spele-logs) un beigu ekrānu (#beigas).
  2. Sākumā spēles logam un beigu ekrānam pievieno style="display: none;".
  3. Atver script.js un atjaunini saktSpeli(): paslēp #menu un parādi #spele-logs.
  4. Atjaunini beigtSpeli(): paslēp #spele-logs un parādi #beigas ar tekstu "Spēle beigusies! Rezultāts: X".
  5. Pievieno #beigas pogu "Mēģināt vēlreiz", kas izsauc saktSpeli().
  6. Saglabā un atver pārlūkā - pārbaudi, ka sākumā redzams tikai menūs.
  7. Salabo, ja kāds ekrāns nerādās pareizajā laikā - pārbaudi display: none un display: block vērtības.
  8. Veic git commit -m "Add start menu and game over screen".

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ā - pārbaudi, ka pirmais redzamais ekrāns ir menūs.
  2. Nospied "Sākt" - pārbaudi, ka menūs pazūd un parādās spēles logs ar HUD.
  3. Izsauc beigtSpeli() no konsoles - pārbaudi, ka spēles logs pazūd un parādās beigu ekrāns.
  4. Nospied "Mēģināt vēlreiz" - pārbaudi, ka spēle sākas no sākuma ar atjaunotiem datiem.
  5. Salabo, ja kāds ekrāns netiek paslēpts - pārliecinies, ka visi 3 ekrāni nav vienlaikus redzami.
  6. Pārbaudi, ka HUD (punkti, dzīvības) atjaunojas pēc katra restarta.
  7. Pieraksti vienu secinājumu: kāpēc display: none ir labāks par elementu dzēšanu no DOM.

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno CSS animāciju menū pārejai: #menu { transition: opacity 0.3s; }.
  2. Sākumā iestati #menu { opacity: 1; }, bet pirms paslēpšanas - opacity: 0.
  3. Izmanto setTimeout, lai pēc pārejas beigām piešķirtu display: none.
  4. Atver pārlūkā - pārbaudi, ka pāreja starp ekrāniem ir gluda, ne uzreiz.
  5. Salabo, ja animācija nedarbojas - pārbaudi, vai CSS transition ir pareizajā elementā.
  6. Veic git commit -m "Add screen transition animation".
  7. Demonstrē klasesbiedram - vai pāreja starp ekrāniem izskatās profesionāli?

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

Koda piemērs: Ekrānu pārslēgšana

/* CSS ekrānu kontrolei */
#starta-ekrans {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    color: white;
    display: flex; /* Centrē saturu */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Vienmēr pa virsu */
}

/* Klase, ko pievienosim ar JS, lai paslēptu ekrānu */
.hidden {
    display: none !important;
}
// JavaScript funkcija spēles sākšanai
function saktSpeli() {
    // Paslēpjam sākuma ekrānu
    document.getElementById("starta-ekrans").classList.add("hidden");
    // Šeit sākas spēles loģika un taimeri...
}
⬅ Iepriekšējā stunda Nākamā stunda ➡