Skip to content

jonurry/react-minesweeper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Minesweeper Logo React Minesweeper React Minesweeper Logo

A JavaScript and React implementation of the classic MineSweeper game.

The game is deployed on GitHub pages and can be played here:

Play React Minesweeper

  • click / tap on the emoji to start a new game

  • left click / tap on a minefield position to reveal

  • right-click / long press to cycle through flag/possible/none markers

The game is over when all non-mined positions have been revealed or a mine has been revealed.

There are 3 difficulty levels:

  • easy - 72 positions / 10 mines (density: 7.2)

  • medium - 288 positions / 47 mines (density: 6.1)

  • hard - 504 positions / 100 mines (density: 5.0)

The dimensions of the minefield depend on the available screen size.

This project was bootstrapped with Create React App

Playing Minesweeper

Winning at Minesweeper

Losing at Minesweeper

Getting Started

Clone the repository:

git clone [email protected]:jonurry/react-minesweeper.git

Install dependencies:

yarn install

Build the app:

yarn build

Start the app:

yarn start

then open a browser at:

localhost:3000

Test the app:

yarn test

Enjoy!

Technologies Used

  • JavaScript - All game logic written from scratch

  • React - UI components

  • Jest - Game logic and UI tested

  • Enzyme - React component rendering tests

  • Material UI - Styling of react components based on Google Material UI

  • GitHub Pages - for app deployment

  • Progressive Web App - The app can be added to the home screen of mobiles, tablets and windows devices to appear like an installed app.

  • SVG Icons - All icons are scalable vector graphics (SVG). These have a small file size and can be infinitley scaled without losing definition.

  • CSS Animation - UI elements are animated. e.g revealed minefield positions flip over and exploded mines pulsate. This increases user delight and engagement.

About

React implementation of the Minesweeper video game

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published