Olen nyt saanut koodattua (selaimeen) projektini hyvin alkuun. Tällä hetkellä projektin toiminnallisuus alkaa hahmottua: Alussa valitaan hahmo, jota aletaan kouluttaa. Tämän jälkeen avautuu pääsivu, jossa valittavana neljä peliä. Pelin voittaessa hahmo saa pisteitä, jota kautta sen taso nousee ja mieli paranee. Koodi on tällaisessa vaiheessa nyt:

-olen koodannut kaikki “sivut” (etusivu, pääsivu, 4 pelisivua) samaan index.html:ään, mutta jokaisen omaksi “div”ikseen. Sain idean ostmastani kirjasta Building iPhone Apps with HTML, CSS, and JavaScrpit ( http://www.amazon.com/Building-iPhone-Apps-HTML-JavaScript/dp/0596805780 ), kirjoittanu Jonathan Stark. Loin siis divin jokaiselle “sivulle”, mutta tein JavaScript-koodiin funktion, joka piilottaa aluksi kaikki sivut, mutta näyttää sen jälkeen ainoastaan valitun sivun(divin). Koin tämän keinon ÄÄRIMMÄISEN hyväksi, sillä se helpotti työtaakkaani huomattavasti.

Koodit siis tässä:

index.html:

ImageImage

 

Koodissa ei erityisemmin mitään ihmeellistä. Kuten sanoin, loin divit jokaiselle sivulle. Pelisivuissa ei toistaiseksi ole peliä, mutta tein tunnistimen, onko peli “voitettu” vai “hävitty” eli submit-buttonit. Javascriptissä määritellään, että klikattua toista niistä, pääsivu aukeaa taas.
Lisäksi tein listat, joihin toiseen tulee muuttuvat perustiedot ja toiseen “linkit” peleihin.

Tässä JavaScript-puoli:
ImageImageImage

Alussa tosiaan määrittelen “olion” eli luokan (kerrottu edellisessä postauksessa), jolle annoin muutaman lisäarvon, mutta tämän alle lisäsin sille uuden funktion. Määrittelin siis metodin (Javascriptissä prototype), jota kutsuttaessa pisteet lisääntyvät ja myös tarvittaessa (eli kun pisteitä yli 10) taso ja mieliala lisääntyvät. Mielialaan eli moodiin piti laittaa, että se lisääntyy vain taulukon “Moodit” arvojen verran, koska ilman tätä sääntöä, mood saisi arvon, jota ei ole. Taulukon viimeinen arvo jää siis pysyväksi, vaikka level nousisi miten korkealle.

Seuraavaksi määrittelin siis taulukon mielialoille ja annoin sille arvot. Määrittelin myös myöhemmin käytettävän Lemmikki-muuttujan sekä Hahmot-taulukon, jolle annoin nyt ensimmäiseksi ainoastaan tiikerimallisia hahmoja ja niitä kaksi (myöhemmin vaihdan toisen toki joksikin muuksi).

Sivun lopussa on määritelty funktio siirry, jolle parametriksi “sivu”.

function siirry(sivu) {
$(“.sivu”).hide();
$(“#” + sivu).show();
alusta(sivu);
}

Mainitsin tästä aiemmin ja  mielestäni nerokas tapa hoitaa sivulta toiselle liikkuminen. Ensiksi siis piilotetaan hide-funktiolla kaikki sivut ja tämän jälkeen avataan sivu, joka on annettu funktiota kutsuttaessa. Esimerkiksi 

siirry(“paasivu”);

siirtyy nimensämukaisesti pääsivulle. siirry-funktion lopussa ajetaan vielä koodin lopusta löytyvä funktio “alusta”, jonka parametrinä myös sivu. Sen sisälle määrittelen tarvittavat alustukset. Tällä hetkellä niitä on ainoastaan pääsivulla, mutta myöhemmin jokaiselle peli-sivulle tulee omat alustuksensa.

 

DocumentReadyssa puolestaan ensiksi piilotetaan kaikki sivut ja avataan aloitussivu, juuri kuten siirry-funktiossa. Tämän jälkeen luodaan div jokaiselle hahmolle (kerrottu edellisessä postauksessa) ja määrittelin myös, että jos hahmo-luokkaan kuuluvan tai jonkun #pelin (index.html:ssä listan osa) päälle laittaa hiiren, se muuttuu kursoriksi. Tästä ei ole myöhemmin hyötyä, kun siirrän sovelluksen kännykkään, mutta tässä vaiheessa helpottaa testausta ja on miellyttävämpi.

$(‘.hahmo’).click(function(){
$(“.nimi”).hide();
$(“.laheta”).hide();
$(“.tausta”).removeClass(‘taustaAktiivi’);
$(this).parent(‘div’).addClass(‘taustaAktiivi’);
$(this).siblings(‘.laheta’).show();
$(this).next(‘.nimi’).show();
$(this).siblings(‘.laheta’).click(function() {
$(“.nimi”).hide();
$(“.laheta”).hide();
var index = Number($(this).attr(‘title’));
Hahmot[index].name = $(this).siblings(‘.nimi’).val();
Lemmikki = Hahmot[index];
siirry(“paasivu”);
});
});

Tämä pätkä koodia liittyy aloitussivuun eli tein saman tempuin kuin aiemminkin. Aluksi piilotan kaikki nimi-boxit, mutta myöhemmin kutsun vain klikattua nimeä (this) ja se tulee näkyviin, kuten myös lähetä-nappi ko. kohtaan. Taustoille määrittelin css:ssä vaihtoehdon taustaAktiivi eli ensin kaikilta poistetaan se ja tämän jälkeen lisätään klikattulle kuvalle. Selventääkseni tapahtunutta, tässä pari kuvaa aloitussivusta:

ImageImageImage

Klikatun kuvan tausta siis aktivoituu ja sille ilmestyy nimi-input-boxi ja lähetä-nappula.

Kun lähetä-nappulaa on klikattu, Hahmot-taulukon “index.” arvo saa nimi-arvokseen annetun nimen ja muuttuja Lemmikki saa Hahmot-taulukon “index”-kohdan arvot. Tämä helpottaa jatkossa niin, että voidaan viitata ainoastaan muuttujaan Lemmikki, eikä tarvitse viitata Hahmot-taulukon tiettyyn arvoon. Tämän jälkeen funktiossa siirrytään pääsivulle.

$(‘#paasivu’).click(function(e){
$(“#hahmo”).animate({
top : e.clientY – $(“#hahmo”).height()/2,
left : e.clientX – $(“#hahmo”).width()/2
}, 1000, function() {});
});

 

Pääsivulla, jos klikkaat johonkin kohtaan, hahmo siirtyy sinne. Tämä oli helppo tehdä jqueryn “animate”-funktiolla. Vähensin top-arvosta height/2 ja left-arvosta width/2 eli puolet pituudesta ja leveydestä, jotta hahmo liikkuisi tarkalleen klikattuun paikkaan.

$(‘.peli’).click(function(){
if ($(this).attr(“title”)==”voitto”)
{ Lemmikki.lisaaPiste(); }
siirry(“paasivu”);
});

 

Toistaiseksi peli-sivuissa ei tapahdu muuta kuin lisätään pisteitä, mikäli olet klikannut “voitit”-nappulaa. Kaikki pelisivut ovat toistaiseksi samanlaiset:
Image

 

$(‘#pelit li’).click(function(){
switch($(this).attr(“id”)) {
case “peli1”: siirry(“ekapeli”); break;
case “peli2”: siirry(“tokapeli”); break;
case “peli3”: siirry(“kolmaspeli”); break;
case “peli4”: siirry(“neljaspeli”); break;
}
});

Tässä määritelty siis, että kun klikkaa jotain listan “pelit”-arvoa, se siirtyy valitulle pelisivulle.

 

Tässä vielä kuva pääsivusta:

 

Image

Advertisements