2.6 Noslēguma projekts: Stilizēta spēles lapa

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 2.6 Noslēguma projekts: Stilizēta spēles lapa; detalizētu izpratni veidosi nākamajos uzdevumos.

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

.game-container {
  max-width: 720px;
  margin: 32px auto;
  padding: 24px;
  background-color: #393E46;
}

.hero-image {
  max-width: 100%;
  border-radius: 6px;
}

1. Atver darba failu vai rīku. CSS fragmentu ievieto style.css faila beigās.
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 style.css un pārliecinies, ka tas ir pieslēgts index.html un darbojas (bez 404 kļūdas).
2. Pārskati style.css - pārbaudi, ka ir stili vismaz šādiem elementiem: body, h1, button.
3. Pievieno vai uzlabo spēles laukuma stilu: #spele { position: relative; width: 400px; height: 300px; margin: auto; background: #393E46; }.
4. Pārvieto visus attēlus uz mapi assets/images un atjauno ceļus HTML failā.
5. Saglabā un atver pārlūkā - pārbaudi, vai lapa izskatās sakārtota un vizuāli konsekventa.
6. Pārbaudi DevTools konsoli - nav jābūt 404 kļūdām par trūkstošiem failiem.
7. Salabo vienu vizuālu problēmu, piemēram, pārāk mazu tekstu vai nekontrastainās krāsas.
8. Veic git commit -m "Complete styled game page".

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

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

1. Atver index.html pārlūkā un pārbaudi, ka lapa izskatās vizuāli pabeigta.
2. Pārbaudi kontrastu: vai teksts ir viegli salasāms uz fona krāsas?
3. Sašaurina pārlūka logu uz pusi - pārbaudi, vai saturs neizspiežas ārpus ekrāna.
4. Pārbaudi DevTools → "Network" - visi resursi jāielādē ar statusu 200.
5. Salabo vienu stilistisko kļūdu, ko pamana - piemēram, elements bez padding.
6. Pārbaudi GitHub.com - vai ir redzami visi faili pareizajās mapēs?
7. Pieraksti vienu secinājumu: kā CSS, HTML struktūra un attēlu mapes darbojas kopā.

Papildu uzdevums - Pievieno mazu funkciju

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

1. Pievienojiet sākuma ekrānam animāciju: #menu { transition: opacity 0.4s; } un JS kodu, kas nomaina opacity pirms paslēpšanas.
2. Atver pārlūkā un pārbaudi, vai pāreja starp sākuma ekrānu un spēles ekrānu ir gluda.
3. Pievieno Google Fonts fontu: galvē ievieto <link> tagu ar izvēlētu fontu un pielietojiet to body.
4. Pārbaudi, vai jaunais fonts ielādējas un ir redzams lapā.
5. Veic git commit -m "Add screen transition and custom font".
6. Parādi GitHub Pages saiti klasesbiedram - lai viņš atvērt lapu savā ierīcē.
7. Pieraksti, ko uzlabotu vēl, ja būtu vairāk laika - kā nākamās sesijas darba sarakstu.