start of circle logic

quickdraw-game.html

@@ -20,7 +20,7 @@
                 height: 20px;
                 width: 20px;
                 background-color: red;
-                position: relative;
+                position: absolute;
             }
             #frame {
                 width: 75%;
@@ -59,7 +59,19 @@
                 console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
             });
 
-            generateTarget();
+            let k, r, x, y;
+            let radians;
+            for (let i = 0; i < 360; i++) {
+              r = frameWidth / 2;
+
+              radians = degreesToRadians(i);
+
+              x = r * Math.cos(i);
+              y = r * Math.sin(i);
+              console.log(x + ', ' + y);
+
+              generateTarget(x, y);
+            }
 
             // init logs:
             console.log('page: ' + pageWidth + ' x ' + pageHeight);
@@ -68,14 +80,17 @@
 
             
 
+            function degreesToRadians(degrees) {
+              return degrees * (Math.PI / 180)
+            }
             
             
-            function generateTarget() {
+            function generateTarget(x, y) {
                 const target = document.createElement("div");
                 target.id = "target";
-                target.style.top = getRandomInt(0, frameHeight) + 'px';
-                target.style.left = getRandomInt(0, frameWidth) + 'px';
-                console.log(target);
+                target.style.top = y +'px';
+                target.style.left = x + 'px';
+                // console.log(target);
                 document.getElementById("frame").insertAdjacentElement("afterbegin", target);
             }
 
@@ -87,4 +102,4 @@
             }
         </script>
     </body>
-</html>
+</html>