index.html<\/code>, style.css<\/code> ja game.js<\/code>. HTML antaa pelille rakenteen, CSS ulkoasun ja JavaScript hoitaa labyrintin, liikkumisen, kuvan piirt\u00e4misen ja \u00e4\u00e4net.<\/p>\n\n\n\nT\u00e4ss\u00e4 p\u00e4ivityksess\u00e4 tavoitteena oli saada peli toimimaan my\u00f6s puhelimella sek\u00e4 muistamaan saavutettu kierros. Samalla vastaan tuli kaksi opettavaista ongelmaa: n\u00e4kym\u00e4t\u00f6n mobiiliohjain ja satunnaislukugeneraattori, joka muutti v\u00e4\u00e4r\u00e4\u00e4 muuttujaa.<\/p>\n\n\n\n![\"\"](\"https:\/\/luddiitti.fi\/blog\/wp-content\/uploads\/2026\/09\/maze-1024x857.png\")
<\/a><\/figure>\n\n\n\nLabyrintti syntyy kaksiulotteisesta kartasta<\/h2>\n\n\n\n
Vaikka peli n\u00e4ytt\u00e4\u00e4 kolmiulotteiselta, sen maailma on ruudukko. Sein\u00e4t, k\u00e4yt\u00e4v\u00e4t ja ulosk\u00e4ynti ovat kartan soluja.<\/p>\n\n\n\n
N\u00e4kym\u00e4 piirret\u00e4\u00e4n raycasting-tekniikalla. Pelaajan katsesuunnasta l\u00e4hetet\u00e4\u00e4n laskennallisia s\u00e4teit\u00e4, jotka etsiv\u00e4t seini\u00e4. Sein\u00e4n et\u00e4isyys m\u00e4\u00e4r\u00e4\u00e4, kuinka korkeana se piirret\u00e4\u00e4n ruudulle. L\u00e4hell\u00e4 oleva sein\u00e4 t\u00e4ytt\u00e4\u00e4 n\u00e4kym\u00e4n, kaukana oleva j\u00e4\u00e4 matalammaksi.<\/p>\n\n\n\n
Portaali tuo harmaaseen labyrinttiin sykkiv\u00e4\u00e4 valoa. My\u00f6s \u00e4\u00e4ni auttaa suunnistamaan: kun pelaaja katsoo ulosk\u00e4ynnin suuntaan, kuuluu vihje. Suunnan tarkentuessa signaali tihenee. Se kertoo ulosk\u00e4ynnin suunnan, mutta ei paljasta reitti\u00e4 seinien l\u00e4pi.<\/p>\n\n\n\n
Puhelin tarvitsee oman tavan liikkua<\/h2>\n\n\n\n
Tietokoneella ohjaus perustuu WASD-n\u00e4pp\u00e4imiin ja hiireen. Pointer lock lukitsee hiiren pelin k\u00e4ytt\u00f6\u00f6n, jolloin katsesuuntaa voi k\u00e4\u00e4nt\u00e4\u00e4 ilman, ett\u00e4 osoitin karkaa ikkunan reunaan.<\/p>\n\n\n\n
Puhelimella sama ratkaisu ei sovellu ohjauksen perustaksi. Siksi mobiiliversiossa peli k\u00e4ynnistyy kosketuksella ilman hiiren lukitusta.<\/p>\n\n\n\n
Vasemmassa alakulmassa oleva virtuaalijoystick liikuttaa pelaajaa eteen, taakse ja sivuille. N\u00e4ytt\u00f6\u00e4 pyyhk\u00e4isem\u00e4ll\u00e4 k\u00e4\u00e4nnet\u00e4\u00e4n katsetta. Liikkuminen ja katsominen toimivat eri kosketuksilla, joten molempia voi k\u00e4ytt\u00e4\u00e4 samanaikaisesti.<\/p>\n\n\n\n
T\u00e4rke\u00e4 korjaus l\u00f6ytyi liikkeen laskentaj\u00e4rjestyksest\u00e4. Joystickin tuottama liike t\u00e4ytyy lis\u00e4t\u00e4 ennen sein\u00e4tarkistuksia:<\/p>\n\n\n\n
N\u00e4pp\u00e4imist\u00f6 ja joystick \u2192 liikesuunta \u2192 sein\u00e4tarkistus \u2192 pelaajan uusi sijainti.<\/strong><\/p>\n\n\n\nJos joystickin vaikutus lasketaan vasta pelaajan siirt\u00e4misen j\u00e4lkeen, ohjain voi reagoida kosketukseen ilman, ett\u00e4 pelaaja liikkuu lainkaan.<\/p>\n\n\n\n
Miksi ohjain ei n\u00e4kynyt?<\/h2>\n\n\n\n
Ensimm\u00e4isen korjauskierroksen j\u00e4lkeen palaute oli lyhyt: \u201dei n\u00e4y mobiiliohjaimia\u201d.<\/p>\n\n\n\n
Ohjainten n\u00e4kyvyys oli sidottu liian tiukasti laitteen tunnistukseen ja pelin k\u00e4ynniss\u00e4oloon. Lopulliseen korjaukseen lis\u00e4ttiin useampi tapa tunnistaa mobiilik\u00e4ytt\u00f6: kosketusominaisuudet, osoittimen tyyppi ja n\u00e4yt\u00f6n leveys.<\/p>\n\n\n\n
Lis\u00e4ksi aloitusruutuun tuli PLAY WITH TOUCH CONTROLS<\/strong> -painike. Sen avulla pelaaja voi valita kosketusohjauksen itse, vaikka automaattinen tunnistus ei osuisi oikeaan.<\/p>\n\n\n\nMy\u00f6s tyylitiedosto piti rakentaa kokonaiseksi. Pelkk\u00e4 joystickin testityyli ei riit\u00e4: mukana t\u00e4ytyy olla pelin\u00e4kym\u00e4n, aloitusruudun, HUDin, ilmoitusten ja painikkeiden ulkoasu.<\/p>\n\n\n\n
CSS- ja JavaScript-viittauksiin lis\u00e4ttiin samalla versionumerot, jotta selain hakisi p\u00e4ivitetyt tiedostot vanhojen v\u00e4limuistikopioiden sijaan.<\/p>\n\n\n\n
Seuraava palaute oli jo toisenlainen: \u201dtoimii! tattis!\u201d<\/p>\n\n\n\n
Sama seed, sama labyrintti<\/h2>\n\n\n\n
Tallennus vaatii, ett\u00e4 labyrintti voidaan luoda uudelleen samanlaisena. T\u00e4t\u00e4 varten pelill\u00e4 on seed eli luku, josta labyrintin muodostaminen alkaa.<\/p>\n\n\n\n
Alkuper\u00e4isess\u00e4 rakenteessa satunnaislukugeneraatt<\/p>\n\n\n\n
15.50<\/p>\n\n\n\n
\u221e MAZE \u2013 loputon labyrintti ja kadonneen joystickin arvoitus<\/h1>\n\n\n\n
\u221e MAZE on selaimessa toimiva ensimm\u00e4isen persoonan labyrinttipeli. Sen idea on yksinkertainen: kulje k\u00e4yt\u00e4vi\u00e4, kuuntele ja l\u00f6yd\u00e4 ulosk\u00e4ynti. Perill\u00e4 odottaa uusi labyrintti.<\/p>\n\n\n\n
Projektin kiinnostavin vaihe alkoi, kun tietokoneella toimivaan peliin lis\u00e4ttiin mobiiliohjaus. Vasempaan alakulmaan piti ilmesty\u00e4 virtuaalinen joystick. Mutta puhelimella sit\u00e4 ei n\u00e4kynyt.<\/p>\n\n\n\n
Siit\u00e4 alkoi korjauskierros, jossa k\u00e4ytiin l\u00e4pi k\u00e4ytt\u00f6liittym\u00e4, liikkeen laskenta, tallennus ja satunnaislukugeneraattori.<\/p>\n\n\n\n
Kolme tiedostoa, kokonainen peli<\/h2>\n\n\n\n
Peli rakentuu kolmesta tiedostosta:<\/p>\n\n\n\n
\n- index.html<\/strong> sis\u00e4lt\u00e4\u00e4 pelin\u00e4kym\u00e4n, aloitusruudun, tilatiedot ja ohjainten rakenteen.<\/li>\n\n\n\n
- style.css<\/strong> m\u00e4\u00e4ritt\u00e4\u00e4 ulkoasun ja elementtien sijoittelun.<\/li>\n\n\n\n
- game.js<\/strong> hoitaa labyrintin generoinnin, liikkumisen, piirt\u00e4misen, \u00e4\u00e4net ja tallennuksen.<\/li>\n<\/ul>\n\n\n\n
Kolmiulotteiselta n\u00e4ytt\u00e4v\u00e4 n\u00e4kym\u00e4 syntyy raycasting-tekniikalla. Labyrintti on pohjimmiltaan kaksiulotteinen ruudukko, johon pelaajan katsesuunnasta l\u00e4hetet\u00e4\u00e4n laskennallisia s\u00e4teit\u00e4. Sein\u00e4n et\u00e4isyys m\u00e4\u00e4r\u00e4\u00e4, kuinka korkeana sein\u00e4palkki piirret\u00e4\u00e4n ruudulle.<\/p>\n\n\n\n
Ulosk\u00e4yntin\u00e4 toimii hohtava portaali. My\u00f6s \u00e4\u00e4ni auttaa suunnistamaan: kun katsesuunta osuu kohti ulosk\u00e4ynti\u00e4, peli antaa \u00e4\u00e4nivihjeen. Tarkempi suunta tihent\u00e4\u00e4 merkki\u00e4\u00e4nt\u00e4. N\u00e4in kuunteleminen kuuluu itse pelaamiseen.<\/p>\n\n\n\n
Miksi joystick ei n\u00e4kynyt?<\/h2>\n\n\n\n
Korjauksen aikana selvisi, ettei kyse ollut vain yhdest\u00e4 puuttuvasta CSS-rivist\u00e4.<\/p>\n\n\n\n
Tyylitiedostoon oli p\u00e4\u00e4tynyt pelkk\u00e4 joystickin testityyli. Kokonaisen pelin ulkoasu piti palauttaa samaan tiedostoon niin, ett\u00e4 aloitusruutu, tilatiedot, t\u00e4ht\u00e4in ja mobiiliohjaimet toimivat yhdess\u00e4.<\/p>\n\n\n\n
My\u00f6s ohjainten n\u00e4kyvyys oli liian vahvasti automaattisen laitetunnistuksen varassa. Ensimm\u00e4inen koottu versio ei viel\u00e4k\u00e4\u00e4n n\u00e4ytt\u00e4nyt ohjaimia k\u00e4ytt\u00e4j\u00e4n puhelimella, vaikka pelilogiikan testit meniv\u00e4t l\u00e4pi.<\/p>\n\n\n\n
Lopulliseen korjaukseen lis\u00e4ttiin useampi tapa tunnistaa mobiilik\u00e4ytt\u00f6: kosketusominaisuudet, selaimen ilmoittama osoitintyyppi ja pieni n\u00e4ytt\u00f6. Aloitusruutuun tuli lis\u00e4ksi PLAY WITH TOUCH CONTROLS<\/strong> -painike.<\/p>\n\n\n\nPainikkeella pelaaja voi ottaa kosketusohjauksen k\u00e4ytt\u00f6\u00f6n itse. Selain ei siis yksin p\u00e4\u00e4t\u00e4, mill\u00e4 tavalla peli\u00e4 saa pelata.<\/p>\n\n\n\n
Samalla CSS- ja JavaScript-tiedostojen osoitteisiin lis\u00e4ttiin versionumerot, jotta selain hakee p\u00e4ivitetyt tiedostot vanhojen v\u00e4limuistikopioiden sijaan.<\/p>\n\n\n\n
Ohjauksen pit\u00e4\u00e4 vaikuttaa ennen sein\u00e4tarkistusta<\/h2>\n\n\n\n
Joystickin n\u00e4kyminen ratkaisee vasta puolet ongelmasta. Sen pit\u00e4\u00e4 my\u00f6s liikuttaa pelaajaa.<\/p>\n\n\n\n
Peliss\u00e4 liike k\u00e4sitell\u00e4\u00e4n t\u00e4ss\u00e4 j\u00e4rjestyksess\u00e4:<\/p>\n\n\n\n
\n- Luetaan n\u00e4pp\u00e4imist\u00f6n ja joystickin sy\u00f6tteet.<\/li>\n\n\n\n
- Lasketaan pelaajan ehdotettu liike.<\/li>\n\n\n\n
- Tarkistetaan, est\u00e4v\u00e4tk\u00f6 sein\u00e4t liikkumisen.<\/li>\n\n\n\n
- P\u00e4ivitet\u00e4\u00e4n pelaajan sijainti.<\/li>\n\n\n\n
- Tarkistetaan, saavuttiko pelaaja portaalin.<\/li>\n<\/ol>\n\n\n\n
Jos joystickin liike lis\u00e4t\u00e4\u00e4n vasta sein\u00e4tarkistusten ja sijainnin p\u00e4ivityksen j\u00e4lkeen, se ei vaikuta kyseisen p\u00e4ivityskierroksen toteutuneeseen liikkeeseen.<\/p>\n\n\n\n
Korjatussa versiossa n\u00e4pp\u00e4imist\u00f6 ja joystick sy\u00f6tt\u00e4v\u00e4t liikkeens\u00e4 samoihin laskelmiin ennen t\u00f6rm\u00e4ystarkistuksia. Silloin molempiin ohjaustapoihin p\u00e4tev\u00e4t samat sein\u00e4t ja samat liikkumiss\u00e4\u00e4nn\u00f6t.<\/p>\n\n\n\n
Mobiililla vasen joystick hoitaa liikkumisen ja pelin\u00e4kym\u00e4n pyyhk\u00e4isy k\u00e4\u00e4nt\u00e4\u00e4 katsetta. Tietokoneella s\u00e4ilyv\u00e4t WASD ja hiiri.<\/p>\n\n\n\n
Puhelin ei tarvitse hiiren lukitusta<\/h2>\n\n\n\n
Tietokoneella hiiren lukitus eli pointer lock<\/em> mahdollistaa jatkuvan katsesuunnan muuttamisen. Hiiren osoitin ei pys\u00e4hdy selainikkunan reunaan.<\/p>\n\n\n\nKosketusohjaus ei tarvitse t\u00e4t\u00e4 toimintoa. Siksi mobiililla pelin k\u00e4ynnist\u00e4minen irrotettiin hiiren lukituksesta: aloitusruudun voi sulkea kosketuksella ja pelaamisen aloittaa suoraan.<\/p>\n\n\n\n
My\u00f6s ohjaimen vapautuminen piti huomioida. Kun sormi nostetaan tai kosketus keskeytyy, joystickin liike nollataan. Samoin ohjaussy\u00f6tteet tyhjennet\u00e4\u00e4n pelin menett\u00e4ess\u00e4 aktiivisuuden. N\u00e4in pelaaja ei jatka k\u00e4vely\u00e4 sen j\u00e4lkeen, kun ohjaus on jo lopetettu.<\/p>\n\n\n\n
Sama seed, sama labyrintti<\/h2>\n\n\n\n
Tallennuksessa tuli vastaan toinen t\u00e4rke\u00e4 yksityiskohta: satunnaisuuden pit\u00e4\u00e4 olla toistettavaa.<\/p>\n\n\n\n
Labyrintti generoidaan siemenluvusta eli seedist\u00e4<\/em>. Kun sama siemen annetaan samalle generaattorille, tuloksena pit\u00e4\u00e4 olla sama labyrintti.<\/p>\n\n\n\nT\u00e4t\u00e4 varten tarvitaan kaksi erillist\u00e4 muuttujaa:<\/p>\n\n\n\n
\n- worldSeed<\/strong> tunnistaa nykyisen labyrintin ja pysyy vakaana sen generoinnin aikana.<\/li>\n\n\n\n
- randomState<\/strong> on satunnaislukugeneraattorin muuttuva sis\u00e4inen tila.<\/li>\n<\/ul>\n\n\n\n
Jokaisen labyrintin generointi alkaa asettamalla randomState = worldSeed<\/code>. Sen j\u00e4lkeen satunnaislukujen tuottaminen muuttaa vain generaattorin sis\u00e4ist\u00e4 tilaa.<\/p>\n\n\n\nErottelu on pieni, mutta tallennuksen kannalta ratkaiseva. Jos my\u00f6s tallennettavaksi tarkoitettu siemen muuttuisi generoinnin aikana, latauksessa ei en\u00e4\u00e4 aloitettaisi samasta l\u00e4ht\u00f6arvosta.<\/p>\n\n\n\n
Portaali on my\u00f6s tallennuspiste<\/h2>\n\n\n\n
\u221e MAZEn tallennus toimii labyrinttikohtaisena tarkistuspisteen\u00e4.<\/p>\n\n\n\n
Kun pelaaja saavuttaa portaalin, peli siirtyy seuraavaan LOOPiin ja tallentaa sen numeron sek\u00e4 siemenen selaimen localStorage<\/code>-muistiin. Onnistumisesta kertoo PROGRESS SAVED<\/strong>.<\/p>\n\n\n\nKun peli avataan uudelleen, tallennettu labyrintti muodostetaan samasta siemenest\u00e4. Pelaaja aloittaa sen l\u00e4ht\u00f6pisteest\u00e4, ja PROGRESS LOADED<\/strong> kertoo latauksesta.<\/p>\n\n\n\nKesken labyrintin saavutettua sijaintia ei tallenneta. Saavutettu LOOP s\u00e4ilyy, mutta sen reitti pit\u00e4\u00e4 kulkea uudelleen. Aloitusruudun RESET PROGRESS<\/strong> -painikkeella etenemisen voi nollata vahvistuksen j\u00e4lkeen.<\/p>\n\n\n\nTestit ja puhelin t\u00e4ydent\u00e4v\u00e4t toisiaan<\/h2>\n\n\n\n
Korjatusta koodista tarkistettiin muun muassa siemenen toistettavuus, joystickin vaikutus liikkeeseen, seinien est\u00e4m\u00e4 kulku, portaalin k\u00e4ynnist\u00e4m\u00e4 tallennus sek\u00e4 tallennuksen lataaminen ja nollaaminen.<\/p>\n\n\n\n
Silti ensimm\u00e4isen toimituksen j\u00e4lkeen palaute oli lyhyt:<\/p>\n\n\n\n
\nei n\u00e4y mobiiliohjaimia<\/p>\n<\/blockquote>\n\n\n\n
Se oli t\u00e4rke\u00e4 muistutus testauksen rajoista. Pelilogiikan toimivuus ei viel\u00e4 todista, ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4 n\u00e4kyy oikein k\u00e4ytt\u00e4j\u00e4n selaimessa. N\u00e4kyvyysehdot, laitetunnistus ja ladattujen tiedostojen versiot vaikuttavat lopputulokseen yht\u00e4 lailla.<\/p>\n\n\n\n
Seuraavan korjauksen j\u00e4lkeen tuli odotettu vastaus:<\/p>\n\n\n\n
\ntoimii! tattis!<\/p>\n<\/blockquote>\n\n\n\n
Lopulta projektin t\u00e4rkein parannus oli varsin k\u00e4yt\u00e4nn\u00f6llinen: peli sai yhten\u00e4iset tiedostot, eri ohjaustavat k\u00e4ytt\u00e4v\u00e4t samaa liikelogiikkaa ja pelaaja voi itse ottaa kosketusohjauksen k\u00e4ytt\u00f6\u00f6n.<\/p>\n\n\n\n
Nyt joystick l\u00f6ytyy. Ulosk\u00e4ynnin etsiminen j\u00e4\u00e4 pelaajalle.<\/p>\n\n\n\n
\u221e MAZE<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u221e MAZEn idea on yksinkertainen: astu labyrinttiin, kuuntele ja etsi ulosk\u00e4ynti. Kun l\u00f6yd\u00e4t portaalin, p\u00e4\u00e4dyt seuraavaan labyrinttiin. Kierros vaihtuu, mutta matka jatkuu. Peli rakentuu kolmesta tiedostosta: index.html, style.css ja game.js. HTML antaa pelille rakenteen, CSS ulkoasun ja JavaScript hoitaa labyrintin, liikkumisen, kuvan piirt\u00e4misen ja \u00e4\u00e4net. T\u00e4ss\u00e4 p\u00e4ivityksess\u00e4 tavoitteena oli saada peli toimimaan my\u00f6s puhelimella sek\u00e4 ...jatka lukemista \"\u221e MAZE: loputon labyrintti sai mobiiliohjauksen ja muistin\"<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,80,107],"tags":[],"class_list":["post-1307","post","type-post","status-publish","format-standard","category-mobiili","category-tekoaly","category-tekoalyn-avustama-artikkeli","h-entry","hentry","h-as-article"],"_links":{"self":[{"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/posts\/1307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/comments?post=1307"}],"version-history":[{"count":1,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/posts\/1307\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/posts\/1307\/revisions\/1309"}],"wp:attachment":[{"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/media?parent=1307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/categories?post=1307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luddiitti.fi\/blog\/wp-json\/wp\/v2\/tags?post=1307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/luddiitti.fi\/blog\/wp-content\/uploads\/2026\/09\/maze.png\")
<\/a><\/figure>\n\n\n\n