ebSkola

3. tēma / 3.5

3.5 Cikls izveido izvēles — projekta 1. daļa

Šodien: Sāc teksta spēles projektu: no saraksta izveido izvēles pogas un skaiti gājienus.

Tēmas projekts · 1. daļa no 2

Īsā teorija

Cikls atkārto darbību. Šeit tas katrai saraksta vietai izveido pogu.

i = 0 sāk ar pirmo vietu. i < vietas.length turpina, kamēr sarakstā vēl ir vietas.

i = i + 1 pāriet pie nākamās vietas. Pogas izveidošanas rindas sākuma kodā jau ir dotas. 

for (let i = 0; i < vietas.length; i = i + 1) {
  // Darbība katrai vietai.
}

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema3 . Ja mapes nav, izveido to darbvirsmā.
  2. Šajā mācību lapā nospied Kopēt sākuma kodu .
  3. VS Code nospied Ctrl+N un ielīmē kodu ar Ctrl+V .
  4. Saglabā ar Ctrl+Shift+S tēmas mapē kā 35.html .
Lejupielādēt 35.html

Atvērt pilno sākuma kodu 
<!DOCTYPE html>
<html lang="lv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana spēle</title>
<style>
body { font-family: Arial, sans-serif; max-width: 680px; margin: 24px auto; padding: 16px; line-height: 1.6; }
button, input { font: inherit; padding: 10px; margin: 4px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

</style>
</head>
<body>
<h1>Dārgumu meklētājs</h1>
<p id="noteikumi">Izvēlies vietu, kur meklēt dārgumus.</p>
<div id="pogas"></div>
<p id="atbilde">Izvēlies vietu.</p>
<p id="gajieni">Gājieni: 0</p>
<button onclick="location.reload()">Sākt no jauna</button>
<script>
// MAINI ŠEIT: vietu nosaukumi.
const vietas = ["Mežs", "Upe", "Pils"];
let gajieni = 0;

// Cikls izveido vienu pogu katrai vietai.
for (let i = 0; i < vietas.length; i = i + 1) {
  const poga = document.createElement("button");
  poga.textContent = vietas[i];
  poga.onclick = function () { izveleties(vietas[i]); };
  document.getElementById("pogas").append(poga);
}

function izveleties(vieta) {
  gajieni = gajieni + 1;
  document.getElementById("atbilde").textContent = "Tu izvēlējies: " + vieta;
  document.getElementById("gajieni").textContent = "Gājieni: " + gajieni;
}
</script>
</body>
</html>

1. uzdevums

Izmēģini izvēļu sarakstu

Vide: VS Code → pārlūks

  1. Sāc ar 35.html .
  2. Pārlūkā nospied visas trīs vietu pogas.
  3. Pārbaudi, ka mainās vietas nosaukums un gājienu skaits.

Gatavs, kad: Saraksta vietām ir strādājošas pogas.

2. uzdevums

Izveido savas spēles vietas

Vide: VS Code

  1. Masīvā vietas ieraksti četras savas vietas.
  2. Nemainot ciklu, saglabā failu.
  3. HTML daļā pielāgo spēles nosaukumu un sākuma norādi.

Gatavs, kad: Spēles kodā ir četras savas vietas.

3. uzdevums

Pievieno piekto vietu un pārbaudi ciklu

Vide: VS Code → pārlūks

  1. Pievieno masīvam piekto vietu. Papildu HTML pogu neraksti.
  2. Atver lapu pārlūkā: jāparādās piecām vietu pogām.
  3. Nospied trīs dažādas vietas. Pārbaudi vietu nosaukumus un gājienu skaitu 3.
  4. Nospied Sākt no jauna : gājieniem jābūt 0. Nosūti darbu uz GitHub.

Gatavs, kad: Cikls veido piecas pogas, un darbojas gājienu skaitīšana.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 35.html skolotāja norādītajā vietā. Šo pašu versiju saglabā arī GitHub.

Stunda ir ieskaitīta, ja 3. uzdevuma rezultāts atbilst visiem šiem punktiem:

  • Ir savs spēles nosaukums un piecas paša izvēlētas vietas.
  • Visas vietu pogas veido for cikls no masīva.
  • Trīs izvēles dod 3 gājienus; sākšana no jauna atjauno 0.

1. un 2. uzdevums sagatavo šo rezultātu. Papildu uzdevums nav vajadzīgs ieskaitei.

Saglabā un nosūti uz GitHub — pogu atgādne

Vide: VS Code / Source Control → GitHub pārlūkā

  1. Ar File → Save All saglabā failus. Atver Source Control ar Ctrl+Shift+G .
  2. Pie Changes nospied + (Stage All Changes). Pārbaudi, ka vajadzīgie faili pārvietojas uz Staged Changes .
  3. Ziņas laukā ieraksti īsu izmaiņu, piemēram, Pabeigts 3.5 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema3 . Jau publicētam projektam spied Sync Changes . Ja pogas nav, atver … → Push .
  5. Pārlūkā atver savu GitHub projektu un pārbaudi faila pēdējās izmaiņas.

Ja Source Control rāda Initialize Repository , vispirms nospied to. Ja parādās kļūda vai sapludināšanas pieprasījums, izmanto palīdzību un palūdz skolotāja atbalstu.

Papildu uzdevums: Numurē vietu pogas

Sāc, kad 3. uzdevums ir gatavs un iesniegts. Ja vēlies paturēt obligāto versiju, saglabā kopiju ar citu nosaukumu.

  1. Maini pogas teksta rindu uz poga.textContent = (i + 1) + ". " + vietas[i]; .
  2. Pārbaudi, ka numerācija sākas ar 1.
Ja kaut kas neizdodas

Palīdzība Git, kontam un darba atvēršanai

Skolotājam: sasniedzamo rezultātu saistība

Šajā nodarbībā vingrina šādu rezultātu daļas no 9. klases saraksta . Piesaiste pati par sevi nenozīmē visa rezultāta apguvi.

SR 2.6.1

Kursa nosacījumi un satura pārklājums