MooSweeper 1.0.1

Costumizable Minesweeper clone.


Tim Baumann
Current version
GitHub Issues



  • core/1.2.4: *

How to use


var mooSweeper = new MooSweeper(target[, options]);


  1. target - (mixed) The element or the string id of the element the MooSweeper will be injected in.
  2. options - (object, optional) The options object described below:


  • where - (string) where to inject the MooSweeper (like (Element.inject)[]). Defaults to 'bottom'.
  • preset - (string) One of the presets easy, medium (the default) or hard.
  • rows - (number) This property will overwrite the preset.
  • cols - (number) This property will overwrite the preset.
  • minesContingent - (number) Must be between 0 and 1. Overwrites the preset. If you have a 10×10 field and a minesContingent of 0.13, there are 13 mines.
  • caption - (string) Pass an empty string if you don't want a caption. Defaults to 'MooSweeper'.
  • countdown - (number) Pass the number of seconds the user to finish the game. If 0 (the default), there will be no maximum time.
  • minimumTime - (bool) Whether to save the minimum time locally in a cookie and fire minimumtime events. Defaults to true.
  • css - (string) Can be CSS, the path to a CSS file or the name of a provided style. Defaults to 'Moo'.
  • symbols - (object) - The labels of cells in a specific state.
    • covered - (string) The label of a covered cell. Defaults to '?'.
    • marked - (string) The label of a marked cell. Defaults to '!'.
    • mine - (string) The label of a mine. Defaults to '·' (entity of •).
  • gameOptions - (object) Options of the bar with displays and buttons.
    • interface - (string) A string containing the names of game options in percent signs. Can contain html, too. Defaults to '<div class="third first">%minesLeft%</div><div class="third second">%smiley%</div><div class="third last">%countdown%</div>', which makes the first game option left-aligned, the second centered and the third right-aligned.
    • where - (string) Can be 'top' (the default) or 'bottom'
    • smiley - (object) The labels of the smiley button in different states.
    • running - (string) Defaults to ':-)'.
    • won - (string) Defaults to ':-D'.
    • lost - (string) Defaults to 'X-('.
    • unsure - (string) When the user is clicking on a cell. Defaults to ':-O'.
    • status - (object) The labels of the status display.
    • running - (string) Defaults to 'Running'.
    • won - (string) Defaults to 'Won!'.
    • lost - (string) Defaults to 'Lost!'.
    • newGame - (string) The title of the button. Defaults to 'New Game'.

Game options


  • newGame - A button to start a new game
  • smiley - The smiley in the Windows minesweeper. You can click on it to start a new game.


  • status - Status text (e.g. "running").
  • cells - The number of cells.
  • mines - The number of mines on the field.
  • cellsLeft - How many cells you have to click on in order to clear the field. Updates.
  • minesLeft = Number of mines - number of marked cells.
  • time - number of seconds
  • countdown - Displays the number of seconds you have left.
  • minimumTime - Displays the personal minimum time.


  • onWin - (function) The function to execute when the user has won. Passed the number of seconds he it has taken to clear the field.
  • onLose - (function) The function to execute when the user has lost. Passed the reason (a string, 'mine' or 'time'). Defaults to function(reason) { if(reason == 'time') alert('Time\'s up!'); }.
  • onMinimumtime - (function) The function to execute when the user has archived a new minimum time. Passed the number of seconds. Defaults to function(time) { alert('New minimum time: '+time+' seconds'); }.
  • onNewgame - (function) The function to execute when a new game is started.


  • setCSS(css) - if you want to change the css during the game (have a look at the demo!)
  • newGame() - starts a new game
  • showMines() - will show all mines and, if game wasn't finished, fires the lose event
  • showAll() - shows all cells and, if game wasn't finished, fires the lose event


  • easy - { rows: 8, cols: 8, minesContingent: 0.16 } (64 cells, 10 mines)
  • medium - { rows: 16, cols: 16, minesContingent: 0.16 } (256 cells, 41 mines)
  • hard - { rows: 16, cols: 30, minesContingent: 0.21 } (480 cells, 101 mines)

Provided styles

  • Moo - Based on the style of the MooTools website
  • Dread - A dark, military style


Have a look at the DOM and the provided CSS files if you want to create your own style.


var mooSweeper = new MooSweeper(document.body, {
    onLose: function() {
        this.newGame(); // Automatically start new game
    where: 'top', // inject the element at the top
    caption: 'Minesweeper clone',
    css: 'Dread', // military style
    gameOptions: {
        interface: '&lt;center&gt;%newGame%&lt;/center&gt;' // only a button to start a new game

Have a look at the source code of the demo, too.



A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus