Disclaimer: I've learned quite a bit since building this. I love MineSweeper, so I decided to make it a fun codepen project. It will be continually updated and I plan on making spinoff versions of the game once the original game is made. Using HTML, CSS, and JavaScript.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fonts
images
notes
scripts
.gitignore
README.md
index.html
style.css

README.md


Overview & Credit


Minus the fact that MineSweeper is a game originating in the 1960's (as my father would say, "Before [I] was even a dirty thought") and the fact that the game itself was made by someone completely different and has evolved without my help, this is an original product. I mean to say, the code itself was not copied from a source and input into this document. This was a learning experience for me, so that would've defeated the purpose if I did that. That said, I believe ideas and inspiration are always worth giving credit to:

• Microsoft - I played this game for hours on Windows 98, so thanks Billy and team for that.

• The people who created the game and catered to its evolution for the past few decades - http://en.wikipedia.org/wiki/Minesweeper_(video_game) - thanks a milli.

• Dan Purdy's Simon Says game tutorial was pretty instrumental in giving me the courage to build a JavaScript game on my own. The tutorial can be found on his site - http://www.danpurdy.co.uk/tutorial/simon-says-game-in-jquery-tutorial/ - I recommend you check it out, share it, and give him some accolades for it.

• I found the box shadow effect on Paul Underwood's site - http://www.paulund.co.uk/creating-different-css3-box-shadows-effects - I changed it quite a bit over time I believe, but it's still a great help.

• I can't for the life of me find where I pulled the rainbow css code from. I even googled the code itself and couldn't find it. Nonetheless, it was a great help. You can find multiple resources on linear gradients and color stops by googling just that or rainbow css (or by looking at the appropriate css fill/script tag within this repo).


Notes:


DELETE KEYWORD

** Bugs:

** Future Implementation

CSS: • Create Explosion animation for each block • Create Explosion animation for entire board when bomb is clicked.

JS: • Open connecting 0 blocks after each click.

** Layout of game object:

mineSweeper = { bombs: { flagged: BOOLEAN }, nonBombs: { touchingBombs: #, active: BOOLEAN, flagged: BOOLEAN }, flagMode: BOOLEAN, bombsLeft: #, topLeft: -9, topBlock: -8, topRight: -7, leftBlock: -1, rightBlock: 1, bottomLeft: 7, bottomBlock: 8, bottomRight: 9, newGame: FUNCTION, randomizeBombs: FUNCTION, dropBombs: FUNCTION, populateNonBombs: FUNCTION, placeNonBombs: FUNCTION, isItABomb: FUNCTION, checkBlock: FUNCTION, click: FUNCTION, switchToFlagMode: FUNCTION, flagBlock: FUNCTION, displayNumberOfBombsLeft: FUNCTION, didYouWin: FUNCTION }


Scratch Pad


To make a bomb explode, i could add 9 figures within each block div. each figure has a different color of the rainbow and when the div is clicked, the figures disperse off the side of the screen, and the div is left with a white background.