ITV0110 2. töö 2016: CSS, javascript

IT

Mida tuleb teha

Sinu ülesandeks on kirjutada puhtalt brauseris jooksev, javascripti ja css-i peale ehitatud tuntud ülilihtne kahe inimese mäng kivi-paber-käärid ehk rock-paper-scissors. Reeglid ja huvitavat lisainfot leiad wikipedia artiklist

Ühe mängija asemel mängib sinu programmis arvuti, st programmi kasutaja mängib arvuti vastu.

Sinu programm peaks kasutajaliidese mõttes sarnanema sellele new york timesi variandile, aga olema lihtsam: ei ole vaja vaja teha nõrga/tugeva vastase valikut ega kuvada põhjusi, miks programm just sellise käigu tegi. Samuti ei ole vaja kasutada animeeritud pilte: piisab lihtsalt sobivatest kivi-paber-käärid piltidest oma valikul.

Kindlasti peab aga saama mängu uuesti alustada ja iga käigu järel peab keskmisel alal kuvama koguskoori ja viimati mängitud käigud, sarnaselt nyt variandile. Kujunduse nüansid vali ise, ei ole vaja täpselt järgida nyt variandi kujundust.

Info paigutus ekraanil peab olema stabiilne, tekst/nupud 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.

Arvutiprogramm ei pea mängima väga hästi, aga ta ei tohi mängida ka väga halvasti. Konkreetselt peaks programm:

• üldjuhul mängima juhusliku käigu
• kui aga inimene mängib väga pikalt ühte käiku (näiteks neli korda kivi) siis eeldama, et inimene jätkab sama käiguga (ja arvuti peaks selles näites vastama paberi), kuni inimene käiku muudab.

Täiustused strateegiasse on loomulikult lubatud.

Vaata tausta mõttes lisaks worldrps lehel olevaid strateegiaid ja muud materjali ning käimasolevat kivi-paber-käärid programmide võistlust: viimasest saab igaüks osa võtta, küll aga mitte javascripti programmiga.

Tee programm kõigepealt valmis oma arvutis ja seejärel riputa kogu materjal - html, css, javascript ja pildid - serverisse. TTÜ serveri (dijkstra) kasutamiseks registreeri loengus/praksis õppejõu juures oma matriklinumber: täpsemalt loe altpoolt. Soovi korral võid kasutada ka mõnda muud serverit, kuid siis pead saama seal järgmistes praksides kasutada pythonit, php-d ja mysql-i.

Soovitusi htmli ja cssi osas

Hea mõte on jagada lehekülg kõigepealt kolmeks vertikaalseks kõrvuti tulbaks. Kõige lihtsam - ja selle rakenduse jaoks piisav - on seada tulpadele fikseeritud laiused ja kõrgused. NB! Selline fiks laiuste/kõrguste lähenemine ei ole harilike veebisaitide jaoks kuigi hea mõte.

Tulpade tegemine 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

Soovitusi javascripti osas

Kuidas käiku teha? Tee iga käiguvalik väikese piltnupuna ja pane sinna nupule onclick atribuudina javascripti call, mis kutsub välja käigutegemise funktsiooni näiteks nii:

...
function move(x) {
 ...
}
...
<img src="..." onclick="move(1);"></img>

Üks esimesi asju, mida su javascripti kood peaks tegema, on mängija käikude salvestamine. Hea mõte on iga käik panna massiivi - ehk listi - alustades positsioonist 0, seejärel 1 jne jne. Selleks on hea kasutada push meetodit. Array arr pikkuse saad nii: arr.length . Lisaks vaata kindlasti array meetodeid siit ja siit

Pea silmas ka, et javascripti array on praktiliselt sama asi, mis javascripti objekt ja kõik array elemendid on objekti positsiooni-nimel olevad väärtused, ehk arr.miski on sama, mis arr['miski'].

Kui tahad näiteks hoida oma ja vastase käiku ja tulemust ühel massiivireal - hea mõte - saad panna käikude massiivi lihtsalt kolmeelemendilisi objekte näiteks nii:

result=1;
arr.push({user:1, opp:2, res: result});
lastresult=arr[arr.length-1].res;

Teine samuti ok variant on hoida käike tekstistringides, näiteks "001201210..." jne eraldi inimese ja masina jaoks, kuhu uue käigu puhul uus täht lisatakse. Eelmine koodijupp oleks siis sellist laadi (stringile liitmisel konverditakse numbrid automaatselt stringiks):

result=1;
userstr=userstr+1;
oppstr=oppstr+2;
resstr=resstr+1;
lastresult=resstr.charAt(resstr.length-1);

Kuidas panna programmi hästi mängima?

Esiteks pane tähele, et selles praksis ei ole üldse nõutud, et programm mängiks väga hästi. Miinumnõuded on üleval kirjas.

Teiseks pane tähele, et puhtalt juhusliku viske vastu mängides ei saa ei võidu- ega kaotusshanss olla suurem, kui 50%. Samas, kui mängija ei mängi päris juhuslikult (näiteks seepärast, et ta on inimene ja ei suuda olla päris juhuslik, või kasutab ta mõnda strateegiat), siis on seda võimalik tuvastada ja tõsta oma võidushanssi tugevalt üle 50%. Oletame, et programmid võistlevad turniiril paljude osavõtjatega, kellest suur hulk ei mängi juhuslikult. Siis juhuslikult mängiv programm platseerub pingerea keskele, osavalt vastase strateegiat ära arvav programm aga pingerea etteotsa!

Kui tahad programmi parandada, siis tasub kindlasti lugeda neid õpetusi:

• worldrps soovitused
• D.L.Lu soovitused (muuhulgas on see leht ilusa disaini hea näide!)
• worldrps blogist

ja vaadata programmide võistluse hetkeseisu tabelis olevate programmide lähtekoodi (kõik avalikud, lihtsalt kliki programmi nimele). Ka see leht on hea näide lihtsast disainist.

Tehnoloogianõuded

Kogu rakendus peab kasutama ainult html+css+javascripti ja olema üles laetud serverisse staatiliste lehtedena.

Ära kasuta lehe struktureerimiseks üksteise sees olevaid tabeleid, vaid div-e ja css-i. Sisuliselt tabeli kujul oleva info esitamine html tabelina on aga täiesti ok.