Minesweeper

Goal:

To win the game you must mark the 20 squares, containing hidden bombs '💣', with a red flag '🚩'.

Controls:

1. 🖥️ Desktop

   • Left mouse click to select and reveal a square.
   • Right mouse click to place/remove a red flag.
   • Left mouse click the "Reset Game" button or refresh your browser to reset the game

2. 📱 Mobile/Tablet

   • Short tap to select and reveal a square.
   • Long press to place/remove a red flag.
   • Short tap the "Reset Game" button or refresh your browser to reset the game

Instructions:

1. Start by clicking a square (hope it doesn't contain a bomb or you will immediately fail) and numbers will appear.

   
   
   • Each number tells you how many mines are in the 8 surrounding squares.
   • For example, a “2” means there are 2 mines touching that square.

2. Use logic to figure out where the mines are.

   
   
   • If a square has a “1” and you can see only one unopened square next to it, that square must be a mine.
   • You can then right-click (or long-press on mobile) to flag that square as a mine.

3. It sounds obvious but... Don’t click on mines!

   
   
   • If you left-click (short tap on mobile/tablet) a square that has a mine — BOOM! Game over!

4. Keep going until all 20 bombs have been correctly flagged.

   
   
   • Once you’ve flagged all the bombs, you win!

Overview

Welcome to my Minesweeper game — a classic puzzle game brought to life with pure HTML, CSS, and JavaScript. This project demonstrates an interactive front-end application where users engage directly with the data on the page, manipulating the game board and receiving immediate feedback based on their actions.

What is Minesweeper?

Minesweeper is a logic-based game where players uncover squares on a grid without detonating hidden mines. Numbers on revealed squares indicate how many mines lie adjacent to them, guiding players to avoid bombs while clearing the board. The challenge lies in deducing safe moves through reasoning and deduction.

Interactive Functionality

This game’s core interactive feature is its dynamic grid, where users click squares to reveal either a number or a mine. Flags can be placed to mark suspected mines, and the number of remaining flags updates in real time. The interface immediately responds to clicks by updating the display and game state, providing instant visual feedback.

Key interactive elements include:

• Left-click (short tap on touchscreen devices) to reveal a square
• Right-click (long press on touchscreen devices) to flag/unflag a square as a potential mine
• Game over or win messages displayed dynamically based on user actions
• Real-time counter showing remaining flags

Technologies Used

• HTML5: For semantic page structure and the game grid layout
• CSS3: For styling the game board, buttons, and responsive design
• JavaScript (Vanilla): All game logic, interactivity, and dynamic DOM manipulation were coded by hand using tutorials, independent research, and assistance from ChatGPT—no external JavaScript libraries or frameworks are used in the game itself
• Bootstrap: Used only for the mobile navbar component; this is the sole external library integrated into the project

This project is a predominantly original build showcasing my skills in vanilla JavaScript development, with Bootstrap included exclusively to provide a responsive navbar.

Project Requirements Addressed

• Dynamic Front End: Custom JavaScript creates a fully interactive Minesweeper game with a responsive grid and user feedback
• Site Responses: User clicks produce immediate changes in the game board, flags, and messages
• Information Architecture: Clear layout with a main game area and an info panel showing flags left and results; simple navigation included where appropriate
• Documentation: Accompanied by README.md explaining the project, purpose, technologies, and usage instructions
• Version Control: The project is maintained in GitHub with a public repository tracking all changes
• Attribution: All game code is original and authored by me. Any code inspiration came from tutorials, research, or ChatGPT assistance and is properly noted. The only external library used is Bootstrap for the navbar
• Deployment: The site is deployed via GitHub Pages, making it publicly accessible and easy to share

Value Provided

Users benefit from an engaging interactive experience that challenges logic and problem-solving skills. The game adapts immediately to user inputs, allowing a personalized and intuitive gameplay flow. As the project creator, I advanced my skills in front-end web development, mastering core web technologies and project deployment.