ebSkola

1. tēma / 1.5

1.5 Izveido spēles ekrānus — projekta 1. daļa

Šodien: Sāc tēmas noslēguma darbu: izveido saprotamu spēles lapu ar diviem ekrāniem.

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

Īsā teorija

Ekrāna skice rāda, kur atradīsies nosaukums, poga un spēles informācija. To var veidot uzreiz HTML lapā.

Pirmajā ekrānā spēlētājam jāatrod mērķis un sākšanas poga.

hidden paslēpj sadaļu. Sākuma kodā pogas jau pārslēdz abus ekrānus. 

<section id="sakums">
  <h2>Sākuma ekrāns</h2>
  <button onclick="paraditSpeli()">Sākt spēli</button>
</section>

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema1 . 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ā 15.html .
Lejupielādēt 15.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>Mana spēle</h1>
<p>Savāc piecas zvaigznes.</p>
<section id="sakums">
  <h2>Sākuma ekrāns</h2>
  <button onclick="paraditSpeli()">Sākt spēli</button>
</section>
<section id="laukums" hidden>
  <h2>Spēles ekrāns</h2>
  <p>Punkti: 0</p>
  <p>Šeit vēlāk būs spēlētājs.</p>
  <button onclick="paraditSakumu()">Atpakaļ</button>
</section>
<script>
// Gatavā palīdzība pogām. Šodien maini lapas tekstu un izvietojumu.
function paraditSpeli() {
  document.getElementById("sakums").hidden = true;
  document.getElementById("laukums").hidden = false;
}
function paraditSakumu() {
  document.getElementById("sakums").hidden = false;
  document.getElementById("laukums").hidden = true;
}
</script>
</body>
</html>

1. uzdevums

Izveido sākuma ekrānu

Vide: VS Code

  1. Sāc ar 15.html . Izmanto savu spēles ideju.
  2. Nomaini galveno virsrakstu un mērķa teikumu.
  3. Sadaļā sakums pirms pogas pievieno divus vai trīs noteikumus sarakstā.

Gatavs, kad: Sākuma ekrānā ir nosaukums, mērķis un noteikumi.

2. uzdevums

Izveido spēles ekrānu

Vide: VS Code

  1. Atrodi sadaļu id="laukums" .
  2. Teksta “Šeit vēlāk būs spēlētājs” vietā apraksti savu spēlētāju.
  3. Zem punktu rindas pievieno rindkopu ar vadības norādi. Saglabā abas gatavās pogas.

Gatavs, kad: Spēles ekrānā ir punkti, spēlētājs un vadības norāde.

3. uzdevums

Pārbaudi ekrānu pārslēgšanu

Vide: Pārlūks → VS Code

  1. Atver lapu pārlūkā. Nospied Sākt spēli , tad Atpakaļ .
  2. Palūdz klasesbiedram atkārtot abas darbības bez tava skaidrojuma.
  3. Ja vajag, precizē pogas tekstu vai noteikumus. Pārbaudi vēlreiz un nosūti failu uz GitHub.

Gatavs, kad: Abas pogas pārslēdz ekrānus, un teksts atbilst tavai idejai.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 15.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:

  • Sākuma ekrānā ir savas spēles nosaukums, mērķis un noteikumi.
  • Spēles ekrānā ir punkti un vadības norāde.
  • Pogas Sākt spēli un Atpakaļ darbojas.

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 1.5 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema1 . 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: Sakārto spēles informāciju

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

  1. Pievieno spēles ekrānam atsevišķu virsrakstu <h3>Vadība</h3> .
  2. Pārbaudi, vai vadības teksts ir zem šī virsraksta.
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 1.1.2 SR 1.3.2 SR 2.6.1

Kursa nosacījumi un satura pārklājums