JOZO SKAKAČ VS

TECHMEN

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“

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.

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“

4

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

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, …

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.

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:

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.

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.

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“.

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.

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.

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).

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.

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.

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.

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:

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…).

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.

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.

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).

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.

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.

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

25

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

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().

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).

28

Za postavljanje slučajne koordinate y napravit ćemo sljedeće (novi redak – prepreka – set y – backspace – math

– random range (50, 350))

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)).

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.

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.

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?

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

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.

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.