Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // 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, 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: 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: 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;
- });
- })();
- // Function to generate a number from 1-6
- function rollDice() {
- var playerRoll = document.querySelector(".player-roll");
- var roll = 2 /*Math.floor(Math.random() * 6) + 1;*/
- playerRoll.innerHTML = "You rolled a " + roll + ".";
- return roll;
- };
- // Move bead based on roll
- // ...code
- var currentPosition = 0; // starting positon
- var button = document.getElementById("dice");
- var playerTurnContainer = document.querySelector(".player-turn");
- var playerTurn = null;
- var player1 = localStorage.getItem("player1");
- var player2 = localStorage.getItem("player2");
- var bead = document.querySelector(".bead1");
- playerTurnContainer.innerHTML = player1;
- // Display bead based on chosen players
- player1Img = document.querySelector(".bead1");
- 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";
- function beadPosition() {
- if(bead == document.querySelector(".bead1")) {
- 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';
- }
- };
- function moveBead(amount) {
- // Set current position
- if (currentPosition + amount >= tiles.length) {
- // not enough tiles left, go to last
- currentPosition = tiles.length - 1;
- } else {
- currentPosition += amount;
- }
- beadPosition();
- // If on last, win!
- if (currentPosition === tiles.length - 1) {
- setTimeout(() => alert('You win!'), 1); // Temporary
- 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
- // 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";
- }
- };
- button.addEventListener("click", (e) => {
- var roll = rollDice();
- console.log("roll " + roll);
- moveBead(roll);
- console.log("Position " + currentPosition);
- // TRAPS
- var trapContainer = document.querySelector(".message-trap");
- var trapInfo = document.querySelector(".text-trap");
- var trapInstructions = document.querySelector(".instruction");
- var trapH3 = document.querySelector(".message-trap h3");
- trapContainer.style.display = "none";
- if(roll == 6) { // If player rolls a 6 they get another roll and skip any traps
- 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";
- return;
- } else {
- // Switch player. Set bead to player2
- /*
- // Attempt at switching players turn
- if(playerTurnContainer.innerHTML == player2) {
- playerTurnContainer.innerHTML = player1;
- playerTurn = player1;
- var bead = player1Img;
- } else if(playerTurnContainer.innerHTML == player1) {
- playerTurnContainer.innerHTML = player2;
- playerTurn = player2;
- var bead = player2Img;
- } */
- } // I think traps needs to go in here too somehow?
- // Traps go into esle statement if 6 is rolled conditonal - to avoid the traps
- // If bead lands on yellow tile, activate trap
- if(tiles[currentPosition].data == undefined){
- trapContainer.style.display = "none";
- } else if(tiles[currentPosition].data.type == "TRAP") {
- // Display trap message and instructions if bead has landed on a trap
- trapContainer.style.display = "block";
- trapInfo.innerHTML = tiles[currentPosition].data.text;
- trapInstructions.innerHTML = tiles[currentPosition].data.instruction;
- }
- });
- var trapOkBtn = document.querySelector(".accept-trap");
- trapOkBtn.addEventListener("click", (e) => {
- if(tiles[currentPosition].data.move == "BACKWARDS") {
- var backwards = tiles[currentPosition].data.steps;
- currentPosition -= backwards;
- beadPosition();
- } else if(tiles[currentPosition].data.move == "FORWARDS") {
- var forwards = tiles[currentPosition].data.steps;
- currentPosition += forwards;
- beadPosition();
- } else if(tiles[currentPosition].data.move == "GAMBLE") {
- // Wait for current player to roll again;
- var roll = rollDice();
- if((roll == 2) || (roll == 4) || (roll == 6)) {
- if (currentPosition + roll >= tiles.length) {
- // not enough tiles left, go to last
- currentPosition = tiles.length - 1;
- } else {
- currentPosition += roll;
- }
- beadPosition();
- } else {
- if (currentPosition + roll >= tiles.length) {
- // not enough tiles left, go to last
- currentPosition = tiles.length - 1;
- } else {
- currentPosition -= roll;
- }
- beadPosition();
- }
- } else if(tiles[currentPosition].data.move == "ROLLHIGH") {
- var roll = rollDice(); // Wait for user to roll
- if(roll >= 3) {
- currentPosition = tiles.length - 1;
- beadPosition();
- setTimeout(() => alert('You win!'), 1);
- // 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";
- } else {
- var backwards = tiles[currentPosition].data.steps;
- currentPosition -= roll;
- beadPosition();
- }
- }
- }); // Event listener to process traps
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement