alte DrawLine-Funktion gelöscht und durch neue Canvas-Methode ersetzt

schlangen_und_leitern/css/style.css

@@ -49,8 +49,8 @@ width: auto;
 
 }
 .th, td{
-    width: 80px;
-    height: 80px;
+    width: 50px;
+    height: 50px;
     outline: 2px dashed black;
 }
 
@@ -81,4 +81,11 @@ width: auto;
     border-radius: 50%;
     background-color: rgb(255, 221, 0);
 
+}
+#canvas{
+z-index: 2;
+position: fixed;
+
+
+
 }

schlangen_und_leitern/js/Bridge.js

@@ -23,7 +23,8 @@ function init(playerCount){
     document.getElementById("rollButton").addEventListener("click", function(){gameloop(boardArr,playerArray, playerCount);});
     
     playerInit(playerArray);
-    
+    drawCanavas()
+    drawLine()
 }
 
 function gameloop (boardArr, playerArray, playerCount){
@@ -37,15 +38,26 @@ function gameloop (boardArr, playerArray, playerCount){
     //spieler newPosition mit roll Aktualisierung
     movePlayer(player, roll);
     //TODO checken ob die Spieler an eine leiter oder Schlange gelandet hat
+ 
+    //TODO prüfen ob jemand gewonnen hat und wenn ja spiele beenden // weiter spielen
+
+    //TODO checken ob die Spieler an eine leiter oder Schlange gelandet hat
+    
+    
+    //alter Stelle löschen
     eraseOLd(playerArray,turnCount);
     // setzen  newPostion auf position um und neuPosition leeren
     resetNewOld(player);
-    //TODO spieler Stelle auf dem Brett zeichnen 
+    //spieler Stelle auf dem Brett zeichnen 
     drawNew(playerArray,turnCount);
-    //TODO alter Stelle löschen
     
 
     //TODO prüfen ob jemand gewonnen hat und wenn ja spiele beenden // weiter spielen
+        // bei gewinn, zwei optionen anbieten; spiel wieter oder beenden 
+        //TODO verstekte new game taste der alles new setzt
+        //TODO falls spiel weiter, taste verstecken  und gewohnen spieler ignorieren (schware) 
+        
+    
 
     // Reihezähler inkrementieren bzw. zurücksetzen 
     if(turnCount >= playerCount){

schlangen_und_leitern/js/makeBoard.js

@@ -57,6 +57,11 @@ function drawBoard(arr){
             cell.innerHTML = (arr[y][x]);
            } 
     }
+    // add drawing of snakes and ladders
+
+
+
+
 }
       
 //spielbrett objekt Struktur 
@@ -95,32 +100,42 @@ function generateBoardObjects (leitern, schlangen, objectArray){
         objectArray.push(schlange);
     }
 } 
+//make a canvas the same size as the playbaord
+function drawCanavas(){
+    var ctx = document.getElementById("canvas");
+    var board = document.getElementById("board");
+    //get the tables measurements
+    tableMes = board.getBoundingClientRect()
+
+    tableWidth = tableMes.width;
+    tableHight = tableMes.height;
+    console.log(tableHight, tableWidth)
+    //set canavas to table size 
+    ctx.height = tableHight 
+    ctx.width = tableHight 
+    //divide canvas x and y by the number of rows // coloums 
+
+    //find center of each cell
+
+}
+
+
+
+
 //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);
-    }
+function drawLine(startPosX, startPosY, endPosX, endPoseY){
+
+    var c = document.getElementById("canvas");
+    var ctx = c.getContext("2d");
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(537, 537);
+    ctx.stroke();
+    ctx.strokeStyle;
+
+}
 
+function boardObjects(){
 
 
 
@@ -128,6 +143,10 @@ function drawLine(type, count, ax,ay, bx, by){
 
 
 
+}
+
+
+