├── README.md ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Maze-Game 2 | Play This Interesting Maze Escape Game 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Maze Game 7 | 8 | 9 | 10 | 11 |

12 |

13 |

Lost in Mazeland

14 |

15 |

Find the way out of Maze in 30 seconds!

16 |

17 |

20 |

21 |

22 | 23 | 35 |

36 |

37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | #heading { 7 | text-align: center; 8 | margin-top: 15px; 9 | margin-bottom: 15px; 10 | font-size: xx-large; 11 | } 12 | 13 | #heading { 14 | margin: 0 auto 15 | } 16 | 17 | #canvas { 18 | background: #99afa3; 19 | display: block; 20 | margin: 0 auto; 21 | } 22 | 23 | #c { 24 | background: #eeeeee; 25 | display: block; 26 | margin: 0 auto; 27 | } 28 | 29 | #timerel { 30 | background: #eeeeee; 31 | display: block; 32 | margin: 0 auto; 33 | color: red; 34 | } 35 | 36 | .modal { 37 | display: none; 38 | /* Hidden by default */ 39 | position: fixed; 40 | /* Stay in place */ 41 | z-index: 1; 42 | /* Sit on top */ 43 | padding-top: 20%; 44 | /* Location of the box */ 45 | left: 0; 46 | top: 0; 47 | width: 100%; 48 | /* Full width */ 49 | height: 100%; 50 | /* Full height */ 51 | overflow: auto; 52 | /* Enable scroll if needed */ 53 | background-color: rgb(0, 0, 0); 54 | /* Fallback color */ 55 | background-color: rgba(0, 0, 0, 0.4); 56 | /* Black w/ opacity */ 57 | } 58 | 59 | 60 | /* Modal Content */ 61 | 62 | .modal-content { 63 | position: relative; 64 | background-color: #fefefe; 65 | margin: auto; 66 | padding: 0; 67 | border: 1px solid #888; 68 | width: 30%; 69 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 70 | -webkit-animation-name: animatetop; 71 | -webkit-animation-duration: 0.4s; 72 | animation-name: animatetop; 73 | animation-duration: 0.4s 74 | } 75 | 76 | 77 | /* Animation */ 78 | 79 | @-webkit-keyframes animatetop { 80 | from { 81 | top: -300px; 82 | opacity: 0 83 | } 84 | 85 | to { 86 | top: 0; 87 | opacity: 1 88 | } 89 | } 90 | 91 | @keyframes animatetop { 92 | from { 93 | top: -300px; 94 | opacity: 0 95 | } 96 | 97 | to { 98 | top: 0; 99 | opacity: 1 100 | } 101 | } 102 | 103 | 104 | /* The Close Button */ 105 | 106 | .close { 107 | color: white; 108 | float: right; 109 | font-size: 28px; 110 | font-weight: bold; 111 | } 112 | 113 | .close:hover, 114 | .close:focus { 115 | color: #000; 116 | text-decoration: none; 117 | cursor: pointer; 118 | } 119 | 120 | .modal-header { 121 | padding: 2px 16px; 122 | background-color: #41d9f4; 123 | color: white; 124 | text-align: center; 125 | height: 50%; 126 | } 127 | 128 | .modal-body { 129 | padding: 2px 16px; 130 | } 131 | 132 | .modal-footer { 133 | padding: 2px 16px; 134 | background-color: #f4bc42; 135 | color: red; 136 | text-align: center; 137 | height: 50%; 138 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var modal = document.getElementById('myModal'); 2 | 3 | // Get the element that closes the modal 4 | var span = document.getElementsByClassName("close")[0]; 5 | 6 | // When the user clicks the button, open the modal 7 | modelfungo = function () { 8 | console.log("func called") 9 | modal.style.display = "block"; 10 | x = document.querySelector(".gamehead"); 11 | x.textContent = "Game Over" 12 | 13 | } 14 | 15 | modelfunwin = function () { 16 | console.log("func called") 17 | modal.style.display = "block"; 18 | x = document.querySelector(".gamehead"); 19 | x.textContent = "Congrats! You Win" 20 | 21 | } 22 | 23 | document.getElementById("demo").addEventListener("click", myFunction); 24 | 25 | function myFunction() { 26 | document.location.reload(); 27 | } 28 | 29 | // When the user clicks on (x), close the modal 30 | span.onclick = function () { 31 | modal.style.display = "none"; 32 | } 33 | 34 | // When the user clicks anywhere outside of the modal, close it 35 | window.onclick = function (event) { 36 | if (event.target == modal) { 37 | modal.style.display = "none"; 38 | } 39 | } 40 | 41 | 42 | //var now = new Date().getTime(); 43 | function startTimer(duration, display) { 44 | var start = Date.now(), 45 | diff, 46 | minutes, 47 | seconds; 48 | 49 | function timer() { 50 | if (playing) { 51 | diff = duration - (((Date.now() - start) / 1000) | 0); 52 | minutes = (diff / 60) | 0; 53 | seconds = (diff % 60) | 0; 54 | minutes = minutes < 10 ? "0" + minutes : minutes; 55 | seconds = seconds < 10 ? "0" + seconds : seconds; 56 | display.textContent = "Game ends in " + minutes + ":" + seconds; 57 | 58 | if (diff <= 0) { 59 | display.textContent = "Game Over"; 60 | start = Date.now() + 1000; 61 | playing = false 62 | modelfungo(); 63 | } 64 | } 65 | }; 66 | timer(); 67 | setInterval(timer, 1000) 68 | } 69 | 70 | window.onload = function () { 71 | twominutes = 30; 72 | x = document.querySelector("#timerel"); 73 | startTimer(twominutes, x) 74 | } 75 | playing = true 76 | window.addEventListener('keydown', doKeyDown, true); 77 | 78 | function doKeyDown(evt) { 79 | var handled = false; 80 | if (playing) { 81 | switch (evt.keyCode) { 82 | case 38: 83 | /* Up arrow was pressed */ 84 | m.moveup("canvas"); 85 | handled = true 86 | break; 87 | case 87: 88 | /* Up arrow was pressed */ 89 | m.moveup("canvas"); 90 | handled = true 91 | break; 92 | case 40: 93 | /* Down arrow was pressed */ 94 | m.movedown("canvas"); 95 | handled = true 96 | break; 97 | case 83: 98 | /* Down arrow was pressed */ 99 | m.movedown("canvas"); 100 | handled = true 101 | break; 102 | case 37: 103 | /* Left arrow was pressed */ 104 | m.moveleft("canvas"); 105 | handled = true 106 | break; 107 | case 65: 108 | /* Left arrow was pressed */ 109 | m.moveleft("canvas"); 110 | handled = true 111 | break; 112 | case 39: 113 | /* Right arrow was pressed */ 114 | m.moveright("canvas"); 115 | handled = true 116 | break; 117 | case 68: 118 | /* Right arrow was pressed */ 119 | m.moveright("canvas"); 120 | handled = true 121 | break; 122 | } 123 | if (m.checker("canvas")) 124 | playing = false 125 | console.log(m.getMoves()) 126 | 127 | } 128 | if (handled) 129 | evt.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers) 130 | } 131 | 132 | 133 | var dsd = function (size) { 134 | this.N = size; 135 | this.P = new Array(this.N); 136 | this.R = new Array(this.N); 137 | 138 | this.init = function () { 139 | for (var i = 0; i < this.N; i++) { 140 | this.P[i] = i; 141 | this.R[i] = 0; 142 | } 143 | } 144 | 145 | this.union = function (x, y) { 146 | var u = this.find(x); 147 | var v = this.find(y); 148 | if (this.R[u] > this.R[v]) { 149 | this.R[u] = this.R[v] + 1; 150 | this.P[u] = v; 151 | } else { 152 | this.R[v] = this.R[u] + 1; 153 | this.P[v] = u; 154 | } 155 | } 156 | 157 | this.find = function (x) { 158 | if (x == this.P[x]) 159 | return x; 160 | this.P[x] = this.find(this.P[x]); 161 | return this.P[x]; 162 | } 163 | }; 164 | 165 | function random(min, max) { 166 | return (min + (Math.random() * (max - min))); 167 | }; 168 | 169 | function randomChoice(choices) { 170 | return choices[Math.round(random(0, choices.length - 1))]; 171 | }; 172 | 173 | var maze = function (X, Y) { 174 | this.N = X; 175 | this.M = Y; 176 | this.S = 25; 177 | this.moves = 0; 178 | this.Board = new Array(2 * this.N + 1); 179 | this.EL = new Array(); 180 | this.vis = new Array(2 * this.N + 1); 181 | this.delay = 2; 182 | this.x = 1; 183 | this.init = function () { 184 | for (var i = 0; i < 2 * this.N + 1; i++) { 185 | this.Board[i] = new Array(2 * this.M + 1); 186 | this.vis[i] = new Array(2 * this.M + 1); 187 | } 188 | 189 | for (var i = 0; i < 2 * this.N + 1; i++) { 190 | for (var j = 0; j < 2 * this.M + 1; j++) { 191 | if (!(i % 2) && !(j % 2)) { 192 | this.Board[i][j] = '+'; 193 | } else if (!(i % 2)) { 194 | this.Board[i][j] = '-'; 195 | } else if (!(j % 2)) { 196 | this.Board[i][j] = '|'; 197 | } else { 198 | this.Board[i][j] = ' '; 199 | } 200 | this.vis[i][j] = 0; 201 | } 202 | } 203 | } 204 | 205 | 206 | this.add_edges = function () { 207 | for (var i = 0; i < this.N; i++) { 208 | for (var j = 0; j < this.M; j++) { 209 | if (i != this.N - 1) { 210 | this.EL.push([ 211 | [i, j], 212 | [i + 1, j], 1 213 | ]); 214 | } 215 | if (j != this.M - 1) { 216 | this.EL.push([ 217 | [i, j], 218 | [i, j + 1], 1 219 | ]); 220 | } 221 | } 222 | } 223 | } 224 | 225 | 226 | //Hash function 227 | this.h = function (e) { 228 | return e[1] * this.M + e[0]; 229 | } 230 | this.randomize = function (EL) { 231 | for (var i = 0; i < EL.length; i++) { 232 | var si = Math.floor(Math.random() * 387) % EL.length; 233 | var tmp = EL[si]; 234 | EL[si] = EL[i]; 235 | EL[i] = tmp; 236 | } 237 | return EL; 238 | } 239 | 240 | this.breakwall = function (e) { 241 | var x = e[0][0] + e[1][0] + 1; 242 | var y = e[0][1] + e[1][1] + 1; 243 | this.Board[x][y] = ' '; 244 | } 245 | 246 | this.gen_maze = function () { 247 | this.EL = this.randomize(this.EL); 248 | var D = new dsd(this.M * this.M); 249 | D.init(); 250 | var s = this.h([0, 0]); 251 | var e = this.h([this.N - 1, this.M - 1]); 252 | this.Board[1][0] = ' '; 253 | this.Board[2 * this.N - 1][2 * this.M] = ' '; 254 | //Run Kruskal 255 | for (var i = 0; i < this.EL.length; i++) { 256 | var x = this.h(this.EL[i][0]); 257 | var y = this.h(this.EL[i][1]); 258 | if (D.find(s) == D.find(e)) { 259 | if (!(D.find(x) == D.find(s) && D.find(y) == D.find(s))) { 260 | if (D.find(x) != D.find(y)) { 261 | D.union(x, y); 262 | this.breakwall(this.EL[i]); 263 | this.EL[i][2] = 0; 264 | } 265 | 266 | } 267 | //break; 268 | } else if (D.find(x) != D.find(y)) { 269 | D.union(x, y); 270 | this.breakwall(this.EL[i]); 271 | this.EL[i][2] = 0; 272 | } else { 273 | continue; 274 | } 275 | } 276 | 277 | }; 278 | 279 | 280 | this.draw_canvas = function (id) { 281 | this.canvas = document.getElementById(id); 282 | var scale = this.S; 283 | temp = [] 284 | if (this.canvas.getContext) { 285 | this.ctx = this.canvas.getContext('2d'); 286 | this.Board[1][0] = '$' 287 | for (var i = 0; i < 2 * this.N + 1; i++) { 288 | for (var j = 0; j < 2 * this.M + 1; j++) { 289 | if (this.Board[i][j] != ' ') { //} && this.Board[i][j] != '&') { 290 | this.ctx.fillStyle = "#0b052d"; 291 | this.ctx.fillRect(scale * i, scale * j, scale, scale); 292 | } else if (i < 5 && j < 5) 293 | temp.push([i, j]) 294 | } 295 | } 296 | x = randomChoice(temp) 297 | // console.log(temp) 298 | this.Board[x[0]][x[1]] = '&' 299 | this.ctx.fillStyle = "#c4192a"; 300 | this.ctx.fillRect(scale * x[0], scale * x[1], scale, scale); 301 | } 302 | }; 303 | 304 | this.checkPos = function (id) { 305 | for (var i = 0; i < 2 * this.N + 1; i++) { 306 | for (var j = 0; j < 2 * this.M + 1; j++) { 307 | if (this.Board[i][j] == '&') { 308 | // console.log(i,j) 309 | return [i, j] 310 | } 311 | } 312 | } 313 | } 314 | 315 | this.moveclear = function (a, b) { 316 | var scale = this.S; 317 | this.ctx = this.canvas.getContext('2d'); 318 | this.ctx.fillStyle = "#e27158"; 319 | this.ctx.fillRect(scale * a, scale * b, scale, scale); 320 | this.Board[a][b] = ' ' 321 | } 322 | 323 | this.move = function (a, b) { 324 | var scale = this.S; 325 | this.ctx = this.canvas.getContext('2d'); 326 | this.ctx.fillStyle = "#c4192a"; 327 | this.ctx.fillRect(scale * a, scale * b, scale, scale); 328 | this.Board[a][b] = '&' 329 | } 330 | 331 | this.moveup = function (id) { 332 | cord = this.checkPos(id); 333 | var scale = this.S; 334 | i = cord[0] 335 | j = cord[1] 336 | j -= 1 337 | if (j < 0) 338 | return 339 | else if (j > 2 * this.M) 340 | return 341 | else if (this.Board[i][j] == ' ') { 342 | this.moveclear(i, j + 1); 343 | this.move(i, j); 344 | this.moves += 1; 345 | } else 346 | return 347 | } 348 | 349 | this.movedown = function (id) { 350 | cord = this.checkPos(id); 351 | var scale = this.S; 352 | i = cord[0] 353 | j = cord[1] 354 | j += 1 355 | if (j < 0) 356 | return 357 | else if (j > 2 * this.M) 358 | return 359 | else if (this.Board[i][j] == ' ') { 360 | this.moveclear(i, j - 1); 361 | this.move(i, j); 362 | this.moves += 1; 363 | } else 364 | return 365 | } 366 | 367 | this.moveleft = function (id) { 368 | cord = this.checkPos(id); 369 | var scale = this.S; 370 | i = cord[0] 371 | j = cord[1] 372 | i -= 1 373 | if (i < 0) 374 | return 375 | else if (i > 2 * this.N) 376 | return 377 | else if (this.Board[i][j] == ' ') { 378 | this.moveclear(i + 1, j); 379 | this.move(i, j); 380 | this.moves += 1; 381 | } else 382 | return 383 | } 384 | 385 | this.moveright = function (id) { 386 | cord = this.checkPos(id); 387 | var scale = this.S; 388 | i = cord[0] 389 | j = cord[1] 390 | i += 1 391 | if (i < 0) 392 | return 393 | else if (i > 2 * this.N) 394 | return 395 | else if (this.Board[i][j] == ' ') { 396 | this.moveclear(i - 1, j); 397 | this.move(i, j); 398 | this.moves += 1; 399 | } else 400 | return 401 | } 402 | this.checker = function (id) { 403 | // console.log("win"); 404 | cord = this.checkPos(id); 405 | i = cord[0] 406 | j = cord[1] 407 | // console.log(cord) 408 | if ((i == 19 && j == 20) || (i == 1 && j == 0)) { 409 | modelfunwin(); 410 | // alert("YOU WIN, CONGRATULATIONS!"); 411 | return 1 412 | } 413 | return 0 414 | } 415 | 416 | this.getMoves = function () { 417 | return this.moves; 418 | } 419 | 420 | }; 421 | 422 | m = new maze(10, 10); 423 | m.init(); 424 | m.add_edges(); 425 | m.gen_maze(); 426 | m.draw_canvas("canvas"); 427 | 428 | function drawMoves() { 429 | document.getElementById("c").innerHTML = "Moves: " + m.getMoves() 430 | } 431 | // drawMoves(); 432 | setInterval(drawMoves, 100); --------------------------------------------------------------------------------

Lost in Mazeland

Play Again?