Stundas uzdevums: Konstruēt programmas "atmiņu", definējot mainīgos un konstantes, lai manipulētu ar spēles pamatdatiem un kontrolētu to izvadi pārlūka konsolē.
2.6.1. Pieraksta, lasa un izpilda algoritmus; 5.2.1. Kritiskā domāšana un problēmrisināšana; 5.2.6. Digitālā pratība.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ļā.
JavaScript (JS) ir programmēšanas valoda, kas padara lapu interaktīvu. Lai programma varētu kaut ko aprēķināt (piemēram, spēlētāja punktus), tai šī informācija ir jāsaglabā mainīgajos - "kastēs" ar nosaukumiem.
1. Failu sasaiste:
Lai pārlūks zinātu, ka HTML failam ir pievienota loģika, mums tie ir jāsavieno, izmantojot <script> tagu. Tā atribūts src (source) norāda uz Tavu JS failu.
<!-- Šo rindu liek HTML faila beigās, tieši virs </body> -->
<script src="script.js"></script>2. Datu uzglabāšana:
| Veids | Atslēgvārds | Lietojums |
|---|---|---|
| Mainīgais | let |
Vērtībām, kas mainīsies (punkti, dzīvības). |
| Konstante | const |
Vērtībām, kas paliek nemainīgas (spēles nosaukums). |
Izstrādes laikā mēs izmantojam console.log(), lai nosūtītu ziņojumus uz pārlūka slēpto konsoli (F12), pārbaudot, vai kods strādā pareizi.
Š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 3.1 Ievads JavaScript un mainīgie; detalizētu izpratni veidosi nākamajos uzdevumos.
Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.
<!-- Šo rindu liek HTML faila beigās, tieši virs </body> -->
<script src="script.js"></script>index.html faila <body> daļā.Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.
script.js un pievieno spēles sākuma mainīgos faila augšā: let punkti = 0; let dzivibas = 3;.index.html elementu <p id="punkti-parads">Punkti: 0</p>.script.js funkciju atjaunotEkranu() kas ieraksta punkti vērtību šajā elementā.atjaunotEkranu() uzreiz pēc tās definēšanas - pārbaudi, ka pārlūkā redzams "Punkti: 0".punkti = 10 un izsauc atjaunotEkranu() vēlreiz - pārbaudi, ka ekrāns rāda jauno vērtību.id HTML un JS sakrīt.git commit -m "Add game state variables and display".Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.
console.log(punkti) - pārliecinies, ka izdrukājas 0.punkti = 50; atjaunotEkranu(); - pārbaudi, ka ekrāns parāda "Punkti: 50".const mainīgo konsolē - pārbaudi, kāda kļūda parādās un kāpēc.console.log("Spēle sākusies! Dzīvības: " + dzivibas) un pārbaudi konsoli.let, bet nemainīgiem datiem - const.Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.
let limenis = 1; un elementu <p id="limenis-parads">Līmenis: 1</p>.atjaunotEkranu(), lai tā rāda arī līmeni.<button onclick="nakaisLimenis()">Nākamais līmenis</button>.script.js un pievieno function nakaisLimenis() { limenis++; atjaunotEkranu(); }.git commit -m "Add level display and next level button".const vērtību. Nomaini to uz let.src="script.js" precīzi sakrīt ar faila nosaukumu mapē.// 1. Mainīgo definēšana
let skolotajs = "Eduards Baumanis";
let palidzejis = 0;
let nokaitinats = 0;
const uzvarasPunkti = 100;
// 2. Sākotnējā izvade konsolē
console.log("Sākam stundu!");
console.log("Stundas sākumā skolotājs palīdzējis: " + palidzejis + " reizes.");
// 3. Vērtību mainīšana (Manuāla simulācija skriptā)
nokaitinats = nokaitinats + 1; // Iegūstam 1 nokāri
console.log("Skolotājs ir nokaitināts: " + nokaitinats + " reizes.");
// 4. Funkcija interaktivitātei (Izsauc ar HTML pogu)
// HTML failā jābūt:
function prasiPalidzibu() {
palidzejis = palidzejis + 1;
console.log("Skolotājs tikko palīdzēja! Kopā palīdzēts: " + palidzejis + " reizes.");
}