5.6 Noslēguma projekts: Pilnvērtīga spēle internetā

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.6 Noslēguma projekts: Pilnvērtīga spēle internetā; 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.6 Noslēguma projekts: Pilnvērtīga spēle internetā</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.6 Noslēguma projekts: Pilnvērtīga spēle internetā";
});

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 GitHub.com un pārbaudi, ka repozitorijā ir visi nepieciešamie faili: index.html, css/style.css, js/script.js.
2. Iespējo GitHub Pages: Settings → Pages → Branch: main → Save.
3. Atver iegūto Pages saiti pārlūkā - pārbaudi, vai spēle ielādējas bez kļūdas.
4. Atver DevTools → "Network" - pārbaudi, ka visi attēli un skaņas ielādējas (nav 404).
5. Pārbaudi spēli uz citas ierīces vai cita pārlūka - pārbaudi, ka tā darbojas arī tur.
6. Salabo pirmo ceļa kļūdu, kas novērota citā ierīcē - lielo/mazo burtu atšķirība bieži ir iemesls.
7. Atjaunini README.md ar publisko Pages saiti un spēles vadības instrukciju.
8. Veic git commit -m "Publish game to GitHub Pages" un git push.

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

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

1. Atver GitHub Pages saiti un izspēlē pilnu kārtu - pārbaudi, ka spēle darbojas publiski.
2. Kopīgo saiti ar klasesbiedru - lūdz viņam atvērt un izmēģināt spēli savā ierīcē.
3. Pārbaudi, vai klasesbiedrs saprot, kā sākt spēli, bez tava paskaidrojuma.
4. Salabo vienu UX problēmu, ko klasesbiedrs pamana (piemēram, neskaidra poga vai trūkstoša instrukcija).
5. Veic pēdējo git commit -m "Final polish before presentation".
6. Pārbaudi, ka GitHub commit vēsturē redzamas vismaz 5 darba kārtas ar saprotamiem ziņojumiem.
7. Pieraksti vienu secinājumu: ko tu darītu citādi, ja sāktu šo projektu no jauna.

Papildu uzdevums - Pievieno mazu funkciju

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

1. Izveido GIF ekrānšāviņu no savas spēles un ieliec to README.md.
2. Pievieno README sadaļu "Zināmās kļūdas" ar 1-2 nepabeigtām vai neizlabotām lietām.
3. Pievieno sadaļu "Nākamie uzlabojumi" ar 2-3 idejām, ko pievienotu, ja būtu vairāk laika.
4. Pārbaudi, ka GitHub Pages saite ir aktīva un atveras mazāk kā 5 sekundēs.
5. Sagatavo 3 teikumu prezentāciju: spēles mērķis, galvenā JS funkcija, ko iemācīji.
6. Veic git commit -m "Update README with screenshots and known issues".
7. Parādi GitHub Pages saiti skolotājam un pastāsti par savu galveno koda lēmumu.