ebSkola

4. tēma / 4.3

4.3 Pārvieto un maini lapas elementus

Šodien: Vadi spēlētāju četros virzienos un parādi tā atrašanās vietu.

Īsā teorija

JavaScript var atrast HTML elementu pēc id un mainīt tā tekstu vai stilu. Šādi strādājam ar lapas elementiem jeb DOM.

style.left nosaka attālumu no kreisās malas; style.top — no augšas. Mazāks Y nozīmē augstāk.

kustinat(dx, dy) saņem divas izmaiņas. Piemēram, kustinat(0, -10) kustina uz augšu. 

speletajs.style.left = x + "px";
speletajs.style.top = y + "px";

Sākuma kods un darba vieta

Vide: mācību lapa → VS Code

  1. VS Code ar File → Open Folder atver Desktop/datorika9-tema4 . 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ā 43.html .
Lejupielādēt 43.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; }
#laukums { position: relative; width: 300px; height: 220px; max-width: 100%; background: #edf5ff; outline: 2px solid #245b91; overflow: hidden; }
#speletajs, #pretinieks, #moneta { position: absolute; width: 30px; height: 30px; }
#speletajs { background: #245b91; left: 20px; top: 160px; }
#pretinieks { background: #b3261e; left: 220px; top: 160px; }
#moneta { background: #ffca28; left: 140px; top: 160px; border-radius: 50%; }
</style>
</head>
<body>
<h1>Spēles koordinātes</h1>
<p>Vadi kvadrātu ar pogām.</p>
<div id="laukums"><div id="speletajs"></div></div>
<button onclick="kustinat(-10, 0)">←</button>
<button onclick="kustinat(10, 0)">→</button>
<!-- ŠEIT VERTIKĀLĀS POGAS -->
<p id="vieta"></p>
<script>
let x = 20;
let y = 160;
function paradit() {
  const speletajs = document.getElementById("speletajs");
  speletajs.style.left = x + "px";
  speletajs.style.top = y + "px";
  document.getElementById("vieta").textContent = "X: " + x + ", Y: " + y;
}
function kustinat(dx, dy) {
  x = x + dx;
  y = y + dy;
  // Gatavas robežas abiem virzieniem.
  const laukums = document.getElementById("laukums");
  x = Math.max(0, Math.min(laukums.clientWidth - 30, x));
  y = Math.max(0, Math.min(laukums.clientHeight - 30, y));
  paradit();
}
paradit();
</script>
</body>
</html>

1. uzdevums

Maini sākuma vietu

Vide: VS Code

  1. Sāc ar 43.html .
  2. JS sākumā iestati x = 40 un y = 100 .
  3. Nomaini lapas virsrakstu un CSS spēlētāja krāsu.

Gatavs, kad: Spēlētājam ir paša izvēlēts izskats un jaunā sākuma vieta.

2. uzdevums

Pievieno kustību augšup un lejup

Vide: VS Code

  1. HTML komentāra vietā pievieno <button onclick="kustinat(0, -10)">↑</button> .
  2. Zem tās pievieno otru pogu ar kustinat(0, 10) un tekstu ↓.
  3. Vadības norādē pasaki, ka pieejami četri virzieni.

Gatavs, kad: Ir četras kustības pogas.

3. uzdevums

Pārbaudi koordinātes un atjaunošanu

Vide: VS Code → pārlūks

  1. HTML pievieno pogu <button onclick="location.reload()">Sākuma vieta</button> .
  2. Atver lapu: jābūt X: 40, Y: 100. Nospied → un ↑: jābūt X: 50, Y: 90.
  3. Pārbaudi visas malas un pogu Sākuma vieta . Tai jāatjauno X: 40, Y: 100.
  4. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Koordinātes atbilst kustībai un sākuma vietu var atjaunot.

Iesniedz 3. uzdevuma rezultātu

Iesniedz pabeigto 43.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 vieta ir (40; 100), un spēlētāja krāsa ir mainīta.
  • Ir četras kustības pogas un redzamas abas koordinātes.
  • Pēc → un ↑ ir (50; 90); atjaunošanas poga atgriež (40; 100).

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 4.3 darbs . Spied Commit .
  4. Ja šī tēmas mape vēl nav GitHub, spied Publish to GitHub un izveido publisku projektu datorika9-tema4 . 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: Pievieno monētu

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

  1. Laukuma iekšpusē pievieno <div id="moneta"></div> .
  2. CSS maini monētas left un top tā, lai tā būtu sasniedzama.
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