Funktion zur Erstellung von Koordinaten auf der Canvas hinzugefügt

schlangen_und_leitern/HTML.html

@@ -27,6 +27,7 @@
 
 
     <div calss = container id="playArea" >    
+        <canvas id= "canvas"></canvas>
             <table id = "board"></table>
         <div class = container id="würfelBereich" style="display: none;" >
             <img src="/img/wurfle/f(1).png" id="face">

schlangen_und_leitern/js/Bridge.js

@@ -23,8 +23,13 @@ function init(playerCount){
     document.getElementById("rollButton").addEventListener("click", function(){gameloop(boardArr,playerArray, playerCount);});
     
     playerInit(playerArray);
-    drawCanavas()
-    drawLine()
+    
+    
+    
+    ////////experiemnt
+    var canvasPointArr= [];
+    canvasPointGen(canvasPointArr);
+    drawCanavas();
 }
 
 function gameloop (boardArr, playerArray, playerCount){

schlangen_und_leitern/js/makeBoard.js

@@ -106,20 +106,52 @@ function drawCanavas(){
     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
+}
 
+//canvas point objects
+function canvasPoint () {
+    this.cellNumber
+    this.x
+    this.y
 }
 
+function canvasPointGen(canvasPointArr){
+
+    //get canvas size
+    var canvas = document.getElementById("canvas");
+    //get induvidual cell sizes
+    cellSize = (canvas.width/10)
+    halfCell = (cellSize/2)
+    //starting position for both axises 
+    xTracker = halfCell
+    yTracker = halfCell
+    //tracker for cell count
+    let count = 100 
+
+//for each cell create a point at its center
+    for(let y = 0; y < 10; y++){
+        for(let x = 0; x < 10; x++ ){
+            //create new cell point obj
+            let newPoint = new canvasPoint()
+            //set new objects variables
+            newPoint.cellNumber = count
+            newPoint.x = xTracker
+            newPoint.y = yTracker
+            canvasPointArr.push(newPoint)
+            //advance x and count
+            xTracker += cellSize
+            count--
+        }
 
+        yTracker += cellSize
+        }
+    }
 
 
 //function that draws a line using x,y cooridinates of two points