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 samaa vaakariviä joka paikkaan.
for (var j=maasto[0].length-1; j>0; j--){
for (var i=0; i < maasto.length; i++){
maasto[i][j]=maasto[i][j-1];
maastomuoto[i][j]=maastomuoto[i][j-1];
}
}

Sitten päivitetään ylin riviä. Siinä pitää ottaa huomioon, missä kohtaa tie on, sillä jos tie on vasemmassa reunassa (tie=0), se ei saa kääntyä enää vasemmalle. Samoin oikeassa reunassa (tie=4).

Aluksi arvotaan liukuluku väliltä $[0,1)$.

var Suunta = Math.random();

if (tie == 0){
//Vasen reuna: ylös tai oikealle
if (Suunta < 0.5){ //Oikealle
tie = jatkaTieOikeaan(tie);
}else{ //Ylös
tie = jatkaTieYlos(tie);

}
}else
if (tie==4){
//Oikea reuna; ylös tai vasemmalle
if (Suunta < 0.5){ //Vasemmalle
tie = jatkaTieVasempaan(tie);
}else{ //Ylös
tie = jatkaTieYlos(tie);
}
}else{
//Tie on oikean ja vasemman reunan välissä
if (Suunta < 0.4){
//Vasemmalle
tie = jatkaTieVasempaan(tie);
}else
if (Suunta < 0.8){ //Oikealle
tie = jatkaTieOikeaan(tie);
}else{ //Ylos
tie = jatkaTieYlos(tie);
}
}

Päivitys perustuu Markovin ketjuun, mutta koodi idealtaan hyvin simppeli ja funktionaalinen. Olioita ei nyt juuri ole hyödynnetty tässä.

Funktioiden nimet pitäisivät olla merko selkeitä. Esimerkiksi jatkaTieVasempaan(tie) jatkaa tien piirtämistä käännöksellä vasempaan.

Ensin pitää arpoa, kuinka pitkälle tie saa mennä vaakasuoraan. Sitten täytetään tiet suorilla (arvotaan aina joku vaakasuoran tien pätkä), piirretään mutkat (arvotaan nekin) ja lopuksi pistetään vielä taustaa sekaan. Funktio palauttaa ylös menevän tien indeksin.

function jatkaTieVasempaan(ind){
//Arvotaan, kuinka kauas mennään vasempaan, eli arvotaan indeksi, jossa käännytään ylös
ylos = Math.floor( Math.random()*(ind-1) );

maasto[ind][0] = tieVasemmalle[Math.floor(Math.random()*tieVasemmalle.length)];
//Täytetään välit suorilla
for (var i=ylos+1; i<ind; i++){
maasto[i][0] = tieVaakaan[Math.floor(Math.random()*tieVaakaan.length)];
}
maasto[ylos][0] = tieVasenYlos[Math.floor(Math.random()*tieVasenYlos.length)];

//Täytetään muut taustalla
var iTausta = [0, 1, 2, 3, 4];
iTausta.splice(ylos, ind-ylos+1);
for ( var i in iTausta ){
maasto[iTausta[i]][0] = taustaKuva[Math.floor(Math.random()*taustaKuva.length)];
}

return ylos;
}

Huhtirun on GitHubissa.

https://github.com/HuhdinKoulu/HuhtiRun