{"id":437,"date":"2023-04-19T10:37:15","date_gmt":"2023-04-19T10:37:15","guid":{"rendered":"https:\/\/tarkvara.thkit.ee\/veeb\/?page_id=437"},"modified":"2023-05-09T16:47:43","modified_gmt":"2023-05-09T16:47:43","slug":"ruudu-kutsumine-hiirega","status":"publish","type":"page","link":"https:\/\/tarkvara.thkit.ee\/veeb\/ruudu-kutsumine-hiirega\/","title":{"rendered":"Ruudu kutsumine hiirega"},"content":{"rendered":"\n

Nuppudega saab lehel toimetada k\u00fcll. M\u00f5nikord aga animatsioonide ja m\u00e4ngude juures m\u00f5istlik, kui \u00f5nnestub otse lehel olles kujundeid juhatada. Siinjuures aitavad samamoodi hiirevajutused nagu \u00f5pikus eespool kirjeldatud. V\u00e4ike hoiatus: kui lehte vaadata mobiiliekraanil, siis seal tavalised hiires\u00fcndmused ei toimi, sest mobiil p\u00fc\u00fcab korraga mitut n\u00e4ppu j\u00e4lgida ning selle tarbeks on loodud touch-event. Aga sellest edasipidi. Tahvli k\u00fcljes olevale onmousedown-s\u00fcndmuse k\u00fclge sidusime funktsiooni hiirAlla, mille
parameetrina tulnud e-ks nimetatud v\u00e4\u00e4rtuse kaudu saab k\u00e4tte hiire andmed. Arvutus e.clientXtahvlikoht.left annab hiire x-koordinaadi v\u00e4\u00e4rtuse tahvli asukoha suhtes. See p\u00fc\u00fcti praegu muutujasse nimega hx (hiire x). Praegusel juhul otsustatakse hiire j\u00e4rgi, et kas ruut peaks liikuma vasakule v\u00f5i paremale. Kui hiire x-koordinaadi v\u00e4\u00e4rtus on suurem, kui ruudu x-koordinaadi v\u00e4\u00e4rtus, siis asub hiir ruudust paremal ning j\u00e4relikult peaks ruut liikuma paremale, kui soovime, et ta hiire poole tuleks. Ehk siis ruudu liikumise sammuks saab koodi algul m\u00e4rgitud kiirus (mis hetkel positiivse v\u00e4\u00e4rtusega). Kui hiir sattus ruudust vasakule, siis sammuks saab kiiruse vastandarv, ehk siis ruut hakkab liikuma vasakule.<\/p>\n\n\n

\nfunction hiirAlla(e){\n var tahvlikoht=t.getBoundingClientRect();\n var hx=e.clientX-tahvlikoht.left;\n if(hx>x){samm=kiirus;}\n else{samm=-kiirus;}\n }\n\n<\/pre><\/div>\n\n\n
Edasi kood tervikuna.<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Liikumine<\/title>\n <script>\n var x=100, laius=50;\n var kiirus=2, samm=-kiirus;\n var t, g; \/\/tahvel, graafiline kontekst\n\n function algus(){\n t=document.getElementById("tahvel");\n g=t.getContext("2d");\n setInterval('liigu()', 100);\n }\n function joonista(){\n g.clearRect(0, 0, t.width, t.height);\n g.fillRect(x, 20, laius, 50);\n }\n function kasSees(uusX){\n if(uusX<0){return false;}\n if(uusX+laius>t.width){return false;}\n return true;\n }\n function liigu(){\n if(kasSees(x+samm)){\n x=x+samm;\n } else {\n seis();\n }\n joonista();\n }\n function hiirAlla(e){\n var tahvlikoht=t.getBoundingClientRect();\n var hx=e.clientX-tahvlikoht.left;\n if(hx>x){samm=kiirus;}\n else{samm=-kiirus;}\n }\n function seis(){\n samm=0;\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"\n onmousedown="hiirAlla(event)"><\/canvas><br \/>\n <\/body>\n<\/html>\n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Liikumiskiiruse m\u00e4\u00e4ramine hiirega<\/strong><\/p>\n\n\n\n
Eelmises n\u00e4ites lihtsalt vaadati, kuidas ruutu hiire poole meelitada. Arvestades aga kaugust hiirest, saab n\u00f5nda m\u00e4\u00e4rata ruudu liikumise kiiruse. Olgu siis nii, et l\u00e4hemale vajutus t\u00f5mbab\/l\u00fckkab tugevamini, v\u00f5i kehtib sama kaugema vajutuse kohta. \u00dcheks mooduseks oleks \u00f6elda, et uueks ruudu liikumise sammuks saab kaugus hiire ja ruudu vahel (samm=hx-x). Sellisel puhul aga oleks ruut esimese sammuga juba hiire juures, teise sammuga sama palju m\u00f6\u00f6das. Ning v\u00e4hegi suurema sammude tiheduse ehk kaadrisageduse ja pikema sammu korral juba ekraanilt v\u00e4ljas. Sammu v\u00f5ib veidi v\u00e4iksemas v\u00f5tta seda nulli ja \u00fche vahel oleva kiiruskoefitsiendiga korrutades. N\u00e4iteks, kui see kordaja on 0,1 (arvutikoodis vaja koma asemel punkt kirjutada), siis kui hiir vajutatakse ruudust 30 punkti kaugusele, saab tegelikuks sammu pikkuseks kolm punkti, mida on silmaga juba suhteliselt sujuv vaadata.<\/p>\n\n\n
\n samm=(hx-x)*kiiruskoef;\n\n<\/pre><\/div>\n\n\n
Muu j\u00e4\u00e4b \u00fcllatuslikult samaks, aga kiiruse muutmise paindlikkus on m\u00e4rgatavalt suurem.<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Liikumine<\/title>\n <script>\n var x=100, laius=50;\n var kiirus=2, samm=-kiirus;\n var kiiruskoef=0.1;\n var t, g; \/\/tahvel, graafiline kontekst\n\n function algus(){\n t=document.getElementById("tahvel");\n g=t.getContext("2d");\n setInterval('liigu()', 100);\n }\n function joonista(){\n g.clearRect(0, 0, t.width, t.height);\n g.fillRect(x, 20, laius, 50);\n }\n function kasSees(uusX){\n if(uusX<0){return false;}\n if(uusX+laius>t.width){return false;}\n return true;\n }\n function liigu(){\n if(kasSees(x+samm)){\n x=x+samm;\n } else {\n seis();\n }\n joonista();\n }\n function hiirAlla(e){\n var tahvlikoht=t.getBoundingClientRect();\n var hx=e.clientX-tahvlikoht.left;\n samm=(hx-x)*kiiruskoef;\n }\n function seis(){\n samm=0;\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"\n onmousedown="hiirAlla(event)"><\/canvas><br \/>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Nuppudega saab lehel toimetada k\u00fcll. M\u00f5nikord aga animatsioonide ja m\u00e4ngude juures m\u00f5istlik, kui \u00f5nnestub otse lehel olles kujundeid juhatada. Siinjuures aitavad samamoodi hiirevajutused nagu \u00f5pikus eespool kirjeldatud. V\u00e4ike hoiatus: kui lehte vaadata mobiiliekraanil, siis seal tavalised hiires\u00fcndmused ei toimi, sest mobiil p\u00fc\u00fcab korraga mitut n\u00e4ppu j\u00e4lgida ning selle tarbeks on loodud touch-event. Aga sellest edasipidi. … Loe edasi Ruudu kutsumine hiirega<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-437","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":9,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/437\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}