View difference between Paste ID: 16prQRaR and 7DTRJarq

 // Canvas board game
 // Global variables
 var ctx = null;
 var tileW = 100, tileH = 100;
 var mapW = 10, mapH = 10;
 
 var tileMap = [
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 2, 1, 3, 1, 2, 1, 0, 0,
-    0, 0, 1, 2, 1, 2, 3, 2, 0, 0,
+    0, 0, 1, 2, 1, 2, 1, 3, 0, 0,
     0, 0, 2, 1, 3, 1, 2, 1, 0, 0,
     0, 0, 1, 2, 1, 2, 1, 2, 0, 0,
     0, 0, 3, 1, 2, 1, 3, 1, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 ];
 
 // Left andright positions of beads, traps and text
 var tiles = [
     {left: 220, bottom: 715},
     {left: 320, bottom: 715},
     {left: 420, bottom: 715, data: {type: "TRAP", move: "BACKWARDS", steps: 1, instruction: "Move back 1 step.", text: "A camp of evil thieves lays ahead of you, they are too many to confront and you decide to walk around them."}},
     {left: 520, bottom: 715},
     {left: 620, bottom: 715},
     {left: 720, bottom: 715},
-    {left: 720, bottom: 615},
+    {left: 720, bottom: 615, data: {type: "TRAP", move: "FORWARDS", steps: 3, instruction: "Move forwards 3 steps.", text: "A friendly looking dragon is ahead of you and you decide to hitch a ride."}},
-    {left: 620, bottom: 615, data: {type: "TRAP", move: "FORWARDS", steps: 3, instruction: "Move forwards 3 steps.", text: "A friendly looking dragon is ahead of you and you decide to hitch a ride."}},
+    {left: 620, bottom: 615},
     {left: 520, bottom: 615},
     {left: 420, bottom: 615},
     {left: 320, bottom: 615},
     {left: 220, bottom: 615},
     {left: 220, bottom: 515},
     {left: 320, bottom: 515},
     {left: 420, bottom: 515, data: {type: 'TRAP', move: "GAMBLE", instruction: "Roll 2, 4 or 6 to move forward or roll 1, 3 and 5 to move backwards.", text: "You are robbed of your travel supplies and continuing the journey may be dangerous. You decide to gamble on continuing the journey(roll: 2, 4, 6) or go back to get new supplies(roll: 1, 3, 5)."}},
     {left: 520, bottom: 515},
     {left: 620, bottom: 515},
     {left: 720, bottom: 515},
     {left: 720, bottom: 415},
     {left: 620, bottom: 415},
     {left: 520, bottom: 415},
     {left: 420, bottom: 415},
     {left: 320, bottom: 415},
     {left: 220, bottom: 415},
     {left: 220, bottom: 315, data: {type: 'TRAP', move: "BACKWARDS", steps: 3, instruction: "Move backwards 3 steps.", text: "A group of nightwalkers see you an you have to run!"}},
     {left: 320, bottom: 315},
     {left: 420, bottom: 315},
     {left: 520, bottom: 315},
     {left: 620, bottom: 315, data: {type: 'TRAP', move: "ROLLHIGH" , steps: 1, instruction: "Roll a 3 or above to win or move backwards 1 step.", text: "A war is being faught and you have to assist."}},
     {left: 720, bottom: 315}
 ];
 
 // Draw canvas when window has loaded
 window.onload = function() {
     ctx = document.querySelector(".canvas").getContext("2d");
     this.requestAnimationFrame(drawGame);
     ctx.font = 'bold 16px "Open Sans", sans-serif';
 };
 
 function drawGame() {
     if(ctx == null) {
         alert("Your browser does not support HTML canvas. Upgrade it to play the game.");
         return;
     }
 
     for(var y = 0; y < mapH; y++) {
 		for(var x = 0; x < mapW; x++) {
 
 			switch(tileMap[((y*mapW)+x)]) {
 				case 1:
 					ctx.fillStyle = "#FFFFFF";
                     break;
                 case 2:
                     ctx.fillStyle = "#5A6C7A";
                     break;
                 case 3:
 				    ctx.fillStyle = "#D3A52F";
 					break;
 				default:
 					ctx.fillStyle = "#FFFFFF";
 			}
 			ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
         }
     }
 
     // Draw board border
     ctx.beginPath();
     ctx.rect(200, 100, 600, 500);
     ctx.lineWidth = "2";
     ctx.strokeStyle = "#5A6C7A";
     ctx.stroke();
 
     // Draw board seperation lines
     ctx.beginPath();
     ctx.moveTo(200, 204);
     ctx.lineTo(700, 204);
 
     ctx.moveTo(300, 304);
     ctx.lineTo(800, 304);
 
     ctx.moveTo(200, 404);
     ctx.lineTo(700, 404);
 
     ctx.moveTo(300, 504);
     ctx.lineTo(800, 504);
 
     ctx.lineWidth = "8";
     ctx.strokeStyle = "#000000";
     ctx.stroke();
 
     // Draw images
     var throneImg = new Image();
     var warningImg = new Image();
 
     throneImg.onload = function (){
         ctx.drawImage(throneImg, 640, 620);
 
         ctx.drawImage(warningImg, 427, 125);
         ctx.drawImage(warningImg, 627, 225);
         ctx.drawImage(warningImg, 427, 325);
         ctx.drawImage(warningImg, 627, 525);
         ctx.drawImage(warningImg, 227, 525);
     }
     throneImg.src = "images/iron_throne_small.png";
     warningImg.src = "images/warning.png";
 
     // Draw text
     ctx.fillStyle = "#000000";
     ctx.fillText("GOAL", 727, 525);
     ctx.fillText("Who can reach the Iron Throne first?", 300, 700);
     ctx.fillText("Watch out for the yellow tiles, danger may be lurking!", 200, 70);
     ctx.fillText("If you roll a 6, you can roll again to avoid them!", 200, 90);
 
     ctx.fillStyle = "#FFFFFF";
     ctx.fillText("START", 223, 120);
 };
 
 // Function to spin dice on click
 (function(){
     var div = document.querySelector('.dice-container');
     var dice = document.querySelector('#dice');
     var open = false;
 
     div.addEventListener('click', function(){
       if(open){
         dice.className = 'icon-dice';
       } else{
         dice.className = 'icon-dice rotate';
       }
       open = !open;
     });
 })();
 
-var first = true;
+
 function rollDice() {
     var playerRoll = document.querySelector(".player-roll");
     var roll = Math.floor(Math.random() * 6) + 1;
-    var roll = first ? 14 : Math.floor(Math.random() * 6) + 1;
+
-    first = false;
+
     return roll;
 };
 
 // Move bead based on roll
 // ...code
 class Player{
     constructor(index, left_offset)
-var currentPosition = 0; // starting positon
+
         this.name = localStorage.getItem("player" + index);
         this.image = document.querySelector(".bead" + index);
         this.currentPosition = 0; // starting positon
         this.left_offset = left_offset;
-var playerTurn = null;
+        this.gambling = false;
-var player1 = localStorage.getItem("player1");
+        this.rollHigh = false;
-var player2 = localStorage.getItem("player2");
+        this.lastRoll = 0;
-var bead = document.querySelector(".bead1");
+
-playerTurnContainer.innerHTML = player1;
+        if (this.image !== undefined)
         {
-// Display bead based on chosen players
+            var playerFN = this.name.split(' ', 1)[0];
-player1Img = document.querySelector(".bead1");
+            this.image.src = "images/" + playerFN + "_small.png";
-player2Img = document.querySelector(".bead2");
+
-var player1FN = player1.split(' ', 1)[0];
+
-var player2FN = player2.split(' ', 1)[0];
+}
-player1Img.src = "images/" + player1FN + "_small.png";
+
-player2Img.src = "images/" + player2FN + "_small.png";
+var players = [
-var gambling = false;
+    new Player(1, 0.0),
     new Player(2, 30.0)
-function beadPosition() {
+
-    if(bead == document.querySelector(".bead1")) {
+var currentPlayerIndex = 0;
-        bead.style.left = tiles[currentPosition].left + 'px';
+
-        bead.style.bottom = tiles[currentPosition].bottom + 'px';
+
-    } else if(bead == document.querySelector(".bead2")){
+
-        bead.style.left = tiles[currentPosition].left + 30 + 'px';
+
-        bead.style.bottom = tiles[currentPosition].bottom + 'px';
+playerTurnContainer.innerHTML = players[0].name;
 
 function updateBeadPosition() {
     var currentPosition = players[currentPlayerIndex].currentPosition;
     var leftOffset = players[currentPlayerIndex].left_offset;
     var bead = players[currentPlayerIndex].image;
-    if (currentPosition + amount >= tiles.length) {
+
-        // not enough tiles left, go to last
+    bead.style.left = (tiles[currentPosition].left + leftOffset) + 'px';
-        currentPosition = tiles.length - 1;
+    bead.style.bottom = tiles[currentPosition].bottom + 'px';
-    } else {
+
-        currentPosition += amount;
+
 function moveBead(amount) {
     // Set current position
-    beadPosition();
+    var currentPosition = players[currentPlayerIndex].currentPosition;
     currentPosition += amount;
     if (currentPosition < 0) currentPosition = 0;
     if (currentPosition >= tiles.length) currentPosition = tiles.length - 1;
     players[currentPlayerIndex].currentPosition = currentPosition;
 
     updateBeadPosition();
-        if(bead == player2) {
+
-            var playerTurn = player2;
+
-        } else {
+
-            var playerTurn = player1;
+
-        } // Where to place this
+
 
         // localStorage.removeItem("player1");
         // localStorage.removeItem("player2");
-        localStorage.setItem("winner", playerTurn); // Add winner to local storage for finale page
+        localStorage.setItem("winner", currentPlayerIndex); // Add winner to local storage for finale page
         // Disabled for testing: When a bead lands on the last tile go to window.location = "file:///F:/School_Noroff/2019_Year2_Semester1/2020-01-27_Semester-Project2_Lisa-Ingemann/WF/Web/finale.html";
     }
 };
 
 function swapPlayer() {
     currentPlayerIndex = (currentPlayerIndex == 0) ? 1 : 0;
     playerTurnContainer.innerHTML = players[currentPlayerIndex].name;
 }
 
 button.addEventListener("click", (e) => {
     var roll = rollDice();
     players[currentPlayerIndex].lastRoll = roll;
     console.log("roll " + roll);
 
     // TRAPS
     var trapInfo = document.querySelector(".text-trap");
     var trapInstructions = document.querySelector(".instruction");
-    if (gambling)
+
 
     trapContainer.style.display = "none";
 
     var desiredMove = roll;
     if (players[currentPlayerIndex].gambling)
-        gambling = false;
+
         if ((roll % 2) == 1)
-    // Switch player. Set bead to player2
+
             desiredMove = -roll;
-    /*
+
-    // Attempt at switching players turn
+        players[currentPlayerIndex].gambling = false;
-    if(playerTurnContainer.innerHTML == player2) {
+
-        playerTurnContainer.innerHTML = player1;
+    else if (players[currentPlayerIndex].rollHigh)
-        playerTurn = player1;
+
-        var bead = player1Img;
+        if (roll <= 3)
-    } else if(playerTurnContainer.innerHTML == player1) {
+
-        playerTurnContainer.innerHTML = player2;
+            roll = -roll;
-        playerTurn = player2;
+
-        var bead = player2Img;
+        players[currentPlayerIndex].rollHigh = false;
-    } */
+
-    console.log("Old Position " + currentPosition);
+
     console.log("Old Position " + players[currentPlayerIndex].currentPosition);
-    console.log("New Position " + currentPosition);
+
     console.log("New Position " + players[currentPlayerIndex].currentPosition);
-    if(roll != 6)
+
     if(desiredMove != 6)
     {
         // Traps go into esle statement if 6 is rolled conditonal - to avoid the traps
-        if(tiles[currentPosition].data == undefined){
+
         if(tiles[players[currentPlayerIndex].currentPosition].data == undefined){
-        } else if(tiles[currentPosition].data.type == "TRAP") {
+
             swapPlayer();
 
-            trapInfo.innerHTML = tiles[currentPosition].data.text;
+        } else if(tiles[players[currentPlayerIndex].currentPosition].data.type == "TRAP") {
-            trapInstructions.innerHTML = tiles[currentPosition].data.instruction;
+
             trapContainer.style.display = "block";
             trapInfo.innerHTML = tiles[players[currentPlayerIndex].currentPosition].data.text;
             trapInstructions.innerHTML = tiles[players[currentPlayerIndex].currentPosition].data.instruction;
             dice.style.display = "none";
         }
     }
     else
     {
         dice.style.display = "none";
         trapInfo.innerHTML = "You rolled a 6 and skip any traps and get to roll again.";
         trapInstructions.innerHTML = "Roll again.";
         trapH3.innerHTML = "You Rolled a 6";
         trapContainer.style.display = "block";
-    if(tiles[currentPosition].data.move == "BACKWARDS") {
+    }
-        var backwards = tiles[currentPosition].data.steps;
+
 
-        currentPosition -= backwards;
+
 trapOkBtn.addEventListener("click", (e) => {
-        beadPosition();
+    var currentPosition = players[currentPlayerIndex].currentPosition;
     if (players[currentPlayerIndex].lastRoll !== 6)
-    } else if(tiles[currentPosition].data.move == "FORWARDS") {
+
-        var forwards = tiles[currentPosition].data.steps;
+        var isTrap = tiles[currentPosition] !== undefined && tiles[currentPosition].data !== undefined;
         if (isTrap)
-        currentPosition += forwards;
+
             if(tiles[currentPosition].data.move == "BACKWARDS") {
-        beadPosition();
+                var backwards = tiles[currentPosition].data.steps;
                 moveBead(-backwards);
-    } else if(tiles[currentPosition].data.move == "GAMBLE") {
+            } else if(tiles[currentPosition].data.move == "FORWARDS") {
-        // Wait for current player to roll again;
+                var forwards = tiles[currentPosition].data.steps;
-        gambling = true;
+                moveBead(forwards)
-    } else if(tiles[currentPosition].data.move == "ROLLHIGH") {
+            } else if(tiles[currentPosition].data.move == "GAMBLE") {
-        var roll = rollDice(); // Wait for user to roll
+                // Wait for current player to roll again;
-        if(roll >= 3) {
+                players[currentPlayerIndex].gambling = true;
-            currentPosition = tiles.length - 1;
+            } else if(tiles[currentPosition].data.move == "ROLLHIGH") {
                 players[currentPlayerIndex].rollHigh = true;
-            beadPosition();
+            }
-            setTimeout(() => alert('You win!'), 1);
+
-
+        swapPlayer();
-            // localStorage.removeItem("player1");
+
-            // localStorage.removeItem("player2");
+
-            localStorage.setItem("winner", playerTurn); // Set the bead that won. Help
+
-            // When a bead lands on the last tile go to window.location = "file:///F:/School_Noroff/2019_Year2_Semester1/2020-01-27_Semester-Project2_Lisa-Ingemann/WF/Web/finale.html";
+    dice.style.display = "block";
-
+