3.4. tēma: Masīvi (Arrays) un datu strukturēšana

Tavs šīs stundas izaicinājums: Pielietot masīvus, lai organizētu, saglabātu un atjauninātu vairākus saistītus spēles elementus (inventāru un rezultātus) vienuviet, veidojot interaktīvu datu bāzi.

2.6.1. Izmanto atbilstošas vienkāršas datu struktūras; 2.4.2. Strukturē datus, izvēloties racionālākos paņēmienus.

Teorija: Datu vilciens (Masīvi)

Mainīgais ir kā viena kaste. Bet ko darīt, ja spēlētājam ir mugursoma ar 10 lietām? Mēs izmantojam masīvu (Array) – tas ir kā vilciens, kur katrā vagonā ir savs saturs. Programmēšanā vagonus (indeksus) sāk skaitīt no 0!

Darbība Kods (Sintakse) Skaidrojums
Izveidot let soma = ["Koks", "Akmens"]; Izmanto kvadrātiekavas [ ] un komatus.
Izlasīt (Indekss) console.log( soma[0] ); Dabū pirmo elementu ("Koks").
Pievienot soma.push("Zelts"); Pieliek jaunu vagonu vilciena beigās.
Saskaitīt soma.length Pasaka, cik elementu kopā ir masīvā.

1. uzdevums: "Mugursomas atvēršana" (20 min)

Izveidot spēlētāja inventāra sarakstu un iemācīties no tā izvilkt konkrētus datus pēc pogas nospiešanas.

Izpildes soļi:

  1. HTML failā pievieno pogu: <button onclick="parbauditSomu()">Apskatīt somu</button>.
  2. Savā script.js failā (pašā augšā, ārpus funkcijām) izveido masīvu:
    let inventars = ["Koka Zobens", "Vairogs", "Dziras pudele"];
  3. Izveido funkciju parbauditSomu().
  4. Funkcijas iekšienē izvadi konsolē otro elementu (Vairogu). Atceries, ka indekss otrajam elementam ir 1:
    console.log("Mana aizsardzība: " + inventars[1]);
  5. Pārbaudi lapā, vai poga strādā un konsole parāda pareizo vārdu.

2. uzdevums: "Atrasta dārgumu lāde!" (20 min)

Simulēt spēles gaitu, dinamiski pievienojot jaunas lietas inventāram un nomainot esošās.

Izpildes soļi:

  1. HTML failā pievieno otru pogu: <button onclick="atvertLadi()">Atvērt lādi</button>.
  2. JS failā izveido funkciju atvertLadi().
  3. Funkcijā pievieno jaunu mantu masīvam: inventars.push("Maģiskais kristāls");.
  4. Pārveido pirmo elementu (nomaini "Koka Zobens" uz labāku ieroci):
    inventars[0] = "Uguns Zobens";
  5. Izmanto inventars.length, lai paziņotu, cik mantu tagad ir:
    alert("Tu atradi kristālu! Somā tagad ir " + inventars.length + " priekšmeti.");

3. uzdevums: Rezultātu tablo savienošana ar HTML (20 min)

Izvadīt spēles labāko rezultātu tieši HTML lapā, izvelkot to no masīva.

Izpildes soļi:

  1. JS faila augšā izveido jaunu masīvu ar skaitļiem: let topRezultati = [150, 300, 950, 420];.
  2. HTML failā (zem pogām) pievieno tekstu ar ID:
    <p>Labākais sasniegums: <span id="top-score">?</span> punkti</p>.
  3. HTML failā pievieno pogu "Rādīt labāko rezultātu", kas izsauc funkciju raditRezultatu().
  4. JS failā izveido šo funkciju. Tajā atrodi HTML elementu un ievieto trešo rezultātu (950):
    document.getElementById("top-score").innerText = topRezultati[2];

4. uzdevums: Izaicinājums - Mantu zaudēšana (10 min)

Izmantot jaunu komandu, lai noņemtu elementus no masīva, ja spēlētājs saņem triecienu.

Izpildes soļi:

  1. Papildus .push() (kas pievieno elementu beigās), eksistē komanda .pop(), kas izdzēš pašu pēdējo elementu masīvā.
  2. Izveido HTML pogu "Saņemt triecienu".
  3. Izveido funkciju, kura izpilda inventars.pop(); un konsolē izvadi atjaunoto masīvu ar console.log(inventars);.
  4. Spied pogu "Atvērt lādi", tad "Saņemt triecienu" un skaties, kā tavas mantas parādās un pazūd! Veic failu Commit & Push.

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

Koda piemērs

// 1. Masīva definēšana
let spelesLimeni = ["Vienkāršs", "Vidējs", "Sarežģīts"];
let iegutiePunkti = [10, 50, 100];

// 2. Elementa nolasīšana (izvada: Vidējs)
console.log("Izvēlētais līmenis: " + spelesLimeni[1]);

// 3. Masīva papildināšana un garuma noskaidrošana
spelesLimeni.push("Eksperts"); // Pievienojam 4. līmeni
console.log("Kopējais līmeņu skaits: " + spelesLimeni.length);

// 4. Integrācija HTML
document.getElementById("nakamais-limenis").innerText = spelesLimeni[spelesLimeni.length - 1]; 
// length - 1 vienmēr atgriezīs pašu pēdējo elementu!
Konsolē:
Izvēlētais līmenis: Vidējs
Kopējais līmeņu skaits: 4

HTML elementā (#nakamais-limenis) parādīsies: Eksperts
⬅ Iepriekšējā stunda Nākamā stunda ➡