ebSkola

4. tēma / 4.2

4.2 Vadi spēlētāju ar pogām un taustiņiem

Šodien: Pievieno vadību abos virzienos un pielāgo kustības soli.

Īsā teorija

addEventListener piesaista darbību notikumam. click ir klikšķis; keydown — taustiņa nospiešana.

notikums.key pasaka taustiņa nosaukumu. ArrowLeft ir kreisā bultiņa.

preventDefault() šajā piemērā aptur lapas ritināšanu ar izmantoto bultiņu. 

if (notikums.key === "ArrowLeft") {
  notikums.preventDefault();
  kustinat(-1);
}

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ā 42.html .
Lejupielādēt 42.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>Vadi spēlētāju</h1>
<p>Spied pogas vai labo bultiņu uz tastatūras.</p>
<div id="laukums"><div id="speletajs"></div></div>
<button id="paKreisi">← Pa kreisi</button>
<button id="paLabi">Pa labi →</button>
<p id="vieta">X: 20</p>
<script>
let x = 20;
const solis = 10;
const speletajs = document.getElementById("speletajs");
function kustinat(virziens) {
  x = x + virziens * solis;
  // Gatavas robežas: kvadrāts paliek laukumā.
  const robeza = document.getElementById("laukums").clientWidth - 30;
  if (x < 0) { x = 0; }
  if (x > robeza) { x = robeza; }
  speletajs.style.left = x + "px";
  document.getElementById("vieta").textContent = "X: " + x;
}
document.getElementById("paLabi").addEventListener("click", function () { kustinat(1); });
document.getElementById("paKreisi").addEventListener("click", function () { kustinat(-1); });
document.addEventListener("keydown", function (notikums) {
  if (notikums.key === "ArrowRight") { notikums.preventDefault(); kustinat(1); }
  // ŠEIT KREISĀ BULTIŅA
});
</script>
</body>
</html>

1. uzdevums

Izmēģini kustību

Vide: VS Code → pārlūks

  1. Sāc ar 42.html .
  2. Pārlūkā izmēģini abas pogas un labo bultiņu uz tastatūras.
  3. Pārbaudi, ka X skaitlis mainās kopā ar kvadrātu.

Gatavs, kad: Kvadrātu var kustināt ar pogām un labo bultiņu.

2. uzdevums

Pievieno kreiso bultiņu

Vide: VS Code

  1. Atrodi komentāru // ŠEIT KREISĀ BULTIŅA .
  2. Tā vietā ievieto teorijas piemēra if bloku.
  3. Nemainot citus klausītājus, saglabā failu.

Gatavs, kad: Abiem bultiņu taustiņiem ir sava kustības darbība.

3. uzdevums

Pielāgo vadību un pārbaudi robežas

Vide: VS Code → pārlūks

  1. Maini solis no 10 uz 20. Pielāgo virsrakstu un vadības norādi.
  2. Pārlūkā nospied pa labi vienu reizi: X jāmainās no 20 uz 40. Nospied pa kreisi: atkal 20.
  3. Ar pogām un taustiņiem sasniedz abas malas. Kvadrāts nedrīkst pazust ārpus laukuma.
  4. Saglabā un nosūti darbu uz GitHub.

Gatavs, kad: Pogas un abi taustiņi pārvieto spēlētāju pa 20 px laukuma robežās.

Iesniedz 3. uzdevuma rezultātu

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

  • Darbojas abas pogas un abas tastatūras bultiņas.
  • Kustības solis ir 20 px un redzama pareizā X vērtība.
  • Spēlētājs paliek laukuma robežās.

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.2 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 taustiņus A un D

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

  1. Taustiņu funkcijā pievieno if (notikums.key === "a") { kustinat(-1); } un līdzīgu rindu burtam d.
  2. Atjauno vadības norādi un pārbaudi abus mazos burtus.
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