{"id":422,"date":"2023-04-19T10:32:00","date_gmt":"2023-04-19T10:32:00","guid":{"rendered":"https:\/\/tarkvara.thkit.ee\/veeb\/?page_id=422"},"modified":"2023-05-09T16:46:38","modified_gmt":"2023-05-09T16:46:38","slug":"seiskumine-vasakus-servas","status":"publish","type":"page","link":"https:\/\/tarkvara.thkit.ee\/veeb\/seiskumine-vasakus-servas\/","title":{"rendered":"Seiskumine vasakus servas"},"content":{"rendered":"\n

N\u00f5nda j\u00e4rjest liikudes on ruut k\u00fcllalt varsti ekraanilt l\u00e4inud. Ise pidevalt juhtides saab usinasti liikumist s\u00e4ttida. Kui aga tegemist hiljem rakendusega, kus korraga enam kujundeid liikumas, siis ei saa k\u00f5igil pidevalt k\u00e4sitsi silma peal pidada ja kontrollida, et kuidas keegi k\u00e4itub. Kontrollimiseks sobib tingimuslause nimega if. Praegusel juhul, kui ruut liigub liiga vasakule ehk x l\u00e4heb negatiivseks, siis paras aeg \u00f6elda, et ta seisma j\u00e4\u00e4ks. Ning kasulik on ruudule m\u00e4rkida ka, et ta serva juurde tagasi tuleks (x-i v\u00e4\u00e4rtuseks arv 0).<\/p>\n\n\n

\nif(x<0){seis(); x=0;}\n\n<\/pre><\/div>\n\n\n
Siis p\u00e4\u00e4seb ruut n\u00e4iteks paremale suunava nupu vajutamisel taas liikuma. Muidu tekiks imelik olukord, kus pole v\u00f5imalik ka \u00fcle \u00e4\u00e4re sattununa sealt tagasi minna, sest nullist v\u00e4iksema iksi puhul antakse kohe seiskumisk\u00e4sklus.<\/p>\n\n\n
\n<!doctype html>\n<html>\n <head>\n <title>Liikumine<\/title>\n <script>\n var x=100, kiirus=2, samm=-kiirus;\n function joonista(){\n var t=document.getElementById("tahvel");\n var g=t.getContext("2d");\n g.clearRect(0, 0, t.width, t.height);\n g.fillRect(x, 20, 50, 50);\n }\n function liigu(){\n if(x<0){seis(); x=0;}\n x=x+samm;\n joonista();\n }\n function vasakule(){\n samm=-kiirus;\n }\n function seis(){\n samm=0;\n }\n function paremale(){\n samm=kiirus;\n }\n <\/script>\n <\/head>\n <body onload="setInterval('liigu()', 100)">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"><\/canvas><br \/>\n <input type="button" value="&lt;-" onclick="vasakule()" \/>\n <input type="button" value="x" onclick="seis()" \/>\n <input type="button" value="-&gt;" onclick="paremale()" \/>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
\n
Proovi j\u00e4rgi<\/a><\/div>\n<\/div>\n\n\n\n
Seesp\u00fcsimise kontroll<\/strong><\/p>\n\n\n\n
Vasaku ja \u00fclemise serva tabamise kontroll on suhteliselt lihtne v\u00e4hemasti ruudu puhul. Kuna ruut joonistatakse vasaku \u00fclemise nurga koordinaatide j\u00e4rgi, siis juhul, kui need on nullist v\u00e4iksemad, siis j\u00e4relikult ollakse servast \u00fcle l\u00e4inud. Parema ja alumise poolega on veidi rohkem arvutamist. Parema serva koordinaadi saab k\u00e4tte liites vasaku serva koordinaadile ruudu laiuse. Kui n\u00fc\u00fcd selle parema serva koordinaadi v\u00e4\u00e4rtus \u00fcletab tahvli laiust ehk tahvli parema serva koordinaadi v\u00e4\u00e4rtust, sellisel juhul on ruut sealtpoolt \u00fcle l\u00e4inud. Iseenesest on v\u00f5imalik n\u00f5nda tingimusi s\u00e4ttides ruudu seiskamist t\u00e4iesti kontrollida. Arvestades aga tulevikku ning v\u00f5imalust, et kontrollitavaid kujundeid tuleb rohkem, siis mitmek\u00fclgsema kontrolli tarbeks on hea teha omaette funktsioon. N\u00e4iteks selline:<\/p>\n\n\n
\nfunction kasSees(uusX){\n if(uusX<0){return false;}\n if(uusX+laius>t.width){return false;}\n return true;\n }\n\n<\/pre><\/div>\n\n\n
Funktsiooni nimeks on kasSees – nagu nimest aimata v\u00f5ib, siis sealt vastatakse kas jah v\u00f5i ei. Ehk siis true v\u00f5i false. Selle j\u00e4rgi siis v\u00f5imalik hiljem otsustada kuidas k\u00e4ituda – kui ruudu uuritav asukoht on tahvli sees, v\u00f5ib sinna julgelt asuda. Kui mitte, ei tasu sinna ronida. Funktsiooni \u00fcmarsulgude sees olev uusX t\u00e4hendab, et funktsioonile etteantav v\u00e4\u00e4rtus nimetatakse funktsiooni sees kasutamiseks uusX-i nime alla ning sealtkaudu saab tema sisu pruukida. Edasi juba j\u00e4rgnevad kontrollid ja vastused.<\/p>\n\n\n
\nif(uusX<0){return false;}\n\n<\/pre><\/div>\n\n\n
teatab, et kui etteantud parameetri (uusX) v\u00e4\u00e4rtus on v\u00e4iksem kui null, siis funktsioon tagastab (return) false, ehk siis ruut pole tervikuna tahvli sees. Sama lugu parema serva kontrolliga.
Muutujas t meil eelnevalt tahvli andmed olemas. Seega siis avaldis<\/p>\n\n\n
\nuusX+laius>t.width\n\n<\/pre><\/div>\n\n\n
kontrollib, et kas ruudu parema serva koordinaadi v\u00e4\u00e4rtus (uusX+laius) \u00fcletab tahvli laiust
(t.width). Kui m\u00f5lemad kontrollid edukalt l\u00e4bitud, siis j\u00e4relikult ruut x-telge pidi alas sees ning funktsioon v\u00f5ib tagastada v\u00e4\u00e4rtuse, et on sees k\u00fcll (return true). Liikumisfunktsioonis saab eelneva kontrolli tulemust kasutada.<\/p>\n\n\n
\n if(kasSees(x+samm)){\n x=x+samm;\n } else {\n seis();\n }\n\n<\/pre><\/div>\n\n\n
Esimene lause siis vaatab, et kui ruudu eeldatav uus asukoht (x+samm) on tahvli sees, siis minnakse sinna uude kohta kohale (x=x+samm). Muul juhul j\u00e4\u00e4dakse seima (seis())<\/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 vasakule(){\n samm=-kiirus;\n }\n function seis(){\n samm=0;\n }\n function paremale(){\n samm=kiirus;\n }\n <\/script>\n <\/head>\n <body onload="algus()">\n <canvas id="tahvel" width="300" height="200"\n style="background-color:yellow"><\/canvas><br \/>\n <input type="button" value="&lt;-" onclick="vasakule()" \/>\n <input type="button" value="x" onclick="seis()" \/>\n <input type="button" value="-&gt;" onclick="paremale()" \/>\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","protected":false},"excerpt":{"rendered":"
N\u00f5nda j\u00e4rjest liikudes on ruut k\u00fcllalt varsti ekraanilt l\u00e4inud. Ise pidevalt juhtides saab usinasti liikumist s\u00e4ttida. Kui aga tegemist hiljem rakendusega, kus korraga enam kujundeid liikumas, siis ei saa k\u00f5igil pidevalt k\u00e4sitsi silma peal pidada ja kontrollida, et kuidas keegi k\u00e4itub. Kontrollimiseks sobib tingimuslause nimega if. Praegusel juhul, kui ruut liigub liiga vasakule ehk x … Loe edasi Seiskumine vasakus servas<\/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-422","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/422","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=422"}],"version-history":[{"count":18,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/422\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/pages\/422\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/tarkvara.thkit.ee\/veeb\/wp-json\/wp\/v2\/media?parent=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}