Ensin piirsin perusilmeet pentuvaiheille:
Sitten hahmottelin perusilmeet keskivaiheelle:
Piirisn ne myös, mutta värien kanssa on hieman ongelmia…
Meow! Luonnostelmasta valmiiksi kuvaksi:
Seuraavaksi aioin laittaa hahmon liikkumaan, kun pääsivua klikataan. (Eihän mikään eläin nyt juokse pysyen samassa asenossa!) Tein aluksi vain yhdet kuvat (ei siis vielä animaatiota) ja hahmottelin koodia aluksi paperille:
Tavoitteena oli siis määritellä, mihin suuntaan hahmo liikkuu. Missä on klikattu kohta suhteessa hahmon tämänhetkiseen paikkaan. Jaoin ympyrän 8 eri osaan, joista määrittelisin kulman alpha (eli juoksusuunta nykyisestä paikasta klikattuun paikkaan) ja tämän kautta hakisin indeksiarvon, jonka mukaan sitten valitsisin kuvan.
Lisäsin tällaisen pätkän koodiin:
$('#paasivu').click(function(e){
var yErotus = e.clientY-($("#hahmo").offset.top()+$("#hahmo").height()/2);
var xErotus = e.clientX-($("#hahmo").offset.left()+$("#hahmo").width()/2);
var kulmaRad = Math.atan2(yErotus, xErotus);
var kulma = 180*kulmaRad/Math.PI;
if (kulma < 0) {
kulma = kulma + 360;
}
var indeksi = Math.Floor((kulma + 22.5)/45);
if (indeksi == 8) {
indeksi = 0;
}
$(“#hahmo”).animate({
top : e.clientY – $(“#hahmo”).height()/2,
left : e.clientX – $(“#hahmo”).width()/2
}, 1000, function() {});
$(“#hahmo”).attr(“src”, Lemmikki.image);
});
Ensin piti siis hakea kulma. Kulman α :nhan saa lausekkeella: (y2-y1)/(x2-x1) = tan α
Tämän vuoksi laskin ensin y:iden erotuksen (eli Δy ) ja x:ien ( Δx ) erotuksen lausekkeilla
var yErotus = e.clientY-($(“#hahmo”).offset.top()+$(“#hahmo”).height()/2);
var xErotus = e.clientX-($(“#hahmo”).offset.left()+$(“#hahmo”).width()/2);
Kohta, josta käyttäjä klikkaa, on siis piste (y2, x2) ja tästä miinustetaan hahmon tämänhetkinen paikka, joka saadaan offset-funktiolla ja hahmon puolikkaalla pituudella/leveydellä. (tämä siksi, että viitattaisi nimenomaan hahmon keskikohtaan, ei vasempaan ylänurkkaan).
Kun deltat on haettu, määritellään kulma. Käytin Javascriptin Math.atan2-funktiota ( http://www.w3schools.com/jsref/jsref_atan2.asp ), joka palautti kulman siis radiaaneina. Saadakseni siitä asteluvun, kerroin sen 180* ja jaoin piillä.
var kulmaRad = Math.atan2(yErotus, xErotus);
var kulma = 180*kulmaRad/Math.PI;
Tällä tavalla kulma palauttaa luvun väliltä -180 ja 180. Halusin kuitenkin käsitellä vain positiivisia lukuja, joten lisäsin if-lauseen, jossa negatiivisille arvoille lisätään aina 360. Nyt käsiteltävät arvot ovat 0-359.
Funktio atan2 on kätevä (“fiksu”), sillä sille syötetään parametreiksi y:n erotus ja x:n erotus. Näiden perusteella se osaa päätellä, millä neljänneksellä kulma on. Esim. jos sekä y että x ovat negatiiviset, kulma on vasempaan alanurkkaan päin. Tavallinen atan-funktio saa vain yhden parametrin eli y:n erotus jaettuna x:n erotuksella. Näinollen se antaa tulokseksi kulman välillä -90 ja 90 astetta, kun taas atan2 osaa erottaa, ovatko luvut eri- vai samanmerkkiset. Arvo vaihtelee siis välillä -180 ja 180.
Seuraavaksi halusin määritellä indeksin, jossa on 8 lukua. Minullahan oli ympyrä (piirros yläpuolella) jaettu 8 eri osaan ja koska 360/8 = 45, jokainen ympyrän sarake on 45 astetta. Ongelmana on kuitenkin, että sarakkeeni eivät mene aivan tasaisesti niin, että 45 asteen jälkeen vaihtuiisi indeksi. esim. 15° ja 355° tulisi kuulua samaan indeksiin. Kulma vaihtuu pikemminkin kohdissa 22,5° ja 337,5°. Tämän vuoksi lisäsin kulmalle arvon 22,5 ja vasta sitten jaoin sen 45:llä.
var indeksi = Math.Floor((kulma + 22.5)/45);
if (indeksi == 8) {
indeksi = 0;
}
Loin siis muuttujan “indeksi”, joka antaisi arvon väliltä 0-7. Käytin Math.Floor-funktiota ( http://www.w3schools.com/jsref/jsref_floor.asp ), jotta arvo olisi kokonaisluku. Koska olin lisännyt kulmalle arvoa 22,5, kulma saattaa mennä yli 360° ja näinollen antaa indeksiluvuksi 8. Mikäli näin tapahtuu, muutan if-lauseessa tämän tapauksen indeksiarvoksi 0.
Tämän jälkeen lisäsin switch-caset perustuen indeksin arvoon:
switch(indeksi) {
case 1: $(“#hahmo”).attr(“src”, “p_juo_oik_ylaviisto1.png”); break;
case 2: $(“#hahmo”).attr(“src”, “p_juoksu_eteen1.png)”); break;
case 3: $(“#hahmo”).attr(“src”, “p_juo_vas_alaviisto1.png”); break;
case 4: $(“#hahmo”).attr(“src”, “p_juo_vas_sivu1.png”); break;
case 5: $(“#hahmo”).attr(“src”, “p_juo_vas_ylaviisto1.png”); break;
case 6: $(“#hahmo”).attr(“src”, “p_juoksu_taakse1.png”); break;
case 7: $(“#hahmo”).attr(“src”, “p_juo_oik_ylaviisto1.png”); break;
case 0: $(“#hahmo”).attr(“src”, “p_juo_oik_sivu1.png”); break;
}
Koodi ei toiminut heti, joten testauksen jälkeen muutama korjaus:
1 )
var yErotus = e.clientY-($(“#hahmo”).offset().top+$(“#hahmo”).height()/2);
var xErotus = e.clientX-($(“#hahmo”).offset().left+$(“#hahmo”).width()/2);
on oikea muoto, EI SIIS SULKUJA top:n ja left:n jälkeen! Sulut offset-funktion jälkeen!!!!!!
2 )
Math.floor kirjoitetaan pienellä. 🙂
Adeliina Sorvari ja Mobiili 