Last active
November 27, 2015 12:40
-
-
Save noorxbyte/747bed70ec921fa06813 to your computer and use it in GitHub Desktop.
JS Minesweeper
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Minesweeper</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <!-- jQuery library --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <!-- Latest compiled JavaScript --> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <br/> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <div class="control"> | |
| <button class="btn btn-default" id="btn">Reset</button> | |
| <br/><br/> | |
| </div> | |
| <div id="board"> | |
| <!-- Board --> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var board; | |
| /** | |
| * create new board when button clicked | |
| */ | |
| $('#btn').click(function() { | |
| board = new Board(16, 3); | |
| PrintBoard(); | |
| }); | |
| /** | |
| * call the recursive clear square function when square is clicked if not a mine | |
| */ | |
| $(document.body).on("click", ".square", function() { | |
| if (board.map[$(this).attr("row")][$(this).attr("col")].safe) | |
| ClearSquare(parseInt($(this).attr("row")), parseInt($(this).attr("col")), 0); | |
| else | |
| ClearBoard(); | |
| }); | |
| /** | |
| * clear the squares recursively | |
| */ | |
| function ClearSquare(row, col, count) { | |
| // get the button | |
| button = $("button[row=" + row + "][col=" + col + "]"); | |
| // if button already disabled return | |
| if (button.prop("disabled")) | |
| return; | |
| // colorize and disable and label the button | |
| button.css("background-color", "#C0C0C0"); | |
| button.text(board.map[row][col].mine); | |
| button.prop("disabled", true); | |
| if (board.map[row][col].mine < 1) { | |
| if ((row + 1) < board.size) | |
| if (board.map[row + 1][col].safe) // square below | |
| ClearSquare(row + 1, col, ++count); | |
| if ((row - 1) >= 0) | |
| if (board.map[row - 1][col].safe) // square above | |
| ClearSquare(row - 1, col, ++count); | |
| if ((col + 1) < board.size) { | |
| if (board.map[row][col + 1].safe) // square to right | |
| ClearSquare(row, col + 1, ++count); | |
| if ((row + 1) < size) | |
| if (board.map[row + 1][col + 1].safe) // square to below right | |
| ClearSquare(row + 1, col + 1, ++count); | |
| if ((row - 1) >= 0) | |
| if (board.map[row - 1][col + 1].safe) // square to above right | |
| ClearSquare(row - 1, col + 1, ++count); | |
| } | |
| if ((col - 1) >= 0) { | |
| if (board.map[row][col - 1].safe) // square to left | |
| ClearSquare(row, col - 1, ++count); | |
| if ((row + 1) < size) | |
| if (board.map[row + 1][col - 1].safe) // square to below left | |
| ClearSquare(row + 1, col - 1, ++count); | |
| if ((row - 1) >= 0) | |
| if (board.map[row - 1][col - 1].safe) // square to above left | |
| ClearSquare(row - 1, col - 1, ++count); | |
| } | |
| } | |
| } | |
| /** | |
| * Reveal the board on game over | |
| */ | |
| function ClearBoard() { | |
| alert("GAME OVER!"); | |
| } | |
| /** | |
| * display the board onto the page | |
| */ | |
| function PrintBoard() { | |
| // clear any previous board | |
| $("#board").empty(); | |
| // for each row | |
| for (row = 0; row < board.size; row++) { | |
| // for each col | |
| for (col = 0; col < board.size; col++) { | |
| // print the square | |
| $("#board").append("<button class=\"square\" row=\"" + row + "\" col=\"" + col + "\" style=\"background-color:#FFFFFF;height:30px;width:30px;\"> </button>"); | |
| } | |
| // move to new row | |
| $("#board").append("<br/>"); | |
| } | |
| } | |
| /** | |
| * board class | |
| */ | |
| function Board(size, mines) { | |
| this.size = size; | |
| this.map = [] | |
| // create the board | |
| for (i = 0; i < size; i++) | |
| this.map[i] = new Array(size); | |
| // add squares to the map | |
| for (row = 0; row < size; row++) | |
| for (col = 0; col < size; col++) | |
| this.map[row][col] = new Square(); | |
| // add mines to the board | |
| for (i = 0; i < mines; i++) { | |
| // select random square | |
| var row = Math.floor((Math.random() * (size - 1)) + 0); | |
| var col = Math.floor((Math.random() * (size - 1)) + 0); | |
| // decrement mine count and continue the loop if square already a mine | |
| if (!(this.map[row][col].safe)) { | |
| i--; | |
| continue; | |
| } | |
| // mark that square as a mine | |
| this.map[row][col].safe = false; | |
| if ((row + 1) < size) | |
| this.map[row + 1][col].mine++; // square below mine | |
| if ((row - 1) >= 0) | |
| this.map[row - 1][col].mine++; // square above mine | |
| if ((col + 1) < size) { | |
| this.map[row][col + 1].mine++; // square to right of mine | |
| if ((row + 1) < size) | |
| this.map[row + 1][col + 1].mine++; // square to below right of mine | |
| if ((row - 1) >= 0) | |
| this.map[row - 1][col + 1].mine++; // square to above right of mine | |
| } | |
| if ((col - 1) >= 0) { | |
| this.map[row][col - 1].mine++; // square to left of mine | |
| if ((row + 1) < size) | |
| this.map[row + 1][col - 1].mine++; // square to below left of mine | |
| if ((row - 1) >= 0) | |
| this.map[row - 1][col - 1].mine++; // square to above left of mine | |
| } | |
| } | |
| } | |
| /** | |
| * square class | |
| */ | |
| function Square() { | |
| this.mine = 0; | |
| this.safe = true; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment