SHOW:
|
|
- or go back to the newest paste.
1 | // Canvas board game | |
2 | // Global variables | |
3 | var ctx = null; | |
4 | var tileW = 100, tileH = 100; | |
5 | var mapW = 10, mapH = 10; | |
6 | ||
7 | var tileMap = [ | |
8 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
9 | 0, 0, 2, 1, 3, 1, 2, 1, 0, 0, | |
10 | - | 0, 0, 1, 2, 1, 2, 1, 3, 0, 0, |
10 | + | 0, 0, 1, 2, 1, 2, 3, 2, 0, 0, |
11 | 0, 0, 2, 1, 3, 1, 2, 1, 0, 0, | |
12 | 0, 0, 1, 2, 1, 2, 1, 2, 0, 0, | |
13 | 0, 0, 3, 1, 2, 1, 3, 1, 0, 0, | |
14 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
15 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
16 | 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, | |
17 | ]; | |
18 | ||
19 | // Left andright positions of beads, traps and text | |
20 | var tiles = [ | |
21 | {left: 220, bottom: 715}, | |
22 | {left: 320, bottom: 715}, | |
23 | {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."}}, | |
24 | {left: 520, bottom: 715}, | |
25 | {left: 620, bottom: 715}, | |
26 | {left: 720, bottom: 715}, | |
27 | - | {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."}}, |
27 | + | {left: 720, bottom: 615}, |
28 | - | {left: 620, bottom: 615}, |
28 | + | {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."}}, |
29 | {left: 520, bottom: 615}, | |
30 | {left: 420, bottom: 615}, | |
31 | {left: 320, bottom: 615}, | |
32 | {left: 220, bottom: 615}, | |
33 | {left: 220, bottom: 515}, | |
34 | {left: 320, bottom: 515}, | |
35 | {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)."}}, | |
36 | {left: 520, bottom: 515}, | |
37 | {left: 620, bottom: 515}, | |
38 | {left: 720, bottom: 515}, | |
39 | {left: 720, bottom: 415}, | |
40 | {left: 620, bottom: 415}, | |
41 | {left: 520, bottom: 415}, | |
42 | {left: 420, bottom: 415}, | |
43 | {left: 320, bottom: 415}, | |
44 | {left: 220, bottom: 415}, | |
45 | {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!"}}, | |
46 | {left: 320, bottom: 315}, | |
47 | {left: 420, bottom: 315}, | |
48 | {left: 520, bottom: 315}, | |
49 | {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."}}, | |
50 | {left: 720, bottom: 315} | |
51 | ]; | |
52 | ||
53 | // Draw canvas when window has loaded | |
54 | window.onload = function() { | |
55 | ctx = document.querySelector(".canvas").getContext("2d"); | |
56 | this.requestAnimationFrame(drawGame); | |
57 | ctx.font = 'bold 16px "Open Sans", sans-serif'; | |
58 | }; | |
59 | ||
60 | function drawGame() { | |
61 | if(ctx == null) { | |
62 | alert("Your browser does not support HTML canvas. Upgrade it to play the game."); | |
63 | return; | |
64 | } | |
65 | ||
66 | for(var y = 0; y < mapH; y++) { | |
67 | for(var x = 0; x < mapW; x++) { | |
68 | ||
69 | switch(tileMap[((y*mapW)+x)]) { | |
70 | case 1: | |
71 | ctx.fillStyle = "#FFFFFF"; | |
72 | break; | |
73 | case 2: | |
74 | ctx.fillStyle = "#5A6C7A"; | |
75 | break; | |
76 | case 3: | |
77 | ctx.fillStyle = "#D3A52F"; | |
78 | break; | |
79 | default: | |
80 | ctx.fillStyle = "#FFFFFF"; | |
81 | } | |
82 | ctx.fillRect(x*tileW, y*tileH, tileW, tileH); | |
83 | } | |
84 | } | |
85 | ||
86 | // Draw board border | |
87 | ctx.beginPath(); | |
88 | ctx.rect(200, 100, 600, 500); | |
89 | ctx.lineWidth = "2"; | |
90 | ctx.strokeStyle = "#5A6C7A"; | |
91 | ctx.stroke(); | |
92 | ||
93 | // Draw board seperation lines | |
94 | ctx.beginPath(); | |
95 | ctx.moveTo(200, 204); | |
96 | ctx.lineTo(700, 204); | |
97 | ||
98 | ctx.moveTo(300, 304); | |
99 | ctx.lineTo(800, 304); | |
100 | ||
101 | ctx.moveTo(200, 404); | |
102 | ctx.lineTo(700, 404); | |
103 | ||
104 | ctx.moveTo(300, 504); | |
105 | ctx.lineTo(800, 504); | |
106 | ||
107 | ctx.lineWidth = "8"; | |
108 | ctx.strokeStyle = "#000000"; | |
109 | ctx.stroke(); | |
110 | ||
111 | // Draw images | |
112 | var throneImg = new Image(); | |
113 | var warningImg = new Image(); | |
114 | ||
115 | throneImg.onload = function (){ | |
116 | ctx.drawImage(throneImg, 640, 620); | |
117 | ||
118 | ctx.drawImage(warningImg, 427, 125); | |
119 | ctx.drawImage(warningImg, 627, 225); | |
120 | ctx.drawImage(warningImg, 427, 325); | |
121 | ctx.drawImage(warningImg, 627, 525); | |
122 | ctx.drawImage(warningImg, 227, 525); | |
123 | } | |
124 | throneImg.src = "images/iron_throne_small.png"; | |
125 | warningImg.src = "images/warning.png"; | |
126 | ||
127 | // Draw text | |
128 | ctx.fillStyle = "#000000"; | |
129 | ctx.fillText("GOAL", 727, 525); | |
130 | ctx.fillText("Who can reach the Iron Throne first?", 300, 700); | |
131 | ctx.fillText("Watch out for the yellow tiles, danger may be lurking!", 200, 70); | |
132 | ctx.fillText("If you roll a 6, you can roll again to avoid them!", 200, 90); | |
133 | ||
134 | ctx.fillStyle = "#FFFFFF"; | |
135 | ctx.fillText("START", 223, 120); | |
136 | }; | |
137 | ||
138 | // Function to spin dice on click | |
139 | (function(){ | |
140 | var div = document.querySelector('.dice-container'); | |
141 | var dice = document.querySelector('#dice'); | |
142 | var open = false; | |
143 | ||
144 | div.addEventListener('click', function(){ | |
145 | if(open){ | |
146 | dice.className = 'icon-dice'; | |
147 | } else{ | |
148 | dice.className = 'icon-dice rotate'; | |
149 | } | |
150 | open = !open; | |
151 | }); | |
152 | })(); | |
153 | ||
154 | // Function to generate a number from 1-6 | |
155 | function rollDice() { | |
156 | var playerRoll = document.querySelector(".player-roll"); | |
157 | var roll = Math.floor(Math.random() * 6) + 1; | |
158 | playerRoll.innerHTML = "You rolled a " + roll + "."; | |
159 | ||
160 | return roll; | |
161 | }; | |
162 | ||
163 | // Move bead based on roll | |
164 | // ...code | |
165 | class Player{ | |
166 | constructor(index, left_offset) | |
167 | { | |
168 | this.name = localStorage.getItem("player" + index); | |
169 | this.image = document.querySelector(".bead" + index); | |
170 | this.currentPosition = 0; // starting positon | |
171 | this.left_offset = left_offset; | |
172 | this.gambling = false; | |
173 | this.rollHigh = false; | |
174 | this.lastRoll = 0; | |
175 | ||
176 | if (this.image !== undefined) | |
177 | { | |
178 | var playerFN = this.name.split(' ', 1)[0]; | |
179 | this.image.src = "images/" + playerFN + "_small.png"; | |
180 | } | |
181 | } | |
182 | } | |
183 | ||
184 | var players = [ | |
185 | new Player(1, 0.0), | |
186 | new Player(2, 30.0) | |
187 | ]; | |
188 | var currentPlayerIndex = 0; | |
189 | ||
190 | var button = document.getElementById("dice"); | |
191 | var trapContainer = document.querySelector(".message-trap"); | |
192 | var playerTurnContainer = document.querySelector(".player-turn"); | |
193 | playerTurnContainer.innerHTML = players[0].name; | |
194 | ||
195 | function updateBeadPosition() { | |
196 | var currentPosition = players[currentPlayerIndex].currentPosition; | |
197 | var leftOffset = players[currentPlayerIndex].left_offset; | |
198 | var bead = players[currentPlayerIndex].image; | |
199 | ||
200 | bead.style.left = (tiles[currentPosition].left + leftOffset) + 'px'; | |
201 | bead.style.bottom = tiles[currentPosition].bottom + 'px'; | |
202 | }; | |
203 | ||
204 | function moveBead(amount) { | |
205 | // Set current position | |
206 | var currentPosition = players[currentPlayerIndex].currentPosition; | |
207 | currentPosition += amount; | |
208 | if (currentPosition < 0) currentPosition = 0; | |
209 | if (currentPosition >= tiles.length) currentPosition = tiles.length - 1; | |
210 | players[currentPlayerIndex].currentPosition = currentPosition; | |
211 | ||
212 | updateBeadPosition(); | |
213 | ||
214 | // If on last, win! | |
215 | if (currentPosition === tiles.length - 1) { | |
216 | setTimeout(() => alert('You win!'), 1); // Temporary | |
217 | ||
218 | ||
219 | // localStorage.removeItem("player1"); | |
220 | // localStorage.removeItem("player2"); | |
221 | localStorage.setItem("winner", currentPlayerIndex); // Add winner to local storage for finale page | |
222 | // 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"; | |
223 | } | |
224 | }; | |
225 | ||
226 | function swapPlayer() { | |
227 | currentPlayerIndex = (currentPlayerIndex == 0) ? 1 : 0; | |
228 | playerTurnContainer.innerHTML = players[currentPlayerIndex].name; | |
229 | } | |
230 | ||
231 | button.addEventListener("click", (e) => { | |
232 | var roll = rollDice(); | |
233 | players[currentPlayerIndex].lastRoll = roll; | |
234 | console.log("roll " + roll); | |
235 | ||
236 | // TRAPS | |
237 | var trapInfo = document.querySelector(".text-trap"); | |
238 | var trapInstructions = document.querySelector(".instruction"); | |
239 | var trapH3 = document.querySelector(".message-trap h3"); | |
240 | ||
241 | trapContainer.style.display = "none"; | |
242 | ||
243 | var desiredMove = roll; | |
244 | if (players[currentPlayerIndex].gambling) | |
245 | { | |
246 | if ((roll % 2) == 1) | |
247 | { | |
248 | desiredMove = -roll; | |
249 | } | |
250 | players[currentPlayerIndex].gambling = false; | |
251 | } | |
252 | else if (players[currentPlayerIndex].rollHigh) | |
253 | { | |
254 | if (roll <= 3) | |
255 | { | |
256 | roll = -roll; | |
257 | } | |
258 | players[currentPlayerIndex].rollHigh = false; | |
259 | } | |
260 | ||
261 | console.log("Old Position " + players[currentPlayerIndex].currentPosition); | |
262 | moveBead(desiredMove); | |
263 | console.log("New Position " + players[currentPlayerIndex].currentPosition); | |
264 | ||
265 | if(desiredMove != 6) | |
266 | { | |
267 | // Traps go into esle statement if 6 is rolled conditonal - to avoid the traps | |
268 | // If bead lands on yellow tile, activate trap | |
269 | if(tiles[players[currentPlayerIndex].currentPosition].data == undefined){ | |
270 | trapContainer.style.display = "none"; | |
271 | swapPlayer(); | |
272 | ||
273 | } else if(tiles[players[currentPlayerIndex].currentPosition].data.type == "TRAP") { | |
274 | // Display trap message and instructions if bead has landed on a trap | |
275 | trapContainer.style.display = "block"; | |
276 | trapInfo.innerHTML = tiles[players[currentPlayerIndex].currentPosition].data.text; | |
277 | trapInstructions.innerHTML = tiles[players[currentPlayerIndex].currentPosition].data.instruction; | |
278 | dice.style.display = "none"; | |
279 | } | |
280 | } | |
281 | else | |
282 | { | |
283 | dice.style.display = "none"; | |
284 | trapInfo.innerHTML = "You rolled a 6 and skip any traps and get to roll again."; | |
285 | trapInstructions.innerHTML = "Roll again."; | |
286 | trapH3.innerHTML = "You Rolled a 6"; | |
287 | trapContainer.style.display = "block"; | |
288 | } | |
289 | }); | |
290 | ||
291 | var trapOkBtn = document.querySelector(".accept-trap"); | |
292 | trapOkBtn.addEventListener("click", (e) => { | |
293 | var currentPosition = players[currentPlayerIndex].currentPosition; | |
294 | if (players[currentPlayerIndex].lastRoll !== 6) | |
295 | { | |
296 | var isTrap = tiles[currentPosition] !== undefined && tiles[currentPosition].data !== undefined; | |
297 | if (isTrap) | |
298 | { | |
299 | if(tiles[currentPosition].data.move == "BACKWARDS") { | |
300 | var backwards = tiles[currentPosition].data.steps; | |
301 | moveBead(-backwards); | |
302 | } else if(tiles[currentPosition].data.move == "FORWARDS") { | |
303 | var forwards = tiles[currentPosition].data.steps; | |
304 | moveBead(forwards) | |
305 | } else if(tiles[currentPosition].data.move == "GAMBLE") { | |
306 | // Wait for current player to roll again; | |
307 | players[currentPlayerIndex].gambling = true; | |
308 | } else if(tiles[currentPosition].data.move == "ROLLHIGH") { | |
309 | players[currentPlayerIndex].rollHigh = true; | |
310 | } | |
311 | } | |
312 | swapPlayer(); | |
313 | } | |
314 | ||
315 | trapContainer.style.display = "none"; | |
316 | dice.style.display = "block"; | |
317 | }); // Event listener to process traps |