Tavs šīs stundas izaicinājums: Izstrādāt algoritmu spēles varoņa vizuālai pārvietošanai pa ekrānu, mainot tā CSS koordinātas reāllaikā caur JavaScript.
2.6.1. Pieraksta, lasa un izpilda algoritmus; 2.4.7. Veido kompleksu pieeju (apvieno CSS un JS).Lai mēs varētu kustināt elementu (piemēram, spēlētāja kvadrātu vai attēlu) ar JavaScript, tam HTML/CSS vidē ir jābūt "atrautam" no parastās teksta plūsmas.
position: absolute; (kustas attiecībā pret savu rāmi) vai position: fixed; (kustas attiecībā pret visu logu). Tā vecākam (spēles laukumam) jābūt position: relative;.style.left (X) un style.top (Y) īpašības. Svarīgi: tām vienmēr jāpievieno teksta mērvienība "px"!Pārveidot spēlētāja elementu tā, lai tas varētu brīvi pārvietoties spēles laukumā.
index.html faila spēles konteinerā (piem., #game-container) pievieno jaunu elementu: <div id="speletajs"></div>.position: relative;.position: absolute;, kā arī sākuma koordinātas: left: 10px; top: 10px;.Izmantot JavaScript, lai atjauninātu varoņa pozīciju, nospiežot klaviatūras taustiņus.
let varonisX = 10; un let varonisY = 10;. Atrodi HTML elementu: let varonisObj = document.getElementById("speletajs");keydown notikumu klausītājā pievieno loģiku: ja event.key === "ArrowRight", tad varonisX = varonisX + 10;.varonisObj.style.left = varonisX + "px";. Pārbaudi pārlūkā – varonim jākustas pa labi!Pievienot kustību visos četros virzienos un neļaut varonim iziet ārpus spēles laukuma rāmjiem.
else if nosacījumus pārējiem virzieniem (ArrowLeft samazina X, ArrowDown palielina Y, ArrowUp samazina Y). Neaizmirsti atjaunināt arī varonisObj.style.top = varonisY + "px";.if, lai pārbaudītu robežas: if (varonisX < 0) { varonisX = 0; }. Tas neļaus varonim iziet ārpus kreisās malas.position: absolute; CSS failā. Bez tā left un top īpašības vienkārši nedarbojas.varonisObj.style.left = varonisX; (bez + "px"), pārlūks to nesapratīs. Skaitlim obligāti jāpievieno teksta mērvienība.let varonisX = 50;
let varonisY = 50;
let varonisObj = document.getElementById("speletajs");
document.addEventListener("keydown", function(event) {
// 1. Mainām koordinātas
if (event.key === "ArrowRight") {
varonisX += 10; // Īsāks pieraksts vietā varonisX = varonisX + 10
} else if (event.key === "ArrowLeft") {
varonisX -= 10;
}
// 2. Robežu pārbaude (pieņemot, ka laukums ir 500px plats un varonis 50px)
if (varonisX < 0) {
varonisX = 0; // Neļauj iziet ārpus kreisās malas
} else if (varonisX > 450) {
varonisX = 450; // Neļauj iziet ārpus labās malas
}
// 3. Vizuālā atjaunināšana (SVARĪGI!)
varonisObj.style.left = varonisX + "px";
});