Mängu loomine Javaskriptiga (Silveri mängumootor)

Täna katsetame ühe mängu loomist ja vaatame veidi Javascripti koodi! Tegemist on GAG 11. klassi õpilase Silver Shnuri loodud programmiga, mida meie täiendame, et luua selle baasil oma mängu.

Mäng ise on näiteks selline: https://googledrive.com/host/0B6sVCcP1hKyCZFFWaTFka0lmak0/template.html

Selleks, et sellist mängu teha tuleb:
1. Otsida internetist üks pilt, mille peal olevate objektide kohta saate küsimusi esitada. Pildi pikem külg võiks olla kuni 800 pikslit.
2. Loo endale kas arvuti töölauale või parem oma võrgukettale kaust nimega "mang".
3. Salvesta pilt sellesse kausta. Muuda pildi nimi võimalikult lühikeseks ja ühesõnaliseks! Kindlasti pööra tähelepanu, mis tüüpi failiga on tegemist (jpg või png).
4. Nüüd ava link ja lae sealt alla kõik kaustas olevad failid.
https://docs.google.com/a/gag.ee/file/d/0BzdCsKohbshOdGZXZVpOaElrNXM/edit?pli=1

5. Salvesta need failid kõik samasse kausta, kus on ka sinu pildifail.
Kaustas peavad nüüd olema lisaks pildile sellised failid:

6. Nüüd otsi oma arvutist üles programm nimega Notepad (see peaks olema Start -> My Computer -> Accessories all) ja ava see. Ava Notepad'iga fail creator.html (selleks klõpsa File -> Open ja otsi üles kaust, kus see fail on ning siis selle sees olev fail).

Sulle avaneb mängu html kood, ole selle muutmisega ettevaatlik ja muudatusi tehes tähelepanelik!
7. Leia koodis üles joonisel näidatud koht ja kirjuta sinna jutumärkide vahele oma pildi nimi. Pilt peab kindlasti olema samas kaustas, kus creator.html fail ning sinna koodi sisse tuleb kirjutada pildi nimi koos faililaiendiga (see on tähelühend, mis asub peale punkti pildi nime taga).
8. Salvesta fail ja sulge.
9. Mine kausta, kuhu faili salvestasid ning klõpsa failil creator.html paremat hiireklahvi. Vali rippmenüüst "Open with" ja edasi mõni veebilehitseja, näiteks Google Chrome.

10. Ava fail veebilehitsejas.
11. Nüüd tuleb pildil olevate objektidega siduda küsimused. Hiljem, mängu mängides, kuvatakse vastajale küsimus ning tema peab pildil õiges kohas klõpsama.
Küsimuste sisestamiseks klõpsa pildil ning sisesta paremale tekkinud kastikesse küsimus või nimetus, mida mängija peab pildilt leidma.

12. Kui oled küsimuse sisestanud, siis märkad, et paremale ilmub tekst. Sisesta ära kõik küsimused, mida soovid küsida.
13. Ava nüüd Notepad programmiga fail template.html
14. Kopeeri pildi kõrvale tekkinud tekstiread. Ole tähelepanelik, et selekteeriksid välja AINULT need read, mitte kogu ekraanitäit!

 

 

15. Mine Notepadiga avatud template.html faili juurde ning kleebi see kood pildil näidatud kohale! Kirjuta koodi sisse ka mängu pealkiri (vt pilti) ning lisa pildi nimi (vt pilti).

16. Salvesta template.html fail ning sulge.
17. Ava fail template.html veebilehitsejaga (samamoodi, nagu avasid faili creator.html punktis 9.
18. Mängi mängu!

Juhend mängu loomiseks: http://www.scribd.com/doc/210459425/Silveri-mangu-loomine


Algallikas: https://www.smore.com/9c8q


Mängu avaldamine: http://www.scribd.com/doc/210469421/Silveri-mangu-avaldamine-GoogleDrive