2.12 Neljas Tund

Eelmise tunni kood

Kättesaadav siin: https://pastebin.com/raw/WbpMVeYj

Terve kaust: google drive’is

Plaan

  1. Score arvestamine mängus
  2. Ajavahemikku vähendamine ja start nuppu parandamine – valmis kood
  3. Mängu lõpetamine
  4. build.phonegap.com registreerimine
  5. Template meie rakenduse jaoks – link
  6. Rakenduse nime vahetamine
  7. Icon, splashscreen
  8. Installimine

Kodutöö

Milleks teha?

Parimad tööd pannakse avalikku veebi (muidugi kui õpilane ise seda soovib). Täpsemalt siis Heroku serveri peale.

Mida ja kuidas teha?

  1. Valite endale meeldiv veebilehe template siit: https://html5up.net
  2. Laadige alla
    • Screenshot_2
  3. Tehke arhiiv lahti
    • Screenshot_4
    • Screenshot_5
  4. Installige endale Brackets või kasutage enda jaoks mugavamat text-editor’i.
  5. Avage kausta “as Brackets project” kui kasutate Brackets’i.
    • Screenshot_6
  6. Muutmiseks on index.html fail ja pildid.
  7. Veebilehe vaatamiseks võite kasutada kaht viisi:
    1. Live Preview (kui teil on Brackets), siis kõiki muudatusi näidatakse veebilehel automaatselt.
      Screenshot_8
    2. Või saate index.html otse brauseris avada, siis on vaja pärast igat koodi muutmist seda esiteks salvestada (CTRL+S) ja siis brauseris veebilehe uuendada (F5, või vastava nupu abil).
      Screenshot_9
  8. Screenshot_10
  9. Piltide jaoks on teil eraldi kaust images. Piltide asendamiseks võite kasutada enda poolt tehtud pilte ja pilte siit: https://unsplash.com/
  10. Laadin alla uue pildi Unsplash’ist ja panen selle images kausta. Pange tähele, et mul sisselülitatud faili tüübi näitamine windowsis.
    • Screenshot_11
  11. Vahetan vastava koodi index.html’is.
    1. Oli:
      Screenshot_12
    2. Nüüd:
      Screenshot_13
  12. Esimene pilt tehtud, sarnaselt saate ka teisi muuta.
    Screenshot_14
  13. Muutke ka veebilehe pealkirja (Antud juhul “Lens”) ona nime vastu. Ja halli tektsti asemele (Antud juhul “Just another fine….”)  kirjutage lühidalt midagi endast.
  14. Kui teil tekivad küsimused, küsige emaili teel: valeri.randalainen@live.com
  15. Edu!

25.11 Kolmas Tund

Kui teil ei õnnestunud eelmises tunnis koodi lõpuni kirjutada

Täielik kood eelmisest tunnist: https://pastebin.com/raw/4uxwVjQx

Kopige seda koodi endale, kas täielikult või osaliselt (kui teate mis teil täpselt puudu on) index.html failisse.

Terve kaust eelmisest tunnist: link

Selle tunni plaan

  1. Vaatame üle eelmises tunnis kirjutatud koodi sh ka kordamine
  2. Javascript muutujad – link
  3. Javascript funktsioonid – link
  4. Punase ruudu asukoht on random – link
  5. Test !!11 🙂 – TEST (7 min)    /   game hacks
  6. Arendame click+score süsteemi meie mängus – seeni kirjutatud kood
  7. Kodutöö seletus – html5up

Tänane kood

Kuna tegu on enamasti JavaScript’iga siis koodi kirjutame <script> taagide vahele.

Screenshot_1

Ülesanne pdf

Sarnaselt eelmise tunniga, saate ka iseseisvalt töötada vastava ülesande järgi: link

NB: Seekord, tuleb valmis tehtud ülesannet (ehk valmis index.html faili sisu) panna pastebin‘ile.

5 parimat (aja ja vastuste täpsuse järgi) saavad enda mängu kasutajaliidese jaoks lisaviimistlust 🙂

Kodutöö

Image result for here be dragons

 

Teine tund 18.11

Alates sellest tunnist, me teeme projekti millest lõppuks saab töötav mobiilirakendus (clicker-mäng).

Selle tunni eesmärgiks on teha suures osas valmis kasutajaliidese.

Slaidid allalaadmiseks: https://drive.google.com/open?id=1McDYpQ9UqbG98Lm-f5Yx97uKwtzreR3N

Slaididel on ka palju linke, nii et saate iseseisvalt w3schools’i näiteid vaadata (eriti tähtis KÜS2 juures).

Kuidas click event’i lisada:

https://www.w3schools.com/jquery/event_click.asp

Kolmas tund 14.10

Eelmise tunni kood: https://pastebin.com/zYMrfyKu

Uus kood, score’idega: https://pastebin.com/mk4wEDrh

Quiz: https://goo.gl/forms/B343RG1InZU7hVOy1

Teine osa

Viimane faili ver: index.html

Registreerige ennast:
https://build.phonegap.com
https://github.com/

Laadige alla:
https://drive.google.com/open?id=0B9DGlEpugPdjSjZuUzRYdHc1S3c

Kui teil on Android: vaadake seda videot ja lülitage omas telefonis Developer mode sisse.

Kui teil on (ainult) iPhone: pole midagi teha, oodake :C