Yatzy Javascript:llä selaimeen

Tästä se lähtee. Juhiksen harrastusblogi. Tänne tulee todennäköisesti juttuja ohjelmoinnista, tekoälyn käyttämisestä, ehkä jotain muutakin. Katsotaan mihin se muotoutuu ajan mittaan.

Sanon heti alkuun etten ole ammattikoodari. Ohjelmointi on toki minulle tuttu työn puolesta, mutta se on vähän eri hommaa, kuin mitä yleensä termillä koodari yleensä ymmärretään. Ehkä siitä lisää joskus myöhemmin.

Lähdetään liikkeelle näin ensimmäisessä julkaisussa vanhasta pelistä jonka kirjoitin selaimelle, ihan vain omaan käyttöön.

Kirjoitin aikanaan selaimessa toimivan Yatzy pelin. Idea lähti siitä kun meillä oli vaimon kanssa tapana pelata puhelimessa Yatzya. Minulla oli siihen aikaan Nokian Windows puhelin, johon löytyi hyvä Yatzy skandinaavisilla säännöillä. Puhelimen vaihduttua Android puhelimeksi, emme löytäneet mielestämme tarpeeksi hyvää Yatzy peliä. Vaihtoehtojahan kyllä oli, mutta niistä tuntui aina puuttuvan jotain. Niinpä päätin tehdä oman version. Tein sen aika yksinkertaisella tekniikalla html tiedostoon, jossa varsinainen peli toimii javascriptillä. Peli löytyy koodeineen Githubista: https://github.com/juhislab/yatzy/tree/v2

Tämä ei yritäkään olla ammattimaista koodia. Yritin vain ratkaista tarpeen pienellä vaivalla. Mutta minusta oli hauskaa miettiä kuinka ratkaisen kunkin pistekentän päättelyn. Esim. Nelosien pisteiden laskeminen on aika lailla suoraviivaisempaa kuin mökin laskeminen.

HTML:llä on muotoiltu pelin ulkonäkö. Varsinainen toiminnallisuus on tehty JavaScriptillä. JavaScript siis ajon aikana muokkaa HTML näkymää. Se ei tallenna mitään levylle. Puhtaasti selaimessa pyörivä siis. Mitään ei jää talteen kun sivu suljetaan.

Peliä tehdessä opettelin 3WSchool -sivustolta html, js ja css:ää. Sivuston ohjeita seuraten pelin ominaisuuksiin liittyy mm. skaalautuvuus eri kokoisille näytöille. Eli sama koodi pitäisi toimia puhelimen että tietokoneen selaimella. JS koodi, kuten myös CSS muotoilut, ovat omissa erillisissä tiedostoissaan.

Latasin pitkästä aikaa tämän koodin ylös ja testailin. Tietokoneella toimii hienosta edelleen. Nykyisellä puhelimen Chrome versiolla ei onnistu ajamaan suoraa JS koodia puhelimen muistista. Ratkaisuna luin jostain että pitäisi asentaa paikallinen web server puhelimeen. Mietin että mahtaisiko toimia jos JS ja CSS koodin sijoittaa suoraan HTML tiedostoon. Ehkä testaan asiaa myöhemmin.
Tästähän voisi jatkokehitellä oikean sovelluksen Androidille. Sitä odotellessa.