DEV Community

Cover image for The classic Minesweeper game developed with Angular
Gabriel Manussakis
Gabriel Manussakis

Posted on

The classic Minesweeper game developed with Angular

The game development is a great way to cover several programming topics. In this experiment I developed a differente version of the classic Minesweeper game.

My main goal was to build an accessible game where the user should be able to play with mouse, touch and keyboard. This is part of my desire to learn more about accessibility on the web.

The angular framework helped me to write less code and focus mainly on the logic of the game.

I hope you enjoy it!

Play the game

You can see the code on Github:

GitHub logo Manussakis / angular-minesweeper

Play a different version of the classic Minesweeper game built with Angular

Minesweeper game

Minesweeper

A different version of the classic Minesweeper game built with Angular.

Play the game

This project was generated with Angular CLI version 11.2.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.




Top comments (12)

Collapse
 
mrgrigri profile image
Michael Richins

This is a great design. There is one UX flaw that most don't know exists. If you were to simultaneously right- and left-click on a cell that has a number exposed and if the mines surrounding are flagged correctly, then all of the other surrounding cells are exposed.

Collapse
 
manussakis profile image
Gabriel Manussakis

Hi, I just published this feature.
Now you can click on a number and all surrounding squares will be exposed as long as the amount of flags are equal to the number clicked.

Thanks for your feedback!

Collapse
 
manussakis profile image
Gabriel Manussakis

Thanks!
Interesting, I didn't know this behavior.

Collapse
 
danielsc profile image
Daniel Schreiber

Cool project!!
On iOS I was not able to set marks..

Collapse
 
manussakis profile image
Gabriel Manussakis

Daniel, thanks for your feedback, I will try to fix it as soon as possible.

Collapse
 
manussakis profile image
Gabriel Manussakis

Hi, I fixed this, now it should be working.
Thanks!

Collapse
 
js2me profile image
Sergey S. Volkov

Awesome!

Emojis looks so funny :D

Collapse
 
manussakis profile image
Gabriel Manussakis

Thanks :)

Collapse
 
patryktech profile image
Patryk

Very nice. You should convert it to a PWA so I can install it on my tablet 😁😁

Collapse
 
manussakis profile image
Gabriel Manussakis

Good idea, thanks!

Collapse
 
sharadcodes profile image
Sharad Raj (He/Him)

Awesome

Collapse
 
manussakis profile image
Gabriel Manussakis

Thanks!!