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ä erottaa toisistaan, että ladata funktiossa. Kuvat ladataan taulukkoon; tai olioon.

function lataaKuvat(nimi, nmax){
var taulu = [];
for(var i=0;i<=nmax;i++){
var img = new Image();
img.src="img/"+nimi+i+".png";
taulu.push(img);
}
return taulu;
}

Aluksi määritellään tyhjä taulu; silmukassa käydään kaikki indeksi läpi, kunnes päästään viimeiseen, ja samalla ladataan kuvadata talteen ja pushataan se taulun viimeiseksi.

Lopulta palautetaan taulu.

Kuvat ladataan esim käskyillä

var tieSuoraan = lataaKuvat('tiesuoraan', 5);
var ukko = lataaKuvat('ukko', 5);
var lintu = lataaKuvat('lintu', 5);
var karpanen = lataaKuvat('karpanen', 5);
var vihu = lataaKuvat('vihu', 5);