Uzbūvē savu spēles dzinēju no nulles - notikumu klausītāji, requestAnimationFrame,
DOM manipulācija un sadursmju noteikšana reālā laikā.
No funkcijām un notikumiem līdz pilnam spēles dzinēja prototipam.
Definē un izsauc funkcijas - pamats labi organizētam spēles kodam.
Reaģē uz tastatūru un peli ar addEventListener - padari spēli interaktīvu.
Atrod un modificē HTML elementus ar getElementById, innerHTML un classList.
Izveido 60fps spēles ciklu ar requestAnimationFrame un laika mērīšanu.
Īsteno AABB sadursmju noteikšanu starp spēlētāju un šķēršļiem.
Izveido darbojošos spēles prototipu ar kustību, šķēršļiem un punktu sistēmu.
Funkcijas, notikumi, DOM, laika vadība un sadursmju formula.
// Funkcija ar parametru un atgriešanas vērtību
function aprēķināt(a, b) {
return a + b;
}
let rezultāts = aprēķināt(10, 5); // = 15
// Arrow funkcija (īsāks pieraksts)
const kustēt = (obj, dx) => obj.x += dx;// Tastatūras notikums
document.addEventListener("keydown", e => {
if (e.key === "ArrowLeft") x -= 5;
if (e.key === "ArrowRight") x += 5;
if (e.key === " ") lekt();
});
// Peles klikšķis
canvas.addEventListener("click", e => {
console.log(e.clientX, e.clientY);
});// Elementu atrašana un mainīšana
let punktiElem = document.getElementById("punkti");
punktiElem.innerHTML = "Punkti: " + p;
punktiElem.classList.add("aktīvs");
punktiElem.style.color = "orange";
// Jauna elementa izveide
let div = document.createElement("div");
document.body.appendChild(div);// 60fps spēles cikls
function spelesCikls() {
// 1. Nodzēst iepriekšējo kadru
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. Atjaunot stāvokli
speletajs.x += atrums;
// 3. Uzzīmēt visu
zzimēt();
// 4. Pieprasīt nākamo kadru
requestAnimationFrame(spelesCikls);
}
spelesCikls(); // Palaiž ciklu// Vienkārša taisnstūru sadursme
function saduras(a, b) {
return (
a.x < b.x + b.w &&
a.x + a.w > b.x &&
a.y < b.y + b.h &&
a.y + a.h > b.y
);
}
if (saduras(speletajs, skerslis)) {
dzivibas--;
}