Funktion hinzugefügt, um Schlangen und Leitern auf dem Spielbrett zu zeichnen

schlangen_und_leitern/js/Bridge.js

@@ -28,8 +28,13 @@ function init(playerCount){
     
     ////////experiemnt
     var canvasPointArr= [];
-    canvasPointGen(canvasPointArr);
     drawCanavas();
+    canvasPointGen(canvasPointArr);
+    createBoardObjects(canvasPointArr, objectArr)
+
+
+
+
 }
 
 function gameloop (boardArr, playerArray, playerCount){

schlangen_und_leitern/js/makeBoard.js

@@ -116,7 +116,7 @@ function drawCanavas(){
 
 //canvas point objects
 function canvasPoint () {
-    this.cellNumber
+    this.cell
     this.x
     this.y
 }
@@ -126,63 +126,140 @@ function canvasPointGen(canvasPointArr){
     //get canvas size
     var canvas = document.getElementById("canvas");
     //get induvidual cell sizes
-    cellSize = (canvas.width/10)
-    halfCell = (cellSize/2)
+    canvasWidth = canvas.width
+    cellSize = canvas.width/10
+
+    halfCell = cellSize/2
     //starting position for both axises 
-    xTracker = halfCell
     yTracker = halfCell
     //tracker for cell count
     let count = 100 
     
+    //flip to account for direction change
+    let direction = true // 0 is left to right, 1 is right to left
+
     //for each cell create a point at its center
     for(let y = 0; y < 10; y++){
+
+        if (direction == true){
+            var xTracker = halfCell
+            
             for(let x = 0; x < 10; x++ ){
                 //create new cell point obj
                 let newPoint = new canvasPoint()
                 //set new objects variables
-            newPoint.cellNumber = count
+                newPoint.cell = count
                 newPoint.x = xTracker
                 newPoint.y = yTracker
+                console.log("new point"+ newPoint.cell, newPoint.x, newPoint.y)
                 canvasPointArr.push(newPoint)
                 //advance x and count
                 xTracker += cellSize
+                //toggle direction
+                count--
+            }
+        }
+        else if (direction == false){
+            var xTracker = (canvasWidth - halfCell)
+            for(let x = 10; x > 0; x--){
+                //create new cell point obj
+                let newPoint = new canvasPoint()
+                //set new objects variables
+                newPoint.cell = count
+                newPoint.x = xTracker
+                newPoint.y = yTracker
+                console.log("new point"+ newPoint.cell, newPoint.x, newPoint.y)
+                canvasPointArr.push(newPoint)
+                //advance x and count
+                xTracker -= cellSize
+                //toggle direction
                 count--
             }
+        }
 
         yTracker += cellSize
+        if (direction == true){
+            direction = false
+        }
+        else if (direction == false){
+            direction = true
         }
     }
     
     
+}
+
+
+
 //function that draws a line using x,y cooridinates of two points
-function drawLine(startPosX, startPosY, endPosX, endPoseY){
+function drawLine(type, startPosX, startPosY, endPosX, endPosY){
 
     var c = document.getElementById("canvas");
     var ctx = c.getContext("2d");
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(537, 537);
+    ctx.moveTo(startPosX, startPosY);
+    ctx.lineTo(endPosX, endPosY);
     ctx.stroke();
+    ctx.lineWidth = 10;
+    switch (type) {
+        case "l":
+            ctx.strokeStyle = '#0FD71D';
+            break;
+    
+        case "s":
+            ctx.strokeStyle = '#E21317';
+            break;
+        default:
+    }
     ctx.strokeStyle;
 
 }
 
-function boardObjects(){
+function createBoardObjects(canvasPointArr, objectArray){
+    //loop through all object in the object array 
+        for(let i = 0; i < objectArray.length; i++){
 
+            let startCell = objectArray[i].start
+            let endCell = objectArray[i].end
             
+            let startPointX;
+            let startPointY;
+            let endPointX;
+            let endPointY;
 
+                //find cell points on canvas
+            for(let j = 0; j < canvasPointArr.length; j++){
                
 
+            if(canvasPointArr[j].cell == startCell){
+                    startPointX = canvasPointArr[j].x;
+                    startPointY =canvasPointArr[j].y
+                    console.log("start found")        
+            }
 
+            else if(canvasPointArr[j].cell == endCell){
+                endPointX = canvasPointArr[j].x;
+                endPointY =canvasPointArr[j].y
                 
+                console.log(endPointX, endPointX)        
                 }
 
 
 
 
+            drawLine(objectArray[i].type,startPointX, startPointY, endPointX, endPointY)
+
+
 
             
 
+    }
+          
+
+
+}
+
+}