Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:auticko_objekty [2021/04/14 15:48] – admin
+++ krouzek:auticko_objekty [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 8: / Řádek 8: @@
 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.
-=== Aktuální verze ===
+=== Verze na začátku ===
 <code html>
@@ Řádek 147: / Řádek 147: @@
 </html>
+</code>
+=== Verze s kuželkami ===
+<code html>
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="utf-8" />
+    <title>Auto</title>
+    <style>
+html, body {padding: 0; margin:0}
+#parkoviste {
+ width: 1200px;
+ height: 800px;
+ background-color: gray;
+ background-size: cover;
+ position: absolute;
+ overflow: hidden;
+}
+#auticko{
+ transform: rotate(152deg);
+ width: 100px;
+ height: 50px;
+ background-color: transparent;
+ background-size: cover;
+ background-image:url('auto.svg');
+ position: relative;
+ left: 250px;
+ top: 250px;
+}
+.kuzelka{
+ width: 10px;
+ height: 10px;
+ border-radius:50%;
+ background-color: orange;
+ position: relative;
+ left: 250px;
+ top: 250px;
+}
+</style>
+</head>
+<body>
+<div id="parkoviste">
+ 	<div id="auticko"></div>
+</div>
+<button onclick="otocSe()">Otoc se</button>
+<script>
+/* <![CDATA[ */
+/* 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){
+ if(smer){
+   autickoUhel += 1
+ } else {
+   autickoUhel -= 1
+ }
+}
+function stiskKlavesy(udalost){
+ if (udalost.code == "KeyA"){
+  autickoStisknutoDoleva = true
+ } else if (udalost.code == "KeyD"){
+  autickoStisknutoDoprava = true
+ }else if (udalost.code == "KeyW"){
+  autickoStisknutoNahoru = true
+ }else if (udalost.code == "KeyS"){
+  autickoStisknutoDolu = true
+ }else if (udalost.code == "KeyX"){
+  autickoStisknutoBrzda = true
+ }
+}
+function odtiskKlavesy(udalost){
+ if (udalost.code == "KeyA"){
+  autickoStisknutoDoleva = false
+ } else if (udalost.code == "KeyD"){
+  autickoStisknutoDoprava = false
+ }else if (udalost.code == "KeyW"){
+  autickoStisknutoNahoru = false
+ }else if (udalost.code == "KeyS"){
+  autickoStisknutoDolu = false
+ }else if (udalost.code == "KeyX"){
+  autickoStisknutoBrzda = false
+ }
+}
+document.body.addEventListener("keydown", stiskKlavesy);
+document.body.addEventListener("keyup", odtiskKlavesy);
+function pohniSe(){
+// ovlivnovani klavesami
+ if(autickoStisknutoDoleva){
+   otocSe(false)
+ }
+ if(autickoStisknutoDoprava){
+   otocSe(true)
+ }
+ if(autickoStisknutoNahoru){
+   autickoRychlost += 0.5
+ }
+ if(autickoStisknutoDolu){
+   autickoRychlost-=0.05
+ }
+ if(autickoStisknutoBrzda){
+   if(autickoRychlost > 0){
+     autickoRychlost-=0.5
+     if(autickoRychlost < 0){
+       autickoRychlost=0
+     }
+   }else{
+    autickoRychlost += 0.5
+     if(autickoRychlost > 0){
+       autickoRychlost=0
+     }
+   }
+ }
+ autickoX += Math.sin(((90-autickoUhel)/180)*Math.PI) * autickoRychlost
+ autickoY += Math.sin(((autickoUhel)/180)*Math.PI) * autickoRychlost
+ //console.log(autickoX + "," + autickoY)
+ if (autickoX > 1100){
+   autickoUhel = 180 - autickoUhel
+ }
+ if (autickoX < 0){
+   autickoUhel = 180 - autickoUhel
+ }
+ if (autickoY > 750){
+   autickoUhel = -autickoUhel
+   autickoY = 750
+ }
+ if (autickoY < 0){
+   autickoUhel = -autickoUhel
+   autickoY = 0
+ }
+ document.getElementById('auticko').style.transform = "rotate("+autickoUhel+"deg)"
+ document.getElementById('auticko').style.top = autickoY+"px"
+ document.getElementById('auticko').style.left = autickoX+"px"
+ // aktualizuj kuzelky
+ for (var i=0;i<kuzelky.length;i++){
+ 	kuzelky[i].x += Math.random()*10 - 5
+ 	kuzelky[i].y += Math.random()*10 - 5
+	kuzelky[i].element.style.left = kuzelky[i].x + "px"
+	kuzelky[i].element.style.top = kuzelky[i].y +"px"
+ }
+}
+setInterval(pohniSe, 1000 / 60)
+// pole objektu kuzelek
+var kuzelky = []
+for(var i=0;i<50;i++){
+	var kuzelkaData = {
+		x:(1200*Math.random()),
+		y:(800*Math.random())
+		}
+	var kuzelka = document.createElement("div")
+	kuzelka.className = "kuzelka"
+	kuzelka.style.left = kuzelkaData.x + "px"
+	kuzelka.style.top = kuzelkaData.y +"px"
+	document.getElementById("parkoviste").appendChild(kuzelka)
+	kuzelkaData['element'] = kuzelka
+	kuzelky.push(kuzelkaData)
+}
+/* ]]> */
+</script>
+</body>
+</html>
 </code>