Kolmannella tunnilla jatkoimme JavaScript- ja JQuery- harjoitteluja. Saimme tuntitehtäväksi koodata yksinkertaisen pelin. Minä koodasin pienen Noppapelin, jonka laitoin julkiseksi osoitteeseen

http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/peli.html

Pelissä on ideana yksinkertaisesti ensin syöttää numero 1-6 ja heittää sen jälkeen noppaa. Mikäli on arvannut nopan heittämän luvun, voittaa pelin. Muussa tapauksessa häviää.

Aloitusnäkymä:

Image

Virheellinen arvo:
Image

Uusi yritys…
Image

…ja häviö
Image

Tämä oli siis yksinkertainen tuntitehtävä. Läksyksi saimme ( http://terokarvinen.com/2013/aikataulu-–-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ) seuraavat tehtävät

h3: Tee yksinkertainen jQuery-peli
– Lisää siihen grafiikkaa (esim. vaihtamalla $(“img”).attr(‘src’, ‘tero.jpg’))
– Laita pelisi weppisivulle pelattavaksi
– Tee pelistä Android-projekti ja kokeile sitä emulaattorissa

 Ajattelin laajentaa hiukan tuota tunnilla tekemääni peliä. Halusin jälleen piirtää ja koska läksyyn kuuluu grafiikka, päädyin seuraavaan ideaan.
Tavoitteena olisi tehdä seuraavanlainen pelisovellus:
-Aloitustilassa hahmo seisoo noppa käsissään ja sanoo: “Hei, pelataan noppapeliä! Sinä arvaat luvun, ja minä heitän noppaa. Jos olet arvannut oikein, voitat! Muussa tapauksessa minä voitan. Noniin, arvaa!” (teksti “liukuisi” näkyviin)
– Sitten ilmestyy input-boxi, jonne käyttäjä syöttää numeron ja boxi, josta painaa “heitä noppaa”. (kuten alkuperäisessäkin pelissä)
– Sitten lyhyt animaatio, jossa hahmo heittää noppaa. Viimeinen kuva valikoituu randomisti (6 erilaista, jokaiselle nopan asennolle).
– Mikäli kuva ja käyttäjän numero samat, käyttäjä voittaa ja hahmo näyttää nyrpeää naamaa ja sanoo: “Pah, voitit!”. Muussa tapauksessa vahingoniloinen naama/nauru ja: “HAhaa! Minä voitin!!”

Päätin tällä kertaa koodata ohjelman helpommin, TextWrangler-ohjelman ( http://www.barebones.com/products/textwrangler/ ) avulla käyttäen “Open from SFTP Server”-ominaisuutta. Näin sain myyllä olevat tiedostot helposti muokattaviksi.

Pohjaksi otin valmiin pelin koodin peli.html, mutta tallensin sen uudelleen nimelle noppapeli.html. Näin molemmat pelit säilyvät myy-hakemistossani. Vaihdoin myös taustakuvan ja nimen. Tämän jälkeen pääasiassa yhdistelin edellisen läksyn ja pelin ominaisuuksia. Lisäsin peliin seuraavat toiminnot:

$(‘#hahmo’).animate( {
height : ‘134px’,
width : ‘141px’,
},
1000, function() {
$(‘#oa’).animate({ opacity : 1.0 }, 1000, function () {
$(“#lukusi”).show();
$(“#laheta”).show();
});
});

Laitoin siis  laittoi hahmon “liikkumaan” kuvaan. Eli olin määritellyt css-osioon (style-osioon) kuvan korkeudeksi ja leveydeksi 0, mutta softan käynnistyessä, se suurenee oikeaan kokoonsa. Tämän jälkeen ilmestyy teksti ja sen jälkeen vasta input-boxi ja lähetä-nappi. Nämä olin piilottanut aluksi stylessä ja nyt toin näkyviin.

$(‘#laheta’).click(function(){
var luku = $(‘#lukusi’).val();
var randomNumero = 1 + Math.floor(Math.random() * 6);
if (luku > 0 && luku < 7) {
var munKuvat = [
“panda2.png”,
“panda3.png”,
“panda2.png”,
“panda1.png”,
];
var laskin = 0;

function vaihdaKuvat() {
$(‘#hahmo’).attr(‘src’, munKuvat[laskin]);
laskin += 1;

if (laskin == munKuvat.length) {
clearInterval(vaihdaKuvat);
$(“#noppa”).text(“Sinä annoit ” + luku + “. Noppa antoi ” + randomNumero);
if (luku == randomNumero) {
$(“#tulos”).text(“Pah, voitit!”);
}
else {
$(“#tulos”).text(“Hahaa! Minä voitin!”);
};
$(“#laheta”).hide();
$(“#oa”).css(“visibility”,”hidden”);
$(“#lukusi”).hide();

}
}

setInterval(vaihdaKuvat, 100);

}
else {
$(“#noppa”).text(“Tyhmä! Ei nopassa ole tollasta lukua!”);
};
});

Sitten tein samoin kuin edellisessä kotiläksyssä, eli lisäsin animaation. Kuva liikkuu, mikäli syötetty arvo on kelvollinen.

Seuraavaksi piirsin kuvat, skannasin, Photoshoppasin ja talletin ne myylle.

kuvat

Tässä vaiheessa koodi näytti tältä:

Picture 1 Picture 2 Picture 3
Ja selaimessa tältä:

Picture 4

Seuraavaksi muokkasin kuusi erilaista kuvaa ja lisäsin if-elseen voitto- ja häviöposeeraukset. Koodiin:

if (luku == randomNumero) {
$(“#tulos”).text(“Pah, voitit!”);
$(‘#hahmo’).attr(‘src’, ‘hp’ + randomNumero + ‘.png’);
}
else {
$(“#tulos”).text(“Hahaa! Minä voitin!”);
$(‘#hahmo’).attr(‘src’, ‘vp’ + randomNumero + ‘.png’);
};

Kuva on eri riippuen nopan heitosta.

Picture 5

Seuraavaksi lisäsin alkutekstit liukuviksi. Tein SetInterval-funktion:

myInterval = setInterval( function () { kirjoita()} , 40);

Määrittelin aiemmin muuttujan teksti ja funktion kirjoita:

var teksti = “Hei, pelataan noppapeliä! Sinä arvaat luvun, minä heitän noppaa. <br> Jos arvaat oikein, voitat! Jos väärin, minä voitan. Noniin, arvaa!”;
var n = 0;
function kirjoita(){
n++;
$(‘#oa’).html(teksti.substr(0,n));
if (n == teksti.length) {
clearInterval(myInterval);
$(“#lukusi”).show();
$(“#laheta”).show();
}
}

Lopuksi hienosäädin vielä tyyliä eli määrittelin uuden divin “kaikki”, jolle stylessä arvot:

#kaikki {
margin: 30px auto auto auto;
text-align: left;
width: 500px;
}

ja bodylle

text-align: center;

Picture 6Picture 7

Sitten vaan pari kertaa tallettelua ja peli on nyt pelattavissa (!!!!) osoittessa
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/noppapeli.html

Testautin peliä luokkatovereillani ja he olivat sitä mieltä, että on turhauttavaa reloadata sivu joka kerta, jos haluaa pelata uudestaan. Tästä syystä lisäsin vielä yhden button elementin ( input id=’nappi’ type=”button” value=”Pelaa uudestaan?” ) ja Javascript-puolelle click-funktion, jonka sisällä näytin ja piilotin tarvittavat elementit niin, että kuva näyttää jälleen samalta kuin aloittaessa.

$(‘#nappi’).click(function(){
$(“#oa”).css(“visibility”, “visible”);
$(“#lukusi”).show();
$(“#laheta”).show();
$(“#noppa”).hide();
$(“#tulos”).hide();
$(“#nappi”).hide();
$(‘#hahmo’).attr(‘src’, ‘panda1.png’);
});

Ainoa ongelma oli enää, että input-boxi säilytti jo aiemmin annetun arvon. Halusin tyhjentää sen joka peliin uudelleen, joten etsin ohjeita. Löysin Googlaamalla seuraavan: http://stackoverflow.com/questions/1868773/jquery-clearing-an-input-text-field ja lisäsin click-funktion sisälle vielä

$(“#lukusi”).val(“”);

Seuraavaksi vaihdoin Ubuntun puolelle ja kokeilin softaa vielä Android-emulaattorissa. Loin uuden projektin “Noppispeli”,ja muuten toimin samoin kuten ensimmäisessä postauksessani. Laitoin oman koodini index.html-tiedostoon ja ajoin ohjelman.

Screenshot from 2013-09-17 16:18:32 Screenshot from 2013-09-17 16:18:49 Screenshot from 2013-09-17 16:19:04

Ohjelma oli rajautunut huonosti ja animaatio emulaattorissa oli kovin kömpelöä. Ohjelma kuitenkin toimi.

Advertisements