Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Následující verze | Předchozí verze | ||
krouzek:auticko_objekty [2021/04/14 15:28] – vytvořeno admin | krouzek:auticko_objekty [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1 | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
+ | === Úkoly === | ||
+ | * Omezte auto parkovištěm: | ||
+ | * Náraz do stěny zastaví auto, zastavené auto lze pak otočit a rozjet zpět, případně vycouvat | ||
+ | * Stěnu parkoviště lze překročit, | ||
+ | * Po nárazu do stěny auto nějakým způsobem odskočí, případně [[https:// | ||
+ | |||
+ | === Další téma === | ||
+ | Vytvoříme si více objektů na parkovišti - například kuželky. Použijeme objekty (třídy - class) a můžeme si jich tak vytvořit kolik budeme chtít. | ||
+ | |||
+ | === Verze na začátku === | ||
<code html> | <code html> | ||
Řádek 137: | Řádek 147: | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | === Verze s kuželkami === | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | html, body {padding: 0; margin:0} | ||
+ | #parkoviste { | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | #auticko{ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | left: 250px; | ||
+ | top: 250px; | ||
+ | } | ||
+ | |||
+ | .kuzelka{ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | left: 250px; | ||
+ | top: 250px; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | | ||
+ | </ | ||
+ | <button onclick=" | ||
+ | |||
+ | |||
+ | < | ||
+ | /* < | ||
+ | /* Sem prijde javascript kod */ | ||
+ | var autickoX = 250 | ||
+ | var autickoY = 250 | ||
+ | var autickoRychlost = 1 | ||
+ | var autickoUhel = 0 //ve stupnich | ||
+ | var autickoStisknutoDoleva = false | ||
+ | var autickoStisknutoDoprava = false | ||
+ | var autickoStisknutoNahoru = false | ||
+ | var autickoStisknutoDolu = false | ||
+ | var autickoStisknutoBrzda = false | ||
+ | |||
+ | |||
+ | function otocSe(smer){ | ||
+ | | ||
+ | | ||
+ | } else { | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function stiskKlavesy(udalost){ | ||
+ | if (udalost.code == " | ||
+ | autickoStisknutoDoleva = true | ||
+ | } else if (udalost.code == " | ||
+ | autickoStisknutoDoprava = true | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoNahoru = true | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoDolu = true | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoBrzda = true | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function odtiskKlavesy(udalost){ | ||
+ | if (udalost.code == " | ||
+ | autickoStisknutoDoleva = false | ||
+ | } else if (udalost.code == " | ||
+ | autickoStisknutoDoprava = false | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoNahoru = false | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoDolu = false | ||
+ | }else if (udalost.code == " | ||
+ | autickoStisknutoBrzda = false | ||
+ | } | ||
+ | } | ||
+ | document.body.addEventListener(" | ||
+ | document.body.addEventListener(" | ||
+ | |||
+ | function pohniSe(){ | ||
+ | |||
+ | // ovlivnovani klavesami | ||
+ | | ||
+ | | ||
+ | } | ||
+ | | ||
+ | | ||
+ | } | ||
+ | | ||
+ | | ||
+ | } | ||
+ | | ||
+ | | ||
+ | } | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | | ||
+ | autickoRychlost += 0.5 | ||
+ | | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | | ||
+ | | ||
+ | // | ||
+ | |||
+ | if (autickoX > 1100){ | ||
+ | | ||
+ | } | ||
+ | if (autickoX < 0){ | ||
+ | | ||
+ | } | ||
+ | if (autickoY > 750){ | ||
+ | | ||
+ | | ||
+ | } | ||
+ | if (autickoY < 0){ | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | // aktualizuj kuzelky | ||
+ | for (var i=0; | ||
+ | | ||
+ | | ||
+ | kuzelky[i].element.style.left = kuzelky[i].x + " | ||
+ | kuzelky[i].element.style.top = kuzelky[i].y +" | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | setInterval(pohniSe, | ||
+ | |||
+ | // pole objektu kuzelek | ||
+ | var kuzelky = [] | ||
+ | for(var i=0; | ||
+ | var kuzelkaData = { | ||
+ | x: | ||
+ | y: | ||
+ | } | ||
+ | var kuzelka = document.createElement(" | ||
+ | kuzelka.className = " | ||
+ | kuzelka.style.left = kuzelkaData.x + " | ||
+ | kuzelka.style.top = kuzelkaData.y +" | ||
+ | document.getElementById(" | ||
+ | kuzelkaData[' | ||
+ | kuzelky.push(kuzelkaData) | ||
+ | } | ||
+ | |||
+ | /* ]]> */ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
</ | </ |