Minesweeper

A classic Minesweeper game built with HTML, CSS, and JavaScript.

System Description

Minesweeper Game: Detailed Breakdown

This is a simple, interactive Minesweeper game built using HTML5, CSS, and JavaScript. The game works in a web browser and features a dynamic grid, bomb placement, and a timer to track how long the player takes to finish the game.

HTML Structure

• Canvas for Game Rendering: The game is rendered on an HTML5 <canvas> element, dynamically scaling the grid of 18 columns by 14 rows.
• Stopwatch Display: A stopwatch tracks time in minutes:seconds format, positioned in the top-right corner of the screen.
• Header: A simple header that reads "Minesweeper!" at the top of the page.

CSS Styling

• Centered Layout: Flexbox is used to center the Minesweeper grid on the screen, both vertically and horizontally.
• Canvas Border and Background: The canvas is styled with a border, and the page background color is light gray (#eee).
• Stopwatch and Header Positioning: The stopwatch is positioned at the top-right, while the header is centered at the top of the screen using CSS transformations.

JavaScript Game Logic

The game logic is handled entirely in JavaScript, with key functions managing the grid, bomb placement, and user interactions.

• Grid and Cells: The grid is composed of 18x14 cells, each represented by a Cell object that tracks its state (bomb, flagged, open).
• Drawing Cells: The Cell.prototype.draw method handles rendering each cell based on its state (open, flagged, bomb, etc.).
• Bomb Placement: 40 bombs are randomly placed across the grid at the start of the game.
• Cell Interaction: Players can left-click to reveal a cell or right-click to flag a suspected bomb. The game checks for bombs and reveals surrounding cells if no bombs are nearby.
• Game Win/Loss Conditions: The game ends with a win if all bombs are flagged correctly, or a loss if a bomb is clicked.

Timer Logic

• Start/Stop Timer: The timer starts on the player's first click and stops when the game ends.
• Timer Display: The time is displayed in minutes:seconds format and updates dynamically as the player progresses.

How Everything Works Together

The game initializes on page load, setting up the grid and bomb placement. The user interacts by clicking cells, with the game responding in real time based on whether the cell is a bomb or not. The timer tracks the player's progress, and the game ends when the player either wins by flagging all bombs or loses by clicking a bomb.