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

Pelin teko jQuery:a käyttäen

Pelin teko

Pelaaminen Android emulaattorissa

Lähteet