Yks' pyöräilijä

Eli opetus≫

April 1, 2013
by Markku Leino
0 comments

4: Piirrä kuvamatriisi

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

5: Päivitä taustakuvamatriisi

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

3: Muodosta taustakuvamatriisi

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

2: Lataa png-kuvia

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

1: html5 & canvas

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