Dodanie ruchu po koniczynie

Lekcja_03/index.html

@@ -6,13 +6,90 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lekcja 3</title>
     <style>
+        * {
+            box-sizing: border-box;
+        }
         textarea {
             resize: none;
         }
+        .widok {
+            width: 440px;
+            height: 440px;
+            position: relative;
+            border: 1px solid black;
+        }
+        .wskaznik {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: orange;
+            border: 3px solid black;
+            border-radius: 100%;
+
+            top: 100px;
+            left: 100px;
+        }
     </style>
 </head>
 
 <body>
+    <h2>4</h2>
+    <div class="widok">
+        <div class="wskaznik"></div>
+    </div>
+    <script>
+        const wskaznik = document.getElementsByClassName("wskaznik")[0];
+        let y = parseInt(wskaznik.style.top)
+        let x = parseInt(wskaznik.style.left)
+
+        let tryb = 0
+        let licznik_goradol = 100
+        let licznik_lewoprawo = 150
+
+        setInterval(function() {
+            let rad = 0
+            let offset_x = 0
+            let offset_y = 0
+            switch(tryb) {
+                case 0:
+                    offset_x = 100
+                    offset_y = 0
+                    licznik_goradol++
+                    rad = licznik_goradol * (Math.PI/100)
+                    if (licznik_goradol % 100 == 0) { tryb++ }
+                    break
+                case 1:
+                    offset_x = 200
+                    offset_y = 100
+                    licznik_lewoprawo++
+                    rad = licznik_lewoprawo * (Math.PI/100)
+                    if (licznik_lewoprawo % 100 == 50) { tryb++ }
+                    break
+                case 2:
+                    offset_x = 100
+                    offset_y = 200
+                    licznik_goradol++
+                    rad = licznik_goradol * (Math.PI/100)
+                    if (licznik_goradol % 100 == 0) { tryb++ }
+                    break
+                case 3:
+                    offset_x = 0
+                    offset_y = 100
+                    licznik_lewoprawo++
+                    rad = licznik_lewoprawo * (Math.PI/100)
+                    if (licznik_lewoprawo % 100 == 50) { tryb = 0 }
+                    break
+            }
+
+            y = (Math.sin(rad) + 1) * 100 + offset_y
+            x = (Math.cos(rad) + 1) * 100 + offset_x
+
+            wskaznik.style.top = `${y}px`
+            wskaznik.style.left = `${x}px`
+        }, 25)
+    </script>
+
+    <hr>
     <h2>2</h2>
     <input style="font-family: monospace;" type="text" name="whata" id="frika" size="42">
     <script>