Tehtävänannossa käskettiin tehdä peli jQuery:lla, joka sisältäisi grafiikkaa ja toimisi myös Android emulaattorissa.
Pelin teko
Pelin ideana oli päätellä käyttäjän ajattelema luku käyttäen apuna kahta painiketta, “bigger” ja “smaller”.
Sivun pohja on ihan normaali html-sivu ja bodyn lopussa on sitte javascript-osuus.
<body>
// Buttons etc are here...
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#question").html("<h3>Is your number 3?</h3>");
$("#bigger ,#smaller").click(function(){
if(this.id == "bigger"){
$("#question").html("<h3>Is your number 4?</h3>").delay(2000);
$("#bigger, #smaller").click(function(){
if(this.id == "bigger"){
$("#question").html("<h1>Your number is 5! So jQuery won!<h1>");
} else if (this.id == "smaller"){
$("#question").html("<h1>You are cheatin ,so jQuery won!</h1>");
}
});
} else if (this.id == "smaller"){
$("#question").html("<h3>Is your number 2?</h3>").delay(2000);
$("#bigger, #smaller").click(function(){
if(this.id == "bigger"){
$("#question").html("<h2>You are cheating, so jQuery won!</h2>");
}else if (this.id == "smaller"){
$("#question").html("<h2>Your number is 1, so jQuery won!</h2>");
}
});
}
});
$("#reload").click(function(){
location.reload();
});
});
</script>
</body>
Pelaaminen Android emulaattorissa
Uuden Android Application Project:n teko onnistui valitsemalla ensin “File” -valikosta “New-> Project-> Android-> Android Application.” Projektin nimen täydentämisen jälkeen painoin kolme kertaa “next”:ä ja tämän jälkeen “Finish”. Tarkemmat ohjeet löytyvät täältä.
Jotta pelaaminen onnistuisi myös Androidissa, kopioin nykyisestä kansiosta game.html -tiedoston Android projektin kansioon.
$ cp game.html täydellinen/polku/eclipse/workspace/Peli/kansioon/asset/www/
Vaihdoin vielä tiedostonimeksi index.html, jotta käynnistyminen olisi helpompaa.
$ mv game.html index.html
- NumberGame
- Käyttäjä ajattelee numeroa ja jQuery kyselee mitä numeroa käyttäjä ajattelee. Ja jQuery voittaa aina.
- Beta
- GNU GPL v. 2
- APK-asennuspaketti
- Lähdekoodi (tar)
- Teknisesti ohjelma toimii yksinkertaisesti jos-lauseiden ympärillä. Ensimmäisen kysymyksen jälkeen käyttäjän klikattua painiketta ensimmäisen kerran, jQuerilla esitetään seuraava kysymys.
Lähteet
Tero Karvinen – Mobiilituotekehitys
PhoneGap – Getting Started with Android
– Antti-Ville Jokela
Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html