›_ ebskola.lv
← 3.5

3.6 Noslēguma projekts: Radošā teksta spēle JS

Stundas uzdevums: Izveidot interaktīvu teksta spēli, izmantojot tikai 3. tēmā apgūto: mainīgos, ievadi, datu tipus, if/else, masīvus, ciklus un DOM izvadi.

SR 2.6.1. Algoritmi un programmas strukturēšana SR 2.6.2. Algoritma testēšana un kļūdu meklēšana SR 5.2.1. Kritiskā domāšana un problēmrisināšana SR 5.2.3. Pašvadīta mācīšanās

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: mini spēle no jau apgūtiem blokiem

Šajā projektā nav jāizmanto jaunas JavaScript bibliotēkas vai sarežģīta animācija. Spēle veidojas no pazīstamiem blokiem: HTML poga izsauc funkciju, prompt() iegūst izvēli, if/else pieņem lēmumu, masīvs glabā materiālu sarakstu, bet for cikls parāda saturu lapā.

let materiali = ["plāns", "marķieris", "taimeris"];

for (let i = 0; i < materiali.length; i++) {
  materialuSaraksts.innerHTML += "<li>" + materiali[i] + "</li>";
}
Iepriekš apgūtais saturs: masīvs, cikls, DOM elementa satura maiņa.

70 min plāns: vides sagatavošana un dati ~15 min, izvēļu loģika ~30 min, inventāra attēlošana un tests ~25 min.

HTML skelets (sākuma punkts)

Iekopē šo HTML skeletu savā index.html failā un saglabā. Šeit tu vēlāk varēsi mainīt krāsas un stilus.

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mana Radošā Spēle</title>
    <style>
        body {
            font-family: 'JetBrains Mono', monospace;
            background: #222831; /* Pamēģini nomainīt šo krāsu! */
            color: #DFD0B8;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
        }
        h1, h2 { color: #FFB142; }
        button {
            background: #948979;
            color: #222831;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
        }
        button:hover { background: #FFB142; }
        ul { background: #393E46; padding: 16px 32px; border-radius: 6px; }
    </style>
</head>
<body>
    <h1>Tavs Unikālais Klases Izaicinājums</h1>
    <button onclick="saktIzaicinajumu()">Sākt spēli</button>
    <h2 id="sveiciens"></h2>
    <h3>Klases materiāli:</h3>
    <ul id="materialuSaraksts"></ul>
    <script src="script.js"></script>
</body>
</html>

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 3.6 Noslēguma projekts: Radošā teksta spēle JS; detalizētu izpratni veidosi nākamajos uzdevumos.

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

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mana Radošā Spēle</title>
    <style>
        body {
            font-family: 'JetBrains Mono', monospace;
            background: #222831; /* Pamēģini nomainīt šo krāsu! */
            color: #DFD0B8;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
        }
        h1, h2 { color: #FFB142; }
        button {
            background: #948979;
            color: #222831;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
        }
        button:hover { background: #FFB142; }
        ul { background: #393E46; padding: 16px 32px; border-radius: 6px; }
    </style>
</head>
<body>
    <h1>Tavs Unikālais Klases Izaicinājums</h1>
    <button onclick="saktIzaicinajumu()">Sākt spēli</button>
    <h2 id="sveiciens"></h2>
    <h3>Klases materiāli:</h3>
    <ul id="materialuSaraksts"></ul>
    <script src="script.js"></script>
</body>
</html>
  1. Atver darba failu vai rīku. HTML fragmentu ievieto index.html faila <body> 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 - pārbaudi, ka poga "Sākt spēli" un <h2 id="sveiciens"> un <ul id="materialuSaraksts"> pastāv.
  2. Atver script.js un definē: let speletajs = ""; let inventars = ["marķieris", "plāns", "lapiņa"];
  3. Pievieno funkciju saktIzaicinajumu(), kas vaicā vārdu ar prompt un parāda sveicienu.
  4. Paplašini funkciju tā, lai tā arī parādītu inventāru <ul> elementā ar for ciklu.
  5. Pievieno pogu "Izvēlēties rīku" un funkciju, kas jautā, kurš rīks tiek izmantots.
  6. Pievieno if/else loģiku: ja rīks ir inventārā, rāda ziņojumu; ja nav - kļūdu.
  7. Salabo pirmo loģikas kļūdu, ko pamana testēšanā.
  8. Veic git commit -m "Add text game with inventory and choices".

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ā un spēlē cauri: ievadi vārdu, skatī inventāru, izvēlies rīku.
  2. Mēģini ievadīt rīku, kas nav inventārā - pārbaudi, ka parādās saprotams kļūdas ziņojums.
  3. Salabo, ja kāda no spēles funkcijām avarē konsolē - lasi kļūdas ziņojumu un koriģē.
  4. Pārbaudi, vai spēles statuss mainās pareizi pēc katras izvēles.
  5. Pievieno pogu "Restartēt" un pārbaudi, vai tā atjauno sākuma stāvokli.
  6. Veic git commit -m "Fix text game flow and add restart".
  7. Pieraksti vienu secinājumu: kuru no apgūtajiem jēdzieniem tu izmantoji visvairāk šajā spēlē.

Papildu uzdevums - Pievieno mazu funkciju

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

  1. Pievieno punktu skaitīšanu - katrai veiksmīgai izvēlei pievieno 10 punktus.
  2. Atjauno <p id="rezultats"> elementu, lai rāda aktuālos punktus.
  3. Pievieno spēles beigu nosacījumu: kad inventārs ir tukšs, rāda "Spēle pabeigta! Rezultāts: X".
  4. Pārbaudi, ka beigu ziņojums parādās pēc pēdējā rīka izmantošanas.
  5. Salabo jebkuru loģikas kļūdu, ko pamana testēšanas laikā.
  6. Veic git commit -m "Add scoring and game end condition".
  7. Palūdz klasesbiedram pilnībā izspēlēt spēli - vai viņš saprot mērķi bez instrukcijām?

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

Vērtēšanas kritēriji (SLA)

Kritēriji Sācis apgūt (1-3) Turpina apgūt (4-6) Apguvis (7-8) Apguvis padziļināti (9-10)
1. Radošais saturs un dizains (Stāsts, HTML/CSS) Stāsta nav, atstāti oriģinālie piemēri. Vizuālais dizains nav mainīts. Izdomāti unikāli priekšmeti masīvam un pamata stāsts. Nomainīta vismaz viena krāsa. Izveidots oriģināls, asprātīgs sižets. CSS dizains pilnībā pielāgots tēmai (krāsas saskaņotas). Izcils stāstījums un dizains, iekļauti papildu HTML elementi stāsta bagātināšanai (piem., emocijzīmes).
2. Funkcijas un interaktivitāte Faili eksistē, funkcija netiek izsaukta vai ID ir kļūdaini. JS fails pievienots, poga bez kļūdām iedarbina funkciju. Dati tiek iegūti un veiksmīgi izvadīti HTML tagos. Darba vide organizēta perfekti, ievade pārveidota pareizā datu tipā.
3. Loģika un struktūras (If/Else, Masīvi) Masīvs vai If bloks uzrakstīts ar lielām sintakses kļūdām. If/Else strādā un masīvs eksistē, taču tajā netiek veiktas izmaiņas. Loģika strādā korekti – masīvs tiek papildināts vai mainīts atkarībā no lietotāja izvēles. Precīza masīva apstrāde un nevainojama programmas plūsma, kas pielāgota unikālajam stāstam.
4. Automatizācija (Cikli) Cikls nedarbojas vai nespēj nolasīt masīvu. Cikls strādā, bet saturs netiek dinamiski pievienots HTML lapai. Cikls iziet cauri masīvam un veiksmīgi ģenerē HTML sarakstu. Pirms saraksta ģenerēšanas tas tiek iztukšots. Kods ir pilnībā optimizēts.

Pašpārbaudes saraksts pirms darba nodošanas

⬅ Iepriekšējā stunda Tēmas apkopojums ➡