ebSkola

2. tēma / 2.6

2.6 Pabeidz noformēto spēles lapu — projekta 2. daļa

Šodien: Pabeidz spēles lapu ar krāsām, attēlu, skaņu un strādājošu punktu pogu.

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

Īsā teorija

Lapas noformējumam jāpalīdz atrast spēles mērķi un vadību.

Maini krāsas, tēlus un tekstus pēc savas idejas. Saglabā punktu pogas darbību.

Pārbaudi rezultātu parastā un šaurākā pārlūka logā. 

button { background-color: #245b91; color: white; border-radius: 8px; }

Sākuma kods un darba vieta

Turpini savu iepriekšējās nodarbības projektu pēc 1. uzdevuma soļiem. Ja tā nav, šeit ir pilns sākuma paraugs. Jauno kopiju saglabā kā index.html mapē Desktop/datorika9-tema2 .

Lejupielādēt index.html

Lejupielādēt arī pilnu komplektu 26.zip — HTML, attēls un skaņa.

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; }
body { background-color: #edf5ff; color: #17212b; }
button { background-color: #245b91; color: white; border: 0; border-radius: 8px; }
</style>
</head>
<body>
<h1>Zvaigžņu mednieks</h1>
<p>Savāc piecas zvaigznes. Spied uz zvaigznes, lai iegūtu punktus.</p>
<img src="atteli/varonis.svg" alt="Zils kvadrātveida robots" width="128">
<p>Uzvaras skaņa:</p>
<audio controls src="skanas/klikskis.wav"></audio>
<p id="punkti">Punkti: 0</p>
<button onclick="savakt()">Savākt zvaigzni</button>
<script>
// Gatava poga. Šajā tēmā mācies noformēt lapu un sakārtot failus.
let punkti = 0;
function savakt() {
  punkti = punkti + 1;
  document.getElementById("punkti").textContent = "Punkti: " + punkti;
}
</script>
</body>
</html>

1. uzdevums

Turpini projektu

Vide: VS Code

  1. Atver savu 25.html un ar File → Save As saglabā kā index.html tēmas mapē.
  2. Ja darba nav, lejupielādē 26.zip , izvelc to un nokopē saturu tēmas mapē. Tajā ir viss vajadzīgais.
  3. Pārbaudi, vai nosaukums, noteikumi un attēla apraksts atbilst tavai idejai.

Gatavs, kad: index.html ir tavas spēles saturs.

2. uzdevums

Pabeidz noformējumu

Vide: VS Code

  1. Izvēlies lapas, teksta un pogas krāsas. Saglabā skaidru teksta un fona atšķirību.
  2. CSS daļā pievieno h1 { text-align: center; } un pielāgo pogas noapaļojumu.
  3. Izveido vai papildini README.md ar spēles nosaukumu, mērķi un norādi “Atver index.html pārlūkā”.

Gatavs, kad: Lapai ir saskaņots noformējums un atvēršanas norāde.

3. uzdevums

Pārbaudi un iesniedz projektu

Vide: Pārlūks → VS Code → GitHub

  1. Pārlūkā pārbaudi attēlu un skaņu. Nospied punktu pogu trīs reizes: jābūt 3 punktiem.
  2. Samazini loga platumu. Pārbaudi, ka teksts un pogas ietilpst lapā.
  3. Nosūti visus projekta failus uz GitHub. Tur pārbaudi index.html , abas resursu mapes un README.md .
  4. Iesniedz GitHub projekta saiti.

Gatavs, kad: Projekta saite satur visu lapas palaišanai vajadzīgo.

Iesniedz 3. uzdevuma rezultātu

Iesniedz GitHub projekta saiti . Projektā jābūt pabeigtajam index.html un šajā nodarbībā prasītajiem failiem.

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

  • Lapā ir savs nosaukums, noteikumi un pielāgotas krāsas.
  • Attēls, skaņa un punktu poga darbojas arī šaurākā logā.
  • Iesniegtajā GitHub projektā ir index.html, resursi un README.

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 2.6 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema2 . 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: Iezīmē pogu ar peli

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

  1. Pievieno CSS noteikumu button:hover { outline: 3px solid #17212b; } .
  2. Pārbaudi, ka pogas teksts paliek salasāms.
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.4.1 SR 2.4.8 SR 2.4.10 SR 2.5.3

Kursa nosacījumi un satura pārklājums