Bomb Sweeper

Link to live site

About

Bomb Sweeper is a game where you have to find all the bombs on the board. The game is played on a grid of squares. Some squares contain bombs, others don't. If you click on a square containing a bomb, you lose. If you manage to click all the squares (without clicking on any bombs) you win. Clicking a square which doesn't have a bomb reveals the number of neighbouring squares containing bombs. Use this information plus some guess work to avoid the bombs. To reveal a square, left-click on it. To mark a square you think is a bomb, use right-click.

Game has three difficulties with following board setup:
Beginner: 8 / 8 squares with 10 hidden bombs.
Intermediate: 16 / 16 squares with hidden 40 bombs.
Expert: 16 / 30 squares with 99 hidden bombs.

Contents

• User Experience

  • User Stories

• Design Choices

  • OOP Approach
  • Pseudocode
  • App Design
  • Mobile Functionality

• Technologies Used

• Possible features to add in future

• Testing

• Deployment

• Credits

User Experience

User Stories

• As a first time player, I want to know the game instructions/rules.
• As a player I want to be able to change game difficulty and reset it any time during the game.
• As a player I want to reset the game.
• As a player I want to be able to flag/unflag a cell with potentially hidden bomb.
• As a player I want to see how many bombs left after I have flagged some.
• As a player, if bomb exploded I want to know position of remaining bombs, and my correctly predicted (flagged) ones.
• As a player, if win the game I want to know how many clicks and seconds it took to complete.
• As a frequent player I want to be able to see and compare my previous scores.
• If user uses wrong URL or go to the not existing page it automatically gets redirected to the main menu (index.html)

Back to contents

Design Choices

OOP Approach

Class based project (Object Oriented Programming paradigm) seemed to be good choice because:

• code is cleaner, functions (methods) are stored in objects,
• it provides encapsulation thus better readability,
• 'Strict Mode' out of the box,
• Good practice.

The game is developed as a SPA (single page application), and navigating through the game is controlled by JavaScript.

Pseudocode

1. Create Initial Utility Class (LayerControl.js) with features:

• selecting element from the DOM for easy manipulation,
• toggle of the elements visibility,

2. Create Main Menu Class with features:

• Load Game depending on difficulty set by the user

  • Used Google Search to find rules of minesweeper for difficulty levels:
    "There are three difficulty levels for Minesweeper: beginner, intermediate, and expert. Beginner has a total of ten mines and the board size is either 8 × 8, 9 × 9, or 10 × 10. Intermediate has 40 mines and also varies in size between 13 × 15 and 16 × 16. Finally, expert has 99 mines and is always 16 × 30 (or 30 × 16)."

• Options, where user can change level of difficulty (default set to beginner)

  • Possible feature to add in future:
  • [] A hardcore mode with the timer counting down to zero and exploding bombs if the game is not finished before time is over. That would set the difficulty on another level.
  • [] For hardcore mode change colors of the game to more aggressive theme.

3. Game Logic Class

• Create game board depending on board size and bomb count set by user.

• Left Mouse Click on a board's cell reveals either bomb (that ends the game) or number showing how many bombs are around that cell.

• Right Mouse Button on a board's cell marks the user choice/prediction for bomb location

• Win/Lose condition:

  • lose: when user click on the cell with bomb - reveal all bombs for user to see their locations.
    • also show "lose" paragraph on the screen
  • win after all bombs are marked correctly and rest of cell's are revealed.
    • also show "win" paragraph on the screen

• Show how many bombs are selected/guessed (count shown with flag emoji, decreasing/increasing depending on the user selection)

• New Game Buttons for all three difficulties (reset whole game)

• Game tracks player moves count and time of the current game (in seconds). Data is displayed for user to see.

• Developer Mode: when the key sequence 'bombs' is pressed, it shows/highlights bombs locations. It was primarily implemented to speed up the development process but I also wanted to add it as it reminds me of old game cheat codes.

  It is possible to clear highlighted bombs with the key sequence: 'clear'.

• Leader board is stored in localStorage to persist 5 best scores for each difficulty.

  • Display scores on the LeaderBoard page (component) for user to see previous scores.

• First click never can be a bomb hit:
  The game board is generated randomly before the player clicks any squares. If the player happens to click a bomb square on their very first click, the bomb at this square is removed and a new bomb is placed in the random square. If there is already a bomb in that square, game tries to find other random square with no bomb on it. Once this change is made, the game proceeds as if the initial clicked square was empty. This is done to ensure that the player will not lose on their very first click.

  Possible feature to add in future

  • [] Add feature where user can change name in the input and that name would be displayed in the leader board scores. That enable to distinguish different players for competitive gameplay. GameLeaderboard.js is prepared to accept user name parameter in the addHighScoreLS method. Its default value is set to "User" if user name is not provided.

  Back to contents

App Design

• Wireframes

  • Wireframes were created using Balsamiq, however the layout and design was followed very loosely and changed during the mockup stage.

  Main Menu:
  

  Game Board:
  

  Mobile Game Board:
  

• Color scheme

  • used Coolors for creating color scheme:
    

    The game should have pleasant and vibrant colors, therefore I have used shades of most common colors using a split complimentary approach of the color theory and manually customising it to fit the needs of the application. The colors chosen are "Space Cadet" (#2B2D42), "Honey Yellow" (#F7B32B), "Verdigris" (#42B3B1), Amaranth Red (#D90429).
    
    

  Back to contents

• Typography

  • Used Google fonts:
    main font - 'Ubuntu'
    
    game's board font - 'Press Start 2P'
    

  Back to contents

• Imagery

  • All images are used only in the 'Rules' section of the game. These are screenshots of the actual game, added purely to complement the rules text explanation as a visual representation of the parts of the game.
    

    Example screenshot image:
    
    
    

  Back to contents

• Technical design decisions

  • The whole application is very simple from the design perspective, it only needed three components: 'game', 'rules' and 'leader board'. Because of that, I have decided to develop it as a SPA (single-page application). JavaScript is used to manipulate the HTML elements and render the relevant content to the user. The user is provided with easy and intuitive ways to navigate between the game's elements with the use of buttons indicating their purpose.
    
    Quit to menu from the game screen:
    
    
    When user press the menu button confirmation pop-up is shown:
    
    
    Also the user can use 'ESC' key to leave current page and 'main menu' is shown.
  • Utilized CSS Reset shared by Andy Bell.
  • Used CSS custom properties (variables) to avoid DRY principle. Also provided me with easy way for manipulating HTML elements with use of JavaScript.
    Example of dynamic board generation (rowsCount and colsCount variables are set depending on the game difficulty chosen by the user and the board's size is dictated by those values):

  gameBoard.style.setProperty('--rows', this.rowsCount);
  gameBoard.style.setProperty('--cols', this.colsCount);

  • CSS styles are developed 'Desktop' first as the game is targeted mostly to PC/Desktop gamers. But game is fully responsive and playable on smaller devices (mobiles, tablets).
  • Text selection changes it to red color to match "exploding" theme.
    

Mobile Functionality

For the mobile devices / tablets the game is utilizing built in functionality where one tap on the device's screen is equivalent to the LMB (left mouse button) click and press and hold on the device's screen is equivalent to the RMB (right mouse button).

Back to contents

Technologies Used

HTML5
CSS
JavaScript

Possible features to add in future:

• First to address: One of the biggest challenges was to implement the game's board CSS styles for mobile devices as the board is quite big on the 'intermediate' and 'expert' difficulties. For both difficulties shortest length of the board is 16 squares. To fit the whole board on all mobile devices I have set the cell size to '21px' which seems a little bit small. The project was mainly focused towards practising JavaScript and not on the design thus I decided to leave it for future application upgrades.
• Add feature where user can change name in the input and that name would be displayed in the leader board scores. That enable to distinguish different players for competitive gameplay. GameLeaderboard.js is prepared to accept user name parameter in the addHighScoreLS method. Its default value is set to "User" if user name is not provided.
• Extra feature hardcore mode with the timer counting to zero and explode bombs if not game is not finished before time is over, that would set difficulty on another level.
• For hardcore mode change colors of the game to more aggressive.

Testing

Full testing process and results can be found here.

Deployment

Publishing

This website was published using GitHub Pages. The procedure is outlined below.

1. Go to the GitHub website and log in.
2. On the left-hand side, you'll see all your repositories, select the appropriate one. (Repository used for this project).
3. Under the name of your chosen Repository you will see a ribbon of selections, click on 'Settings' located on the right hand side.

4. Scroll down until you see 'GitHub Pages' heading.
5. Under the 'Source' click on the dropdown and select 'master branch'
6. The page will reload and you'll see the link of your published page displayed under 'GitHub' pages.
7. It takes a few minutes for the site to be published, wait until the background of your link changes to a green color before trying to open it.

Forking

If you wish to contribute to this website you can Fork it without affecting the main branch by following the procedure outlined below.

1. Go to the GitHub website and log in.

2. Locate the Repository used for this project.

3. On the right-hand side of the Repository name, you'll see the 'Fork' button. It's located next to the 'Star' and 'Watch' buttons.

   

4. This will create a copy in your personal repository.

5. Once you're finished making changes you can locate the 'New Pull Request' button just above the file listing in the original repository.

Cloning

If you wish to clone or download this repository to your local device you can follow the procedure outlined below.

1. Go to the GitHub website and log in.

2. Locate the Repository used for this project.

3. Under the Repository name locate 'Clone or Download' button in green.

   

4. To clone the repository using HTTPS click the link under "Clone with HTTPS".

5. Open your Terminal and go to a directory where you want the cloned directory to be copied in.

6. Type 'Git Clone' and paste the URL you copied from the GitHub.

7. To create your local clone press 'Enter'

Known Bugs

There are no identified bugs as of now. Constant manual tests were done as the features were added. Fixed, and checked with appropriate commit messages.

Credits

• My mentor Dick Vlaanderen for his advice and guidance during this project.
• Google search engine for limitless resources about web development.
• Stackoverflow community for general advices and solution to problems I have encountered.

Back to contents