Funktion zum Zeichnen von Linien für die Schlangen und Leitern erstellt

schlangen_und_leitern/js/makeBoard.js

@@ -66,13 +66,19 @@ function boardObject(){
     this.start;
     this.end;
 }
+
+
 //leiter Objekte(anfang , ende)
 let leitern = [[7, 33],[24, 44],[31, 55],[60, 77]];
 //schlange Objekte (anfang , ende) 
 let schlangen = [[99, 56], [86, 64],[60, 28],[18,1]];
+
+
+
 //fullen des Objekts array
 function generateBoardObjects (leitern, schlangen, objectArray){
 
+    
     for(let i = 0; i < leitern.length; i++){
         let leiter = new boardObject;   
         leiter.type = "l"; 
@@ -88,8 +94,32 @@ function generateBoardObjects (leitern, schlangen, objectArray){
         schlange.end = schlangen[i][1];
         objectArray.push(schlange);
     }
-
 } 
+//function that draws a line using x,y cooridinates of two points
+function drawLine(type, count, ax,ay, bx, by){
+        if(ay>by)
+        {
+            bx=ax+bx;  
+            ax=bx-ax;
+            bx=bx-ax;
+            by=ay+by;  
+            ay=by-ay;  
+            by=by-ay;
+        }
+        var calc=Math.atan((ay-by)/(bx-ax));
+        calc=calc*180/Math.PI;
+        var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+        console.log(length)
+        
+        
+        let newLine = document.createElement("div") 
+        newLine.id = type + count;
+        
+        let style = "height:" + length + "px;width:5px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;"
+        
+        newLine.style.cssText = style;
+        document.getElementById("board").appendChild(newLine);
+    }