Oris teme

  • Splošno

    Opis naloge

     

    Vaša naloga je izdelati igro, ki bo igralcu preko številčnice, ki vsebuje 12 elementov, zaporedno podala naključno generirano zaporedje znakov. Naloga igralca je, da s pomočjo vnosnega polja ponovi oz. zapiše podano zaporedje znakov. Nabor možnih znakov zaporedja sestavljajo števke 0-9 ter znaka * in #. Videz igre (strani) je prikazan na sliki 1.

    Slika 1 - Izgled  igre (spletne strani)

    Slika 1 - Izgled  igre (spletne strani)

    Začetno zaporedje vsebuje tri znake. Vsak posamezni znak se poda tako, se spremeni ozadje ustreznega elementa številčnice v oranžno barvo, nato se po eni sekundi barva ozadja povrne v originalno barvo, v oranžno pa se pobarva naslednji element številčnice, ki ustreza naslednjemu elementu zaporedja. Primer barvanja vidite na sliki 2.

    Slika 2 - Primer prikaza elementa 5 v zaporedju (#,5,0).

    Slika 2 - Primer prikaza elementa 5 v zaporedju (#,5,0).

     

    Na primer, če začetno zaporedje vsebuje znake #, 5, 0, bo se v oranžno barvo najprej obarvalo ozadje elementa #, po eni sekundi se bo povrnilo v originalno barvo, nato se bo v oranžno barvo obarvalo ozadje elementa 5, se po eni sekundi povrnilo v originalno barvo, nato pa se bo obarvalo še ozadje elementa 0 in se spet po eni sekundi povrnilo v originalno barvo. Ko se prikaz zaporedja konča, je na potezi igralec, ki mora v vnosno polje vnesti prikazano zaporedje.

     

    Če igralec zaporedje zadene, se mu prikaže sporočilno okno, ki mu pove, da je zaporedje zadel (slika 3), nato pa se igra nadaljuje tako, da se prikaže novo naključno generirano zaporedje znakov, ki je za en znak daljše kot prejšnje zaporedje.

    Če se igralec zmoti pri ponovitvi zaporedja, se mu prikaže sporočilno okno, ki mu pove, da je zaporedje zgrešil ter število točk (slika 4), igra pa se zaključi.

    Slika 3 - Primer izpisa, če je igralec zadel zaporedje

    Slika 3 - Primer izpisa, če je igralec zadel zaporedje

    Slika 4 - Primer izpisa, če je igralec zgrešil zaporedje

    Slika 4 - Primer izpisa, če je igralec zgrešil zaporedje

    Točkovanje poteka tako, da se vsakič, ko igralec pravilno zadene zaporedje, prejšnjemu številu točk prišteje dolžina zadetega zaporedja. Na primer, če igralec zadene začetno zaporedje treh znakov, se mu k začetnemu številu točk (0), prišteje dolžina zaporedja, torej 0+3=3. Če potem v naslednji stopnji igre zadene še zaporedje štirih znakov, se mu k obstoječim točkam (3) prišteje zadeta dolžina zaporedja (4), torej novo število točk je 3+4=7. Število točk se sešteva, dokler igralec igre ne zaključi oz. dokler se ne zmoti pri ponovitvi zaporedja. Če se igralec zmoti pri ponovitvi zaporedja, se mu ne prišteje več nobenih točk, čeprav je morda delno uganil zaporedje.

     

    Izdelava naloge:

     

    Za izdelavo igre smo vam pripravili tri datoteke, ki jih morate pravilno dopolniti:

    1)      IgraZaporedja.html

    V igri nimamo tabelaričnih podatkov, zato v datoteki HTML ne uporabljajte značke <table>.

    Celotno oblikovanje igre implementirajte v datoteki css,
    zato v HTML datoteki ne uporabljate CSS atributov, kot so style, width in height.

    2)      IgraZaporedja.js

    V datoteki imete že pripravljeno logiko igre, ki jo lahko uporabite.
    Če želite pa lahko uporabite svojo logiko za igro, torej ne rabite upoštevati pripravljenih funkcij.

    3)      style.css

    V tej datoteki mora biti ves oblikovni del strani.

     

    Oblikovanje strani

    Slika 5 – Oblikovanje strani

    Slika 5 – Oblikovanje strani

     

    1. Ozadje strani je datoteka »ozadje.png«.
    1. Igralna površina (širina180px, dolžina 400px, ozadje bele barve, notranji odmiki levo in zgoraj 20px):

    a) levo in desno je centrirana na sredino strani

    b) za 50px je zamaknjena od vrha strani

    c) rob: črta je debela 3px, barva je črna.

    1. Rob številčnice je črna črta, debeline 1px. Širina je156px, dolžina 208 px.

    Notranji kvadrati številčnice imajo stranico dolžine 50px, barva ozadja je #98D5D4, rob je črna črta,

    široka 1px, pisava je Arial, velikost pisave 26, odebeljeno in horizontalno centrirano na sredino.

    Višina vrstice pisave je dvojna.

    1. Širina vnosnega polja je 157px. Zunanji odmik zgoraj je 5px.
    1. Širina prikaznega polja je 146px, rob je črtkan, črne barve, debel 1px. 
      Zunanji odmik zgoraj je 5px, prav tako so vsi štirje notranji odmiki 5px. Pisava je odebeljena.

     

     

     

     

  • Tema 2

    Kriterij ocenjevanja:

    Celotna naloga je vredna 150 točk in je razdeljena na več sklopov glede na zahtevano znanje.

     

    HTML (35t):

    1. dodajanje polja za tekstovni vnos zaporedja: 10t
    2. dodajanje vseh potrebnih javascript eventov na ustrezna mesta: 10t
    3. dodajanje okvirja, v katerem se nahaja izpis velikosti zaporedja, števila točk ter gumb za novo igro: 15t

    CSS (45t):

    1. nastavitev ozadja strani: 1t
    2. nastavitev roba in barve ozadja elementa številčnice: 2t
    3. nastavitev črtkanega roba, njegovo barvo in debelino: 2t
    4. nastavitev notranjih odmikov igralne površine: 2t
    5. nastavitev barve ozadja številčnice, zunanjega roba: 2t
    6. nastavitev širine in višine številčnice: 2t
    7. postavitev roba, belega ozadja, ter zunanjega odmika igralne površine od zgoraj: 3t
    8. nastavitev zgornjega zunanjega odmika polja za vnos ter širino vnosnega polja: 3t
    9. nastavitev debeline pisave (bold), zunanjega odmika in vseh notranjih odmikov v polju kjer se izpisuje dolžina zaporedja, število točk ter vsebuje gumb »nova igra«: 3t
    10. postavitev igralne površine, da je levo in desno centrirana: 5t
    11. nastavitev vseh atributov pisave elementa številčnice: 5t
    12. postavitev elementov številčnice v željeno formo (polje 3X4): 15t

    Javascript (70t):

    1. počisti vnos: 2t
    2. osvežitev izpisov števila točk in velikosti zaporedja na strani: 2t
    3. preverjanje se izvede po pritisku na tipko ENTER: 2t
    4. pojava opozorilnega okna, ki igralcu čestita ob zadetku zaporedja: 2t
    5. pojava opozorilnega okna, ki igralca obvesti, da je zgrešil zaporedje in mu hkrati poda osvojeno število točk: 2t
    6. ponastavitev (resetiranje) spremenljivk: 3t
    7. izračun števila točk: 3t
    8. smiselna povezanost in uporaba funkcij oz. strukturiranosti programa: 5t
    9. primerjanje tekstovnega vnosa s generiranim zaporedjem in ugotavljanje pravilnosti oz. nepravilnosti: 7t
    10. naključno generiranje določenega zaporedja: 12t
    11. pravilno animiranje naključno generiranega zaporedja: 30t

    Bonus točke (obvezno rešit prve tri sklope):

    • onemogočanje vnosa odgovora v času predvajanja zaporedja (animacije): 5t
    • onemogočite vnos daljšega zaporedja (kot je iskano zaporedje): 5t
    • preverjanje vnosa dovoljenih znakov (0-9, *, #, ENTER): 10t
    • omogočite vnos odgovora s klikom na številčnico (namesto tipkovnice): 10t