Step-by-step upute kako isprogramirati igricu Jozo Skakač u TouchDevelopu

1. JOZO SKAKAČ VS
TECHMEN

2. 1
1. Otvori https://www.touchdevelop.com/, zatim klikni na „Launch TouchDevelop“
2. Prijavi se klikom na „Sign in“
3. Prijaviti se možeš pomoću svog Microsoft (live, hotmail ili outlook), Facebook, Google ili Yahoo
korisničkog računa.
4. Nakon prijave na TouchDevelop, odaberi odgovarajuću razinu znanja programiranja u „Choose skill“

3. 2
Moguće je odabrati između tri ponuđene razine programiranja (početnička, srednja ili ekspertna)
Odabirom razine „beginner“ svoje aplikacije ćeš programirati metodom „drag and drop“ uporabom
pojednostavljenih blokova.
Srednja razina programiranja („coder“) omogućava uređivanje koda kao gotovog teksta te nudi više
mogućnosti u odnosu na nižu razinu programiranja.
Najviša razina programiranja („expert“) zahtjeva visoku razinu znanja programiranja te određena
predznanja programskih jezika (npr. Java Script). U ovome slučaju potpuno samostalno možeš pisati i
uređivati svoj programski kod.
Nakon odabira odgovarajuće razine programiranja pojavljuje se novi blok „Settings“.
Klikom na taj blok možeš urediti neke od postavki u TouchDevelopu, a po završetku uporabe programa
ovdje se možeš i odjaviti.

4. 3
5. Za kreiranje nove aplikacije, odnosno skripte klikni na „Create Script“
6. Otvorit će se novi prozor u kojemu možeš odabrati koju vrstu skripte želiš kreirati. U ovom slučaju
odaberimo praznu skriptu - „blank“
Otvorit će se novi prozor u kojemu trebaš imenovati svoju skriptu, a potom kliknuti na „create“

5. 4
Nakon toga otvara se prozor za uređivanje i pisanje tvoje nove skripte.

6. 5
ZADATAK: Isprogramirati igricu Jozo Skakač. Cilj igrice je upravljati robotom Jozom tako da on zaobiđe na sve
prepreke koje naiđe.
Veličina zaslona u igri neka bude 800x400 piksela. Početni broj života u igrici je 1. Jozo je širok 100 piksela, a
odlučio je letjeti po sredini zaslona prema istoku. Na Jozu djeluje ubrzanje sile teže od 400 px/s2
. Pritiskom na
zaslon, Jozo dobije energiju i poleti prema gore brzinom 200 px/s.
Jozo mora izbjegavati prepreke veličine 100 piksela koje lete prema njemu brzinom 100 px/s u razmacima od
200 px. U zraku se uvijek pojavljuje pet različitih prepreka - rajčica, magnet, NLO, Droid i kišni oblak, slučajnim
redoslijedom na različitim visinama.
Pripazi da Jozo ne izleti iz ekrana!
1. Kreiranje igre
Prvo je potrebno napraviti ploču igre, odnosno pozadinu po kojoj Jozo leti. Ploča je varijabla
određenih dimenzija. Za njezino kreiranje koristiti ćemo biblioteku „game“ kako bi mogli iskoristiti sve
dodatne funkcije iz te biblioteke.
Započnimo s kreiranjem koda klikom u „do nothing“ unutar funkcije main (). Varijablu ploča kreiramo
klikom na var.
Preimenuj unaprijed postavljen naziv varijable x u ploca te pritisni tipku Enter. Za dodavanje nove
biblioteke klikni na +add new action, event, …

7. 6
Odaberi ikonu librabry
te u polju za pretraživanje upiši „game“ i odaberi pripadajuću bibilioteku.
Nakon odabira biblioteke game otvorit će se prozor prikazan idućom slikom. Za nastavak uređivanja koda
klikni na main u polju code.

8. 7
Za nastavak definiranja varijable ploca klikni na var ploca :=, potom klikni na game u donjem izborniku.
Želimo da varijabla ploca ima točne dimenzije (800x400 px), za što će nam poslužiti naredba start with fixed
size.
Potraži naredbu start with fixed size u donjem izborniku. Klikom na more ½ možeš prelistati sve trenutno
dostupne naredbe. Ukoliko ne pronađeš ono što je potrebno, u polju Search s lijeve strane možeš potražiti
dodatne naredbe i funkcije.
U polje Search upiši start with fixed size te lijevim klikom odaberi pripadajuću naredbu.
Kada to učiniš tvoja linija koda izgledat će ovako:

9. 8
Kako bi unijeli odgovarajuće dimenzije koristit ćemo gumb move cursor i brojeve iz izbornika.
U idućem koraku želimo pokrenuti igricu. Kako bi to učinili moramo pozvati biblioteku game. Želimo da se
prilikom pokretanja igre na zaslonu ispiše crveni tekst „Priprema, pozor…SAD!“ na sivoj podlozi.
Za dodavanje nove linije koda klikni na plusić na odgovarajućem mjestu. Ako želiš dodati novu liniju koda
nakon postojećeg retka klikni na plus koji se nalaz ispod tog retka.
U novom retku iz donjeg izbornika ponovno odaberi biblioteku game, a zatim iz pronađi naredbu splash text.
Jedanput lijevom tipkom miša klikni na tekst „Get Ready!“ tako da tekst „pozeleni“ te potom klikni na gumb
Edit.

10. 9
Nakon toga unesi željeni tekst i klikni na kvačicu s desne strane.
Kako bi se ovaj tekst zadržao na zaslonu 3 sekunde prije početka igre, potrebno je promijeniti broj 0 (koji se
nalazi iza napisanog teksta) u 3. To možeš učiniti klikom miša iza broja 0, pritiskom gumba Backspace i broja
3.
Nakon toga slijedi postavljanje boje teksta te postavljanje boje podloge. Jedanput klikni lijevom tipkom miša
na random iza colors, nakon toga na tipku backspace.

11. 10
Iz ponuđenih boja u donjem izborniku odaberi red.
Ponovi prethodne korake za promjenu boje pozadine teksta (lijevi klik na random, iza drugog coloros,
backspace, light gray).
Na kraju se nalazi parametar done, koji zapravo poziva funkciju done() unutar koje je igra zapravo
isprogramirana. Tu funkciju je potrebno detaljno definirati.
2. Programiranje igre
Za početak uređivanja funkcije done() klikni unutar te funkcije na „do nothing“.

12. 11
U prvom koraku postavit ćemo broj života u igrici na 1. Iz donjeg izbornika pozovi biblioteku game, a
zatim pronađi naredbu set life.
Promijeni unaprijed zadan broj života iz 0 u 1, uporabom gumba backspace i broja 1 iz numeričkog dijela
izbornika.
Sada ćemo postaviti pozadinu igrice. Dodaj novu liniju koda klikom na plus ispod postojeće linije koda. Iz
donjeg izbornika ponovno pozovi biblioteku game, potom pronađi naredbu set background scene. U polju
Search potraži „art“ te na rezultat klikni lijevim mišem, a zatim ponovno potraži „city background“ te klikom
odaberi željenu sliku.

13. 12
Nakon toga želimo dodati robota Jozu Skakača na ploču. U novom retku klikom na gumb var dodaj novu
varijablu koju nazovi robot (ili Jozo) zatim stisni tipku Enter. Potom iz donjeg izbornika odaberi varijablu ploca.
Sada potraži naredbu create picture, kako bi se Jozo stvorio na ploči.
U idućem koraku potrebno je odabrati kako će Jezo izgledati. To možeš učiniti klikom na art u donjem
izborniku, a zatim u polju Search potraži „robot“ te klikom odaberi željenog Jozu.

14. 13
Jozi je potrebno dodijeliti odgovarajuća svojstva. Prvo ćemo odredit Jozin položaj na ploči. Iz donjeg
izbornika odaberi varijablu robot te mu dodaj svojstvo set pos.
Ploča je dimenzija 800x400 px, a u zadatku je rečeno da Jozo leti na sredini ekrana. Kako bismo ovo napravili,
moramo koristiti koordinatni sustav. U TouchDevelopu ishodište koordinatnog sustava je u gornjem lijevom
kutu. Pozitivna x-koordinata se nalazi desno od ishodišta, dok je pozitivna y-koordinata ispod ishodišta. Na
idućoj slici je prikazano ishodiše koordinatnog sustava te pripadajuće osi. Sredina ploče ima koordinate (400,
200).

15. 14
Naredba set position (x, y) nakon pozivanja u naprijed postavlja Jozu u ishodište koordinatnog sustava. Ovo je
potrebno promijeniti uporabom gumba backspace, move cursor i upisivanjem odgovarajućih vrijednosti
(400, 200).
Za postavljanje veličine Joze, iskoristiti ćemo naredbu set width. U novom retku ponovno pozovi varijablu
robot te mu pridjeli svojstvo set width (100).
Jozo ima određenu masu pa na njega djeluje ubrzanje sile teže 400 px/s2
. Dodaj novu liniju koda, pozovi
varijablu robot. U polju Search potraži i odaberi set acceleration y te mu dodijeli vrijednost 400.

16. 15
U ovom koraku potrebno je dodati interakciju između igrača i Joze. Klikom na zaslon trebamo dati Jozu
energiju kako bi on poletio prema gore. Kako bi to mogli učiniti moramo dodati novu biblioteku gamepad.
Dodaj novi redak, zatim klikni na gumb dismiss.
Novu biblioteku dodajmo na već poznat način. Klikom na add new action, event..., zatim odaberi library, te
potraži gamepad. Odaberi odgovarajuću biblioteku klikom na nju, a za nastavka uređivanja koda klikni na
funkciju main().
Klikni u „do nothing“ unutar koda, iz donjeg izbornika odaberi biblioteku gamepad, te iskoristi on button
pressed.

17. 16
Događaj „klik na zaslon“ je definiran u funkciji action koju je potrebno naknadno definirati. Dakle, klikom na
zaslon, želimo da Jozo poleti prema gore, stoga tu akciju moramo definirati u funkciji action(). To ćemo učiniti
na sljedeći način:
klik na „do nothing“ ispod where action() is, pozovi varijablu robot te iz potraži naredbu set speed y.
Unaprijed postavljena brzina po y-osi je 0. Klikom na zaslon želimo da se Jozo giba prema gore, odnosno
suprotno od pozitivne y-osi. Stoga promijenimo brzinu u vrijednost -200.

18. 17
Ovime smo završili definiranje funkcije action(). Stoga dodaj novi redak klikom na end, a zatim na plusić
ispod njega.
3. Definiranje prepreka
Sada želimo definirati prepreke s kojima će se Jozo susretati. Prvo ćemo dodati novu varijablu koja će definirati
razmak između prepreka: var, zatim upiši ime nove varijable, pritisni tipku enter i unesi razmak prepreka
:=200. Nakon toga dodaj novi red.
Prema Jozi leti pet različitih prepreka. Za to je potrebno svakoj prepreci dodijeli određen oblik (sliku). Svaka
od tih prepreka ima jednaku brzinu i veličinu. Prepreke se gibaju lijevo po x-osi, što će značiti da prepreke imaju
promjenjiv iznos x-koordinate u vremenu. Visina na kojoj se pojavljuje nova prepreka je slučajna (ali unutar
visine ploče) i ne mijenja se u vremenu. Dakle, prepreke u ovom slučaju imaju konstantan iznos y-koordinate
koja je odabrana slučajno.
Gotov dio koda za definiranje prepreka izgleda ovako:

19. 18
Prvo ćemo objasniti značenje pojedinih linija koda, a zatim ćemo ih dodati korak po korak u naš program.
Petlja for će generirati potreban broj prepreka (5) na ploči sa svojstvima koje zadamo unutar te petlje. Dakle
petlja for se izvršava sve dok se na zaslonu ne pojavi pet prepreka, a zatim još jednom svaki puta kada jedna
prepreka izađe iz ekrana.
U ovom slučaju oblik petlje for je: for 0 ≤ i ≤ 4. Što znači da je početna vrijednost brojača i=0, a u svakom
novom koraku raste za +1 dok ne postigne vrijednost i=4. Stoga će brojač i poprimiti pet vrijednosti: 0, 1, 2, 3
i 4. U svakom koraku petlja for izvršava set naredbi opisanih u nastavku.
For prvo kreira novu varijablu prepreka na ploči i dodjeljuje joj sliku iz funkcije odaberi sliku.
Funkcija odaberi sliku je definirana izvan funkcije main(), a izgleda ovako:
Iz prethodnog koda funkcije odaberi sliku() vidljivo je kako ta funkcija vraća vrijednost slika koja ima tip slike.
Unutar te funkcije izvršava se petlja do. Unutar koje se varijabli broj dodjeljuje slučajna vrijednost od 0 do 4.
Setom naredbi if i else if se provjerava koju vrijednost je poprimila varijabla broj te se za svaki od mogućih
slučajeva varijabli slika dodjeljuje određen oblik prepreke koji se potom prosljeđuje glavnoj funkciji main().
Napomena: Funkcija može vraćati neku vrijednost (varijablu), koja u tom slučaju mora imati ime te definiran tip varijable. U
TouchDevleopu postoji 8 tipova varijabli:
Number (broj),
Sprite (svojstva, npr. set pos, set speed y…),
String (slova, tekst), Bord (ploča),
Board (ploča)
Nothing (bez vrijednosti),
Boolean (vraća vrijedsnot 0 ili 1),
Picture (slika),
Sprite Set (dodaj, oduzmi, prebroji…).

20. 19
Vratimo se sada na početni kod, u petlju for. Nakon što je odabrana slika to svojstvo je pridodano varijabli
prepreka. Nakon toga je potrebno definirati ostala svojstva te prepreke kako je prikazano gornjom slikom.
Krenimo u izradu prepreka. U novom retku dodaj petlju for.
Potom je potrebno definirati parametre te petlje. Početna vrijednost brojača i je unaprijed zadana i iznosi 0,
stoge je potrebno samo unijeti njegovu krajnju vrijednost (i=4).
Klikom u „do nothing“ ispod petlje for prelazimo u definiranje naredbi te petlje. Za početak ćemo dodati novu
varijablu klikom na gumb var, te ćemo je nazvati prepreka. Nakon pritiska tipke Enter, iskoristit ćemo varijablu
ploca na kojoj se ta prepreka treba pojaviti. To ćemo napraviti pozivanjem naredbe create picture. Slika
prepreke će se generirati u novoj funkciji odaberi sliku(), a da bi pozvali tu funkciju odabrat ćemo gumb code
iz donjeg izbornika.

21. 20
Nakon toga potrebno je izraditi novu funkciju odaberi sliku(). Klikni na dismiss, potom na add new action,
event… te odaberi action.
Kako bi započeli s uređivanjem novo dodane funkcije klikni na do stuff, zatim preimenuj funkciju u
odaberi sliku i klikni na add output parameter. Nakon toga jednom klikni na Number i iz donjeg izbornika
odaberi Picture, a zatim na rename. i preimenuj varijablu u slika.

22. 21
Sada je na redu pisanje slučajeva. Nakon klika u „do nothing“, stvorit ćemo novu varijablu broj kojoj ćemo
pridijeliti funkciju math i matematički operator random. Definirat ćemo raspon pojavljivanja slučajnih brojeva
do 5.
Dodaj novu liniju koda, zatim pozovi naredbu if , pozovi varijablu broj – te ju izjednači s nulom (= 0).

23. 22
Nakon toga pređi u definiranje seta naredbi koji se izvršava u slučaju ispunjenja uvjeta, klikom na „do nothing“
koji se nalazi ispod. Ovdje želimo varijabli slika dodijeliti sliku magneta za ovaj slučaj (broj=0). Iz donjeg
izbornika odaberi varijablu slika odaberi operator :=, zatim klikni na art i u polju Search potraži „magnet“.
Nakon toga klikni na „else do nothing“ koji se nalazi ispod kako bi kreirali drugi slučaj. Nakon toga ponovno
odaberi if. I ponovi prethodni postupak za slučaj broj=1, uz dodavanje nove slike („tomato“). Postupak je
prikazan slikama ispod.

24. 23
Ponovi ovaj postupak još dva puta uz dodavanje slike „droid“ (klik na else (do nothing) – if – broj = 2 – slika -
:= – art – Search – droid) i „flying saucer“ (klik na else (do nothing) – if – broj = 3 – slika - := – art – Search –
flying saucer).
U zadnjem slučaju dovoljno je kliknuti na else zatim varijabli slika pridijeliti zadnju sliku „storm cloud“.
Nakon što smo dodali sve slike, vraćamo se početni kod pritiskom na gumb dismiss, a zatim na funkciju main().
Vrtimo se gdje smo stali, nakon naredbe create picture pozvali smo izvršavanje nove funkcije (code) koju sada
moramo dodijeliti. Klikni unutar koda na roza trokutić kada se u donjem izborniku pojavi mogućnost odabira
funkcije klikni na funkciju odaberi sliku.

25. 24
Dodaj novu liniju koda u kojoj ćemo varijabli prepreka postaviti brzinu x (prepreka – Search „set speed x“ –
backspace – -100)
Na isti način, prateći upute ispod, postavi veličinu prepreke, njezine koordinate x i y te što se događa s
preprekom tijekom izvođenja jednog prozora (engl. frame)
Nova linija koda – prepreka – Search „set height“ – backspace – 100

26. 25
Nova linija koda – prepreka – more ½ s– set x – backspace – (ploca – width -100+i*razmak prepreka)

27. 26
Nova linija koda – prepreka – more 1/2 – set y – backspace – math – Search „random range“ –
random range (50, 350)
Nova linija koda – prepreka – Search „on every frame perform“. Ova naredba je u naprijed zadana tako da
prilikom pokretanja novog prozora (frame) pokreće punkciju perform().

28. 27
Sada je potrebno definirati što će činiti funkcija perform() u svakom frameu.
4. Izvršavanje igrice
Za dodavanje setova naredbi unutar funkcije perform() klikni na „do nothing“ ispod where perform() is. za
početak ćemo definirati što se događa s igricom kada jedna od prepreka izađe lijevo s ploče. Za to nam je
potreban uvjet if gdje ćemo provjeriti x-koordinatu varijable prepreka.
U novu liniju koda dodamo naredbu if, zatim iz donjeg izbornika odaberemo varijablu prepreka i svojstvo x
te unesemo uvjet izvršavanja (x<0) ove nardebe.
Nakon toga slijedi blok naredbi koji će se izvršiti kada je ovaj uvjet istinit, a to je: postavi novu prepreku
na desnom kraju ploče, na slučajnoj visini te joj predjeli slučajnu sliku veličine 100 px te dodaj 1 bod u igrici.
U idućim slikama prikazane su upute za dodavanje gore opisani naredbi. Klikni u „do nothing“ nakon then te
pozovi varijablu prepreka i postavi joj koordinatu x (set x) u dužinu ploče (backspace – width).

29. 28
Za postavljanje slučajne koordinate y napravit ćemo sljedeće (novi redak – prepreka – set y – backspace – math
– random range (50, 350))

30. 29
Odabir slike pomoću funkcije odaberi sliku() (novi redak –prepreka – Search „set picture“ – code – odaberi
sliku)
Varijabli prerepeka promjeni veličinu u 100 px (novi redak –prepreka – set height (100)).

31. 30
Dodavanje boda u igri napravit ćemo u sljedećim koracima dodavanje novog reda – game – more ½ -
add score(1).
Ako uvjet x<0 nije ispunjen, znači da se prepreka i dalje nalazi na ploči, stoga nisu potrebne nikakve dodatne
akcije. Da bismo izašli iz provjeravanj uvjeta kliknemo na else do nothing, a potom na strelicu.

32. 31
Igrica traje sve dok se robot ne zabije u neku od prepreka ili ne izađe iz ploče. Dok smo još u petlji for koja
stvara prepreke, moramo provjeriti je li se robot zabio u prepreku. To možemo učiniti kako je opisano u
nastavku: if – prepreka – Search „overlaps wih“(Boolean) – backspace – robot
Ako se prepreka i robot preklapaju (dotaknu), naredba overlaps with je istinita i vraća vrijednost 1 i u tom
slučaju treba oduzeti život u igrici: klik na „do nothing“ – game – more ½ - remove life.

33. 32
Zadnji korak u kreiranju igrice je provjera pozicije Joze na ploči
5. Provjera pozicije Joze
Izađemo iz petlje za kreiranje prepreka na način da kliknemo na end for te pritiskom na gumb + dodamo novu
liniju koda. Provjera pozicije Joze se vrši unutar funkcije done().
Jozo se uvijek leti gore-dolje po sredini ploče, što znači da ima konstantu koordinatu x, dok koordinatu y
reguliramo pritiskom na ploču. Dakle, ako želimo provjeriti je li Jozo još uvijek na ploči potrebno je provjeriti
njegovu koordinatu y koja mora biti unutar visine ploče (0 do 400 px).
Na idućim slikama prikazano je kako to učiniti u našem programu. (robot – on every frame)
Kako provjeriti Jozinu trenutnu visinu?

34. 33
1. Provjera je li Jozo izašao s ploče prema dolje: klik u „do nothing“ unutar funkcije perform2() – if –
robot – more ½ – →y > ploca – height
2. Provjera je li Jozo izašao s ploče prema gore (u istom uvjetu): or – robot – →y < 0

35. 34
Ako je uvjet istinit, Jozo se nalazi izvan ploče i potrebno je oduzeti život igraču na način: klik u „do nothing“
ispod naredbe if – game – remove life.
Ako uvjet nije ispunjen, Jozo se nalazi na ploči i igrica se nastavlja.
ČESTITAMO! Isprogramirali smo cijelu igricu. Ne moraš se brinuti, ona se sprema automatski i sada je preostalo
samo pokrenuti igricu. Klikom na gumb run. Ako ti zatreba gotovu igricu možeš pronaći i ovdje:
http://tdev.ly/ywwn.

36. 35
Za one koji žele znat više! Posjeti web stranicu http://aka.ms/how2customize i ondje prouči kako naginjati
Jozu dok leti, mu dodati goriva u spremnik i slično.