ITV0110 2. töö 2019: javascript ja css

Mida tuleb teha

Sinu ülesandeks on kirjutada puhtalt brauseris jooksev Memory mäng ühele mängijale, kasutades ainult htmli, javascripti ja css-i. Reeglid ja huvitavat lisainfot leiad wikipedia artiklist. Huvi korral tasub lugeda magistritööd kahe inimese memory mängu optimaalsest strateegiast (ei ole praksi tegemiseks oluline ega abistav).

Selles praksis teed ühe inimese variandi Memoryst, aga kolmandas praktikumis tuleb teha sama mäng kahe inimese vahel, mis toimub siis serverirakenduse vahendusel.

Mängu näidetena võid kasutada seda või seda või seda varianti. Näited mängivad sisuliselt samal põhimõttel, nagu sinu mäng, aga nende näidete kujundust ei ole mõistlik otse eeskujuks võtta, samuti on allpool toodud konkreetsed nõuded, mida need näitemängud ei järgi.

Mäng ise tuleb realiseerida järgmisel viisil (ehk, täpselt need asjad tuleb teha,ning kui mäng töötab, aga mõned vähemkriitilised asjad puudu, saad ikkagi arvestatud, lihtsalt saad veidi vähem punkte). Mistahes toredad lisandused on lubatud. Reeglid ja nõuded siis siin:

• Kaartideks on N mängukaarti, kus on N on 6, 16, 26 või 52. Alguses peab saama valida, mis variandi võtad, samuti, mismoodi samasust arvestatakse.
• Kasutajal peab alati olema näha nupp "Alusta uut mängu", millele vajutades algabki uus mäng.
• Algul kuvatakse ekraanile hulk kaarte ruudu või ristkülikuna, kõik tagurpidi. Kaardid peab sinu programm iga mängu eel ära segama, st juhuslikku järjekorda panema.
• Vajutad hiirega ühele kaardile ja sulle näidatakse, mis kaart on (kaart pööratakse ringi).
• Vajutad hiirega teisele kaardile, ja sulle näidatakse, mis kaart on (kaart pööratakse ringi).
• Kui mõlemad kaardid olid samasugused, siis eemaldatakse nad laualt (nende asemele jääb tühi taust) ja sa saad valida uued kaks kaarti.
• Kui kaardid olid erinevad, siis saad miinuspunkti ja kaardid pööratakse uuesti tagurpidi.
• "Samadeks kaartideks" arvestamise variante on kaks. Alguses peab saama valida, kumba mängida:
  • samadeks loetakse kaarte sõltumata mastist ja värvist (risti 5 ja ruutu 5 on samad kaardid)
  • samadeks loetakse kaarte, mis on sama sorti ja sama värvi (risti 5 ja pada 5 on mustad, seega samad kaardid)
• Kui kõik kaardid lõpuks avatud, siis kuva mängijale eraldi selgelt välja tulemus (punktid ja kulunud aeg), salvesta mõlemad ja lase tal uut mängu alustada.
• Mängija peab soovi korral alati saama vaadata (kas kuvatakse alati pika ribana välja või avatakse nupule vajutades popup vms), mis ta senised skoorid on: esimese mängu punktid ja aeg, teise mängu punktid ja aeg jne.
• Arvesta, et sõltumatult keerukusvariandist peab kaardipakk olema selline, et samadeks loetavaid kaarte on pakis igat ainult üks paar. Näiteks, kui samadeks loetakse kaarte sõltumata mastist ja värvist, siis ei saa kasutada 52-st pakki, vaid ainult 26-st pakki või väiksemat. Kui samadeks loetakse kaarte, mison sama sorti ja värvi, saab kasutada 52-st pakki.

Mängija eesmärgiks on saada võimalikult vähe miinuspunkte ja/või tühjendada laud võimalikult kiiresti.

Kaartidena võid kasutada näiteks faile siit või siit projektist , mida ei tasu tükkideks lõigata, vaid kuvada iga kaart kui väike osa pildifailist (seda saab teha css-ga). Spritesheetide kasutamise õpetuse leiad ka näiteks siit: https://spin.atomicobject.com/2013/02/22/css-sprite-semantics-scaleability/

Ei ole keelatud ka teistsuguste kaardipiltide kasutamine, mh on mitmeid projekte, kus kaardipildid on joonistatud puhtalt css-ga.

Tee programm kõigepealt valmis oma arvutis ja seejärel riputa kogu materjal - html, css, javascript ja pildid - serverisse. TTÜ serveri (dijkstra) ligipääsu- ja kasutamisõpetust loe altpoolt.

Mis järjekorras rakenduse osi teha

Kõigele korraga on võimatu mõelda. Praktiline on alustada kõige lihtsamatest osadest. Kui sul javascripti ja css osas veel eriti kogemusi ei ole, siis on mõistlik teha rakendust näiteks sellises järjekorras:

• Alusta puhtalt html-i ja minimaalse css-ga lehe tegemisest, kus sa kuvad prooviks välja mingi väikese arvu kaarte, näiteks 2x2 ruuduna 4 kaarti. Ära kohe veel tee kaardipaki valikut ja muid valikuid.
• Nüüd pane neile kuvatud kaartidele külge javascripti onclick meetod ja kirjuta funktsioon, mida see onclick välja kutsub (vt altpoolt). Ehita seda funktsiooni ja kaartide küljes olevat css-i niikaua, kui saavutad, et tagurpidi kaardile klikates ta ümber pööratakse. Arvesta, et sul läheb vaja ka tagurpidi kaardi pilti.
• Järgmisena pane see väike näide õieti mängima. Selleks vaata, et sinu väikesel näitepakil oleks reaalselt mõned paarid sees ja täienda onclick poolt kutsutavat funktsiooni nii, et ta kontrolliks, kas juba on mõni kaart ümber pööratud, vaataks, kas see on ekvivalentne kaart või ei ja siis vastavalt kas eemaldaks kaardid laualt või pööraks mõlemad uuesti tagurpidi.
• Nüüd on sul rakenduse põhituum olemas! Lisa oma funktsiooni osa, mis loeb kokku miinuspunkte (globaalne muutuja, mis algul null ja mida suurendad) ja kuvab mingis konkreetses kohas laual (kasuta div või span-i id-ga ja innerHTML omadust) miinuspunktide arvu.
• Järgmisena võta ette veidi keerulisem asi: kaardipaki ja mängimisviisi valik. Ehita need valikud lehel kas nuppudena või valiku-dropdownidena ja pane neile jälle külge javascript, mis salvestab vastavasse globaalsesse muutujasse tehtud valiku. Sõltuvalt kaardipaki valikust pead kuvama kas vähem või rohkem kaarte. Kuidas seda teha?
  • Üks variant, mis tundub algul mugav, aga tähendab tohutut hulka copy-paste, mida on raske hallata, on järgmine: ehita kaks eraldi tabelit või div-de hulka kummagi kaardipaki-valiku jaoks. Vastavalt kasutaja valikule peidad edaspidi ühe ja näitad teist.
  • Teine variant, mis on veidi keerulisem, aga väldib copy-paste ja on palju lihtsam hallata, on järgmine: ehita need kaartide tabelid või div-hulgad javascriptis. Selleks ehita javascriptis tsükliga pikk html string, mille siis lisad lehel mõne div-i innerHTML omaduseks.
• Nüüd on sul peaaegu kogu rakendus olemas! Jätka ülesandes kirjeldatud väikeste kellade ja vilede ehitamist ja tee oma lehekülg ilusaks.
• Info paigutus ekraanil peab olema stabiilne, tekst/kaardid ei tohi hüpata vahel ühte, vahel teise kohta. Leht peab olema selge, arusaadava ja kena disainiga, mõttetut/segast infot ja arusaamist raskendavaid kujunduselemente ära kasuta. Arvesta kindlasti selle juhendi soovitustega.

Arvesta, et kui sa kõiki ülesande osi ei jõua teha, aga mäng põhimõtteliselt mingi kaardipakiga töötab, saad praktikumi arvestatud, lihtsalt punkte saad vastavalt vähem. Seega on peaasi teha kõigepealt valmis lihtne töötav variant ilma ülesandes toodud kõigi kellade ja viledeta, ja alles seejärel asuda oma programmi täiustama.

Soovitusi htmli ja cssi osas

Hea mõte on algul jagada lehekülg mitmeks horisontaalseks reaks ja vertikaalseks kõrvuti tulbaks. Kõige lihtsam - ja selle rakenduse jaoks piisav - on seada ridadele ja tulpadele fikseeritud laiused ja kõrgused. NB! Selline fiks laiuste/kõrguste lähenemine ei ole enamiku harilike veebisaitide jaoks päris hea mõte, ja on hoopis halb mobiilile sobiva saidi tegemisel.

Siit ja siit leiad tsentreerimise õpetused (point: margin-left: auto; margin-right: auto;)

Tulpade tegemine tabeliga on lihtne, aga puhtalt div-dega ei ole päris triviaalne. Vaata seda ja seda või seda seletust põhimõtete osas. Kogu värgi lehekülje keskele panekuks, headeri ja footeri lisamiseks jne pakuvad ideid ja näiteid need õpetused, alates lihtsamast ja lõpetades põhjalikuga:

• w3cschooli hea väike terviknäide
• see suhteliselt vana tutorial.
• väga põhjalik paigutuse ja floatide õpetus, lõpus terviknäited

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale CSS bloki alt.

Moblale sobiva lehe põhimõtete kohta tasub lugeda neid lihtsaid suuniseid Applelt

Soovitusi javascripti osas

Kui sa ei kasuta mõnda javascripti teeki nagu jquery (algajale mittesoovitav, kuna tekitab lisakeerukusi!) siis on hea mõte töö lihtsustamiseks teha ise väikeseid abifunktsioone, näiteks function gid(x) {return document.getElementById(x); } et ei peaks kogu aeg pikalt välja kirjutama.

Debugimiseks on kõige lihtsam panna koodi sisse alert(...), aga mugavam ja parem on kasutada funktsiooni console.log(...) mille võid omakorda panna oma abifunktsiooni a la function debug(x) { console.log(x) }. console.log trükib tulemuse brauseri debugeri konsooli (Firefoxis käivita (ja enne installi!) firebug ja vaata firebugi aknast "console" tabi alt, Chromes otsi developer tools või javascript console).

Täiendavate ideede ja juhatuste jaoks vaata lihtsalt kursuse lehelt viidatud materjale javascripti bloki alt.

Css-i ja javascripti teegid ja erivariandid javascriptist

Väliste teekide, ntx Jquery või Bootstrap kasutamine on ok, aga siis sa pead hästi aru saama, mida sinu tehtavad teegi-callid või stiilid teevad. Reaalselt on see praks piisavalt lihtne selleks, et teekide kasutamine vajalik ei oleks. Kui otsustad siiski teeki kasutada, siis väga soovitav on valida jquery kui suhteliselt lihtne ja domineerivalt populaarseim javascripti teek, kujunduse jaoks aga Bootstrap.

Kogu javascript peab olema esitatud minimiseerimata ja nö normaalse taandega, et oleks kergesti loetav.

Ei ole OK kasutada süsteeme nagu typescript, mis kompileerivad sinu lähtekoodi javascriptiks: see muudaks juhendajate töö liiga raskeks.

Minimaalselt peab kaitsmisele esitatav töö võimaldama ilma vigadeta mängu läbimängimist. Juhul kui seda teha ei saa siis tööd kaitsmisele ei võeta.

Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra: kindlasti loe dijkstra kasutusõpetust.

Kõik kodutööd tuleb riputada Dijkstra serverisse, et õppejõud saaks lähtekoode Dijkstra serveris vaadata ja plagiaadituvastus-tarkvara abil kontrollida.

Nõuded kataloogile/failinimedele:

• Teine kodutöö tuleb panna sinu kodukataloogi alamkataloogi public_html/prax2 mille pead ise looma.
• Kodutöö html-põhifaili nimi peab olema index.html.

Enne failide serverisse riputamist on mõistlik teha kogu süsteem valmis lihtsalt oma arvutis/arvutiklassi arvutis.