loading...
Cover image for The classic Minesweeper game developed with Angular

The classic Minesweeper game developed with Angular

manussakis profile image Manussakis ・1 min read

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 8.1.1.

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.




Posted on by:

manussakis profile

Manussakis

@manussakis

Designer since 2010, developer since 2013. I mix design and code to build relevant projects.

Discussion

markdown guide
 

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.

 

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!

 

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

 

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

 

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

 

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

 
 

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