April 1, 2013
by Markku Leino
0 comments
Taustakuvaa liikutetaan, joten sitä varten pitää määritellä korkeusmuuttuja ja pelaajan kulkemisnopeus var siirtoY=0; var pelaajaNopeus = 13; Paivita()-funktiossa käsketään piirtämään tausta, ja samoilla tienoilla päivitetään siirtoY-muuttujaa hieman isommaksi: piirraMaasto(siirtoY); siirtoY+=pelaajaNopeus; if (siirtoY>192){ siirtoY=0; } Piirtofunktio on yksinkertainen kaksinkertainen silmukka. Maastomatriisin … Continue reading
April 1, 2013
by Markku Leino
0 comments
Pelissä taustakuva rullaa ylhäältä alaspäin. Perinteisesti tarvittaisiin kaksoisbufferointia ruudn päivitykseen, jottei ruutu vilku, mutta html5 toimii ilmankin. Siis päivitetään matriisi suoraan vanhan päälle. // Kopioidaan ylin rivi toiseksi ylimmäksi riviksi jne. Nyt täytyy vain aloittaa alhaalta päin, jottei kopioida … Continue reading
March 22, 2013
by Markku Leino
0 comments
Skriptit-tiedostossa alustusvaiheessa tehdään vielä kaksiulotteinen taulukko (matriisi), johon talletetaan maasto, jonka päällä hahmo liikkuu. Aikakrittiisissä sovelluksissa on tärkeätä, kuinka päin taulukko tehdään; esim. Fortranin high performance -simulaatioissa taulukko alustetaan siten, että käytettävät osat pysyvät prosessorin cachessa. Tässä emme välittäneet siitä. … Continue reading
March 22, 2013
by Markku Leino
0 comments
Skriptitiedostoon script.js lisätään funktio lataaKuvat(nimi, nmax) . Kuvat on img-hakemistossa, ja ne muodostavat animaatioketjun. Png-kuvat voisivat itsessään tehdä animaation, mutta hoidetaan se homma nyt js-filessä, niin voidaan säätää nopeutta helpommin. Samantyyppiset kuvat ovat samannimisiä, jotta ne on helppo sekä … Continue reading
March 22, 2013
by Markku Leino
0 comments
Html-tiedostoon: <!DOCTYPE html> <html> <head> <title>HuhtiRun</title> <meta charset=”UTF-8″ /> <link href=”css/styles.css” rel=”stylesheet” /> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script> <script src=”js/scripts.js”></script> </head> <body> <canvas width=”960″ height=”576″><p><b>Selaintasi ei valitettavasti tueta!</b><br /></p></canvas><br /><br /> </body> </html> scripts.js-tiedostoon sitten skripti. Käytetään jQ-kirjastoa, mutta jätetään jCanvas nyt väliin. … Continue reading
