Pelin teko jQuery:a käyttäen

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

2013-09-19-001018_759x388_scrot

 

2013-09-19-001035_759x433_scrot

 

  • 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

Bookmark the permalink.

Comments are closed.