Neljänneksi läksyksi saimme seuraavan tehtävän ( http://terokarvinen.com/2013/aikataulu-%E2%80%93-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ):

“Tee “Hello Cordova Device”: ohjelma, joka näyttää mahdollisimman yksinkertaisesti, että Cordova APIt toimivat. Voit käyttää mitä vain helppoa APIa, esim. Device tai Connection.

Kirjoita jokin peli tai ohjelma, joka hyödyntää valitsemiasi Cordova API:a. Ohjelmalla tulee olla jokin selkeä tarkoitus, mutta vaativuuden voit valita taitojesi ja kunnianhimosi mukaan.”

Tein tehtävän Ubuntulla, jolla aloitin käynnistämällä Eclipsen. Loin uuden Android-ohjelman ja toimin muutenkin samoin kuin ensimmäisen läksyn kohdalla. Kokeilin ensin jälleen Device-APIa ja se näytti tältä (ohje: http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#Device):

device

Sitten testasin Connectionia ja se näytti tältä (ohje: http://docs.phonegap.com/en/2.1.0/cordova_connection_connection.md.html#Connection):

connection
Sain nämä toimimaan ja tein koodin omaan softaani:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<title>Aden Cordova</title>
<link href=’http://fonts.googleapis.com/css?family=Bubbler+One&#8217; rel=’stylesheet’ type=’text/css’>
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script&gt;
<script type=”text/javascript” charset=”utf-8″ src=”cordova-2.1.0.js”></script>
<meta charset=”utf-8″ />
<script type=”text/javascript” charset=”utf-8″>
var munKuvat_y = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png&#8221;
];
var counter = 0;
var Intervalli;

function vaihdaKuvat_y() {
$(‘#hahmo2’).attr(‘src’, munKuvat_y[counter]);
counter += 1;

if (counter == munKuvat_y.length) {
clearInterval(Intervalli);
}
}

var munKuvat_k = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa1.png&#8221;
];

function vaihdaKuvat_k() {
$(‘#hahmo1’).attr(‘src’, munKuvat_k[counter]);
counter += 1;

if (counter == munKuvat_k.length) {
clearInterval(Intervalli);
}
}

function onLoad() {
document.addEventListener(“deviceready”, onDeviceReady, false);
$(“#hahmo3”).click(function(){
alert(“Testi!”);
});
}

function onDeviceReady() {
document.addEventListener(“volumedownbutton”, onVolumeDownKeyDown, false);
document.addEventListener(“volumeupbutton”, onVolumeUpKeyDown, false);
}

function onVolumeDownKeyDown(){
counter = 0;
Intervalli = setInterval(vaihdaKuvat_y, 50);
}
function onVolumeUpKeyDown(){
counter = 0;
Intervalli = setInterval(vaihdaKuvat_k, 50);
}

</script>
<style>
body {
background-image: url(“http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/tk.pdf&#8221;);
font-family: ‘Bubbler One’;
text-align: center;
}

kaikki {
margin: 30px auto auto auto;
text-align: center;
width: 300px;
}

#hahmo1 { margin: 10px 50px 10px 50px; }
#hahmo2 { margin: 10px 50px 10px 50px; }
#hahmo3 { margin: 10px 50px 10px 50px; }
#hahmo4 { margin: 10px 50px 10px 50px; }

</style>
</head>

<body onload=”onLoad()”>
<div id=’kaikki’>
<img id=”hahmo1″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minikissa1.png”&gt;
<img id=”hahmo2″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png”&gt;
<br>
<img id=”hahmo3″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/poikaorava.png”&gt;
<img id=”hahmo4″ src=”http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/tyttoorava.png”&gt;
</div>
</body>
</html>

Tavoitteena olisi ollut saada 2 ylintä kuvaa liikkumaan, kun VolumeUp ja VolumeDown-nappuloita käytetään. En kuitenkaan onnistunut saamaan softaa toimimaan halutulla tavalla, joten pitänee yrittää vielä koulussa uudestaan.

Lopullisen pelin tavoitteena olisi ollut tehdä peli, jossa minihahmo liikkuu läpi ruudukon ja väistää isompia hahmoja. y-suuntainen liike olisi ollut automaattinen ja x-suuntaa tulisi säädella VolumeUp/VolumeDown-nappuloilla.

Siirryin käyttämään koulussa xubuntu-käyttöjärjestelmää. Ratkaisin VolumeUp ja VolumeDown-nappien toimimattomuuden! Googlailin ohjeita ja löysin seuraavan:

http://stackoverflow.com/questions/12890170/android-volume-key-event-capture

Lisäsin siis MainActivity.java-tiedostoon sivulla annetun koodin. Testasin nappeja ensin yksinkertaisesti Hello Wordilla ( ohje: http://docs.phonegap.com/en/2.1.0/cordova_events_events.md.html#volumedownbutton ) ja ohjelma toimi moitteitta!

ylos
alas

Seuraavaksi yritin aiemmin koodaamassani kuvasarjassa volumenappien toimintaa. Kun klikkaa lisää äänenvoimakkuutta, minikissa liikkuu. Kun klikkaa äänenvoimakkuutta pienemmälle, miniapina liikkuu.

kuva

Seuraavaksi pelin kimppuun.
Suunnitelmanani on siis tehdä ns. tammenterhopeli.
“Pelaajan hahmo on pieni tammenterho, jonka tarkoituksena on päästä turvallisesti puunoksalta maahan. Puunoksa on ruudun yläkulmassa ja koko alareuna on “maali”. Matkalla on kuitenkin ongelmia: (pienet) oravat, jotka haluavat popsia tammenterhon parempiin suihin. Niitä kuuluu väistellä!
Peli toimii yksinkertaisesti niin, että Start-napin painamisen jälkeen tammenterho alkaa liikkua (suht nopeasti) pystysuoraan läpi ruudun eli siis tippuu puusta. Terhon sivuttaissuuntaista liikettä voi ohjailla VolumeUp ja VolumeDown-napeilla. VolumeUp siirtää terhoa oikealle ja VolumeDown vasemmalle. Liikkumisen tehtävänä on väistellä oravahahmoja, jotka liikkuvat ympäriinsä ruudulla. Oravien liike on x-suuntaista.”

Päätin kodata ohjelman ensin vain selaimelle, sillä tällä tavoin pystyin käyttämään Mac OS X-käyttöjärjestelmääni ja sitä kautta TextWrangler-tekstieditoriani. Aloitin piirtämällä tammenterhon

ja koodamalla sen liikkeen. Alaspäin se putoaa (hieman fysiikan lakeja uhmaten) tasaista vauhtia ja vaakatasoliikettä voi säädellä nuolinäppäimillä.

Screen Shot 2013-09-28 at 11.20.50 AMScreen Shot 2013-09-28 at 11.20.56 AMScreen Shot 2013-09-28 at 11.21.09 AM

Seuraavaksi lisäsin oravat. Niiden paikat säädin randomeiksi offset-funktion avulla:

var tpaikka = $(“#tytto”).offset();
tpaikka.left = Math.floor((Math.random()*500)+1);
tpaikka.top = Math.floor((Math.random()*600)+1);
$(“#tytto”).offset(tpaikka);

Sitten halusin saada hahmot liikkumaan edestakas ja käytin sivostolta suoraan kopioimaani esimerkkiä animate-funktiosta:

http://stackoverflow.com/questions/10729968/jquery-animate-movement-left-and-right

Seuraavaksi seurasikin koko koodin vaikeimmat osuudet: hahmojen oma liike sekä terhon osumisen tunnistaminen. Loin funktion vaihdaKuvat jo oppimallani tekniikalla, mutta tällä kertaa jouduin lisäämään if-elsen vaihtamaan kuvia riippuen siitä, kumpaan suuntaan hahmo liikkuu. Loin siis erillisen muuttujan “suunta” sekä funktion “liike” esim.

function poikaliike(){
suunta_poika = “oikea”;
$(‘#poika’).animate({
left: ‘+=220’ }, 900,
function () {
suunta_poika = “vasen”;
$(‘#poika’).animate({
left: ‘-=220’ }, 900,
function() {
poikaliike()
}
)
}
)
}

jossa muuttujan suunta arvoa vaihdetaan aina, kun hahmo vaihtaa suuntaa. Tämän jälkeen vaihdaKuvat-funktioon

function vaihdaKuvat() {
if (suunta_poika === “vasen”) { $(‘#poika’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika’).attr(‘src’, munKuvatOik[laskin]); }
if (suunta_poika2 === “vasen”) { $(‘#poika2’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika2’).attr(‘src’, munKuvatOik[laskin]); }
if (suunta_poika3 === “vasen”) { $(‘#poika3’).attr(‘src’, munKuvat[laskin]); }
else { $(‘#poika3’).attr(‘src’, munKuvatOik[laskin]); }
laskin += 1;
if (laskin == munKuvat.length) {
laskin = 0;
}

}

jossa hahmojen liikkuessa vasemmalle, kuvat valitaan muuttujasta munKuvat, jossa on siis vasempaan suuntaan liikkuvat hahmojen kuvat. Vastaavasti munKuvatOik-muuttujaan on talletettu kuvat, jossa hahmo liikkuu oikealle.

(Seuraavaan tarvitsin hieman neuvoja kokeneemmalta koodarilta:) Tämän jälkeen täytyi tehdä funktio, joka tarkistaisi, törmääkö tammenterho johonkin hahmoon. Funktion nimeksi annoin tarkistaTormays ja parametriksi “id”. Tämä mahdollisti myöhemmin funktion käytön usealle eri hahmolle. Funktio näytti tältä:

function tarkistaTormays(id) {
var paikka = $(“#” + id).offset();
var terhonpaikka = $(“#terho”).offset();
var idVasen = paikka.left;
var idYla = paikka.top;
var idAla = paikka.top + $(“#” + id).height();
var idOikea = paikka.left + $(“#” + id).width();

var terhoVasen = terhonpaikka.left;
var terhoYla = terhonpaikka.top;
var terhoAla = terhonpaikka.top + $(“#terho”).height();
var terhoOikea = terhonpaikka.left + $(“#terho”).width();
if (idOikea < terhoVasen) return false;
if (terhoOikea < idVasen) return false;
if (idAla < terhoYla) return false;
if (terhoAla < idYla) return false;
return true;
}

Ensin määrittelin siis muuttujiksi niin tammenterhon kuin hahmon ylä-, ala- ja sivupaikat. Tämän jälkeen vain vertailin, että mikäli hahmon oikean reunan arvo on pienempi kuin terhon vasemman reunan arvo eli hahmo on kokonaan lähempänä vasempaa reunaa kuin terho, funktio palauttaa false. Tein tämän sekä ylä- että sivupuolelle ja loppuun return true, eli jos joku näistä ei pidä paikkaansa, terho osuu johonkin kohtaan hahmoa. Tämän jälkeen loin uuden funktion, jossa laitoin jokaiselle hahmolle erikseen tarkistuksen, onko palautettu true.

function tarkistaKaikki() {
if (tarkistaTormays(“poika”)) {
alert(“H�visit! LOOOOSEEEER!”);
}

}

Lisäsin myös hide-funktiot liikkuvien oravien kohdalle sekä clearIntervalit tarkistaTormayksen sisälle. Piirsin häviötilanteen kuvat ja lisäsin show-funktiot tarkistaTormays-funktioiden sisälle. Laitoin myös, että tammenterhoa pitää klikata, ennen kuin se alkaa tippua.

Tällä hetkellä peli on pelattavissa osoitteessa

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

Seuraavaksi tehtävinä on:

– piirtää ja lisätä voittokuva

-tehdä pelistä versio Cordovalle

 

Sain pelin toimimaan myös Androidilla!!!!! Tein koodiin muutamia muutoksia, lisäsin MAinActivity.javaan aiemmin lisäämäni linkin mukaisen pätkän, lisäsin Cordova-ominaisuudet (mm.eventlistener)  ja vaihdoin keyboard-nappien paikalle onVolumeUpKeyDown- ja onVolumeDownKeyDown- funktiot. Tässä muokattu versio koodista (ei toimi selaimessa):

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

 

 

Advertisements