Three Prompts: AI Minesweeper with Solver

AI Assistant

Three Prompts: AI Minesweeper with Solver

AI Minesweeper game demo

Introduction

Minesweeper is a classic puzzle game that has been entertaining players since the early days of personal computing. The objective is simple: reveal all cells on the board without detonating any mines. While the rules are straightforward, the game requires logical deduction and sometimes calculated risk-taking, making it an excellent candidate for AI automation.

This project implements a fully functional Minesweeper game with an integrated AI solver that can play through puzzles of varying difficulty. The AI uses logical deduction strategies similar to those employed by human players, identifying safe moves when possible and making educated guesses when necessary. A speed control slider allows you to watch the AI's decision-making process in action, from rapid-fire solving to a more measured pace that lets you follow its logic.

The Three Prompts

Here are the exact prompts that were used to create this project:

Prompt 1

@projects/ai-mine-sweeper 

I want you to build a super simple implementation of minesweeper thay works like the real game. Keep this part sipmle.


Then I want you to build an AI system to auto solve the same. Make sure there is a slider to control how fast the AI will make moves

Prompt 2

Continue with implementing.

This is the current context in the browser console



Minesweeper.jsx:24 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Minesweeper.jsx:24:24
    at react-stack-bottom-frame (react-dom_client.js?v=c732e2ba:17476:20)
    at runWithFiberInDEV (react-dom_client.js?v=c732e2ba:1483:72)
    at commitHookEffectListMount (react-dom_client.js?v=c732e2ba:8458:122)
    at commitHookPassiveMountEffects (react-dom_client.js?v=c732e2ba:8516:60)
    at commitPassiveMountOnFiber (react-dom_client.js?v=c732e2ba:9885:29)
    at recursivelyTraversePassiveMountEffects (react-dom_client.js?v=c732e2ba:9866:13)
    at commitPassiveMountOnFiber (react-dom_client.js?v=c732e2ba:9982:13)
    at recursivelyTraversePassiveMountEffects (react-dom_client.js?v=c732e2ba:9866:13)
    at commitPassiveMountOnFiber (react-dom_client.js?v=c732e2ba:9982:13)Understand this error
react-dom_client.js?v=c732e2ba:6227 An error occurred in the <Minesweeper> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

defaultOnUncaughtError @ react-dom_client.js?v=c732e2ba:6227Understand this warning
Minesweeper.jsx:24 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Minesweeper.jsx:24:24
    at react-stack-bottom-frame (react-dom_client.js?v=c732e2ba:17476:20)
    at runWithFiberInDEV (react-dom_client.js?v=c732e2ba:1483:72)
    at commitHookEffectListMount (react-dom_client.js?v=c732e2ba:8458:122)
    at commitHookPassiveMountEffects (react-dom_client.js?v=c732e2ba:8516:60)
    at reconnectPassiveEffects (react-dom_client.js?v=c732e2ba:10014:13)
    at recursivelyTraverseReconnectPassiveEffects (react-dom_client.js?v=c732e2ba:9993:11)
    at reconnectPassiveEffects (react-dom_client.js?v=c732e2ba:10052:13)
    at recursivelyTraverseReconnectPassiveEffects (react-dom_client.js?v=c732e2ba:9993:11)
    at reconnectPassiveEffects (react-dom_client.js?v=c732e2ba:10052:13)Understand this error
react-dom_client.js?v=c732e2ba:6227 An error occurred in the <Minesweeper> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

Prompt 3

Keep the UI the same and the AI working. The AI is not going all the way through the game. It only makes a few moves and then stops.


Make sure the game does not restart when the AI is playing. Only when manually reset. Make sure the stste changes are not going to restart the game.

Something with the AI is causing the game to regenerate after each AI move so the game just keeps restarting in a loop

Building a Classic with Modern Tools

The AI Minesweeper project is built using React 19 and Vite, providing a fast, responsive gaming experience. The application is structured around three main components:

  1. MinesweeperGame: The central component that manages the game state, board initialization, and coordinates interactions between the UI and the AI solver.

  2. Minesweeper: Handles the visual representation of the game board, rendering cells, flags, and mine indicators.

  3. MinesweeperAI: Contains the logic for the AI solver, including algorithms for identifying safe moves and making educated guesses when necessary.

Game Mechanics

The implementation follows the classic Minesweeper rules:

  • The first click is always safe, with mines placed after the initial move
  • Left-clicking reveals a cell; if it contains a mine, the game is lost
  • Right-clicking toggles a flag on an unrevealed cell
  • Numbers indicate how many mines are adjacent to a revealed cell
  • Revealing a cell with zero adjacent mines automatically reveals its neighbors
  • The game is won when all non-mine cells are revealed

AI Solver Implementation

The AI solver is the highlight of this project, employing several strategies to navigate the minefield:

  1. Basic Strategy: The AI first looks for obvious safe moves by analyzing revealed cells and their neighboring mine counts.

  2. Pattern Recognition: When a cell has exactly as many flags around it as its number indicates, all other unrevealed neighbors are safe to click.

  3. Flag Placement: When a cell has exactly as many unrevealed neighbors as its number indicates, all those neighbors must contain mines and can be flagged.

  4. Educated Guessing: When no deterministic moves are available, the AI makes an educated guess, preferring cells in the middle of the board over edges and corners, as these statistically have a lower probability of containing mines.

  5. Persistence: The AI continues making moves until the game is either won or lost, with built-in retry mechanisms to prevent premature stopping.

Overcoming Technical Challenges

During development, several technical challenges had to be addressed:

State Management

One of the most significant challenges was managing the game state properly to prevent unnecessary resets during AI play. This was solved by:

  • Using React refs to hold the current board and game state, preventing unnecessary re-renders
  • Implementing deep cloning for board updates to ensure immutability
  • Carefully controlling when the board is reinitialized to avoid disrupting ongoing games

Circular Dependencies

The AI solver initially suffered from circular dependencies between its core functions:

// Problem: Functions referencing each other before definition
const runAIStep = () => {
  // Uses stopAI before it's defined
  if (gameState === 'lost') stopAI();
  // ...
};

const stopAI = () => {
  // Uses runAIStep's timer reference
  clearTimeout(aiTimerRef.current);
};

This was resolved by:

  • Reordering function definitions
  • Using React's useRef to store function references
  • Implementing useCallback to ensure stable function references
  • Adding useEffect hooks to update refs when dependencies change

AI Reliability

Initially, the AI would sometimes stop prematurely or cause the game to restart in a loop. These issues were fixed by:

  • Adding explicit checks for unrevealed cells before stopping
  • Implementing retry logic with delays when no moves are found
  • Using refs to avoid stale closures in asynchronous operations
  • Carefully managing the game state to prevent unwanted resets

Conclusion

The AI Minesweeper project demonstrates how a classic game can be enhanced with modern AI capabilities. Through just three prompts, we were able to create not only a fully functional Minesweeper game but also an intelligent solver that can tackle puzzles of varying difficulty.

The project showcases effective use of React hooks, asynchronous programming, and logical algorithms. The AI solver's ability to make decisions based on available information mirrors human problem-solving strategies, making it both educational and entertaining to watch in action.

Whether you're a Minesweeper enthusiast looking to learn new strategies or a developer interested in game AI implementation, this project offers valuable insights into both classic game development and modern AI techniques.