›_ ebskola.lv
← 5.3 5.5 →

5.4 Papildfunkciju ieviešana (Power-ups, līmeņi, skaņa)

Stundas uzdevums: Papildināt spēles prototipu ar unikālām funkcijām, kas uzlabo spēlējamību (Game Juice), piemēram, pieaugošu grūtības pakāpi vai multimediju efektiem.

5.2.1. Definē problēmas būtību un risina izaicinājumus; 2.3.1. Izmanto lietojumprogrammatūras specifiskas funkcijas.
SR 3.4.4. Inovāciju un produktu attīstības izpēte SR 5.2.2. Jaunrade un uzņēmējspēja

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: "Game Juice" un grūtības līkne

Kas atšķir garlaicīgu spēli no tādas, kuru gribas spēlēt vēlreiz? 

// Power-up pievienošana
function savaktPowerUp(tips) {
  if (tips === "atrums") spele.atrums *= 1.5;
  if (tips === "dziviba") spele.dzivibas++;
}

// Skaņas atskaņošana
new Audio("skanas/powerup.mp3").play();

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 5.4 Papildfunkciju ieviešana (Power-ups, līmeņi, skaņa); detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

// Power-up pievienošana
function savaktPowerUp(tips) {
  if (tips === "atrums") spele.atrums *= 1.5;
  if (tips === "dziviba") spele.dzivibas++;
}

// Skaņas atskaņošana
new Audio("skanas/powerup.mp3").play();
  1. Atver darba failu vai rīku. JavaScript fragmentu ievieto script.js failā vai lapas esošajā skripta daļā.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver index.html un pievieno power-up elementu laukumā: <div id="bonuss" style="display:none;position:absolute;width:20px;height:20px;background:gold;border-radius:50%;"></div>.
  2. Atver script.js un pievieno funkciju parāditBonusu(), kas piešķir bonusam nejaušas koordinātes un iestata display: block.
  3. Izsauc parāditBonusu() no saktSpeli().
  4. Paplašini sadursmju pārbaudi: ja spēlētājs pieskaras bonusam, pievieno 25 punktus un paslēp bonusu.
  5. Saglabā un sāc spēli - pievirzī spēlētāju pie zeltā apļa un pārbaudi, vai tiek pievienoti 25 punkti.
  6. Salabo, ja bonuss neparādās vai netiek "savākts" - pārbaudi elementu ID un sadursmes kodu.
  7. Pārbaudi DevTools konsoli - nav jābūt kļūdas ziņojumam.
  8. Veic git commit -m "Add power-up mechanic with collision".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver pārlūkā - sāc spēli un pārbaudi, ka zeltais aplis parādās uz laukuma.
  2. Pievirzī spēlētāju pie bonusa - pārbaudi, ka tas pazūd un punkti pieaug par 25.
  3. Pārbaudi, ka bonuss paliek paslēpts (display: none) beigu ekrānā.
  4. Salabo, ja bonuss parādās ārpus laukuma - pārbaudi Math.random() robežas.
  5. Pārbaudi, ka bonusa savākšana neietekmē ienaidnieka kustību.
  6. Pievieno skaņu, kad bonuss tiek savākts: new Audio("skanas/bonuss.mp3").play();
  7. Pieraksti vienu secinājumu: kā "atgriezeniskā saite" (skaņa + vizuāls efekts) padara spēli interesantāku.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno otro power-up - "vairogs" (<div id="vairogs">), kas uz 3 sekundēm pasargā no sadursmes.
  2. Definē let vairogAktivs = false; script.js.
  3. Savācot vairogu, iestati vairogAktivs = true un pēc 3 sekundēm (setTimeout) atpakaļ uz false.
  4. Pārbaudi sadursmju funkcijā: ja vairogAktivs === true, ignorē sadursmi ar ienaidnieku.
  5. Pievieno vizuālu efektu: kamēr vairogs aktīvs, spēlētājam ir border: 3px solid gold;.
  6. Veic git commit -m "Add shield power-up with 3s protection".
  7. Demonstrē klasesbiedram - vai viņš redz, kad vairogs ir aktīvs un kad beidzas?

Biežākās kļūdas (un kā tās labot):

Koda piemērs: Skaņa un Līmeņi

// Audio objekta sagatavošana
const punktaSkanas = new Audio("assets/audio/point.mp3");
let limenis = 1;

function savaktPunktus() {
    punkti += 10;
    punktaSkanas.play(); // Atskaņojam skaņu

    // Pārbaudām līmeņa maiņu
    if (punkti >= 100 * limenis) {
        limenis++;
        ienaidniekaAtrums += 1;
        document.getElementById("status").innerText = "LĪMENIS " + limenis;
        console.log("Grūtība palielināta!");
    }

    atjaunotHUD();
}
⬅ Iepriekšējā stunda Nākamā stunda ➡