页面的head部分，需要先引入jQuery库，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>

接着设置好页面个元素的样式，由于样式内容较多，这里仅贴出部分代码：

#game-container {
  position: relative;
  left: calc(50% - 85px);
}

.window-wrapper-outer {
  border: 1px solid;
  border-color: #f1efe2 #716f64 #716f64 #f1efe2;
}

.window-wrapper-inner {
  border: 1px solid;
  border-color: #fff #aca899 #aca899 #fff;
}

.window-container {
  position: relative;
  background-color: #ece9d8;
  padding: 1px;
}

#custom-level-dialog {
  display: none;
  position: absolute;
  top: 30px;
  left: 15px;
  z-index: 3;
  width: 200px;
}

.title-bar {
  height: 25px;
  background: #3d95ff url("images/minesweeper.png") no-repeat;
  font-size: 0;
  line-height: 0;
}

#custom-title-bar {
  background-position: 0 -110px;
}

#custom-dialog-content {
  overflow: hidden;
  font: 12px 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  padding: 35px 15px;
}

#minesweeper-custom-fields {
  float: left;
}

#minesweeper-custom-fields p {
  clear: left;
  margin: 0;
  padding: 0;
  margin-bottom: 4px;
}

#minesweeper-custom-fields label,
#high-score-dialog label {
  float: left;
  width: 47px;
  padding-top: 3px;
}

.form-textbox {
  width: 35px;
  height: 20px;
  padding-top: 3px;
  border: 2px solid;
  border-color: #aca899 #fff #fff #aca899;
}

#minesweeper-custom-buttons {
  float: right;
}

.form-button {
  display: block;
  width: 60px;
  height: 25px;
  background: #ece9d8;
}

#minesweeper-ok-btn {
  margin-bottom: 18px;
}

#high-score-dialog {
  display: none;
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 4;
  width: 200px;
}

#high-score-dialog-content {
  overflow: hidden;
  font: 12px 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  padding: 10px;
}

#high-score-dialog h2 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

#high-score-dialog #high-score-name-label {
  width: 40px;
}

#high-score-name-textbox {
  width: 120px;
}

#submit-high-score-container {
  text-align: center;
}

#submit-high-score {
  width: auto;
}

页面的body部分，只需要设置好游戏的容器，其他的就交给javascript吧，代码如下：

<div id="game"><!--游戏内容--></div>

页面的底部，通过javascript来完成所有的操作内容，由于代码较多，这里仅贴出部分代码：

$(this.target).append('<div id="game-container"><div id="custom-level-dialog" class="window-wrapper-outer"><div class="window-wrapper-inner"><div class="window-container"><div id="custom-title-bar" class="title-bar"></div><div id="custom-dialog-content"><div id="minesweeper-custom-fields"><p><label>高度：</label><input type="text" id="minesweeper-custom-height" class="form-textbox"></p><p><label>宽度：</label><input type="text" id="minesweeper-custom-width" class="form-textbox"></p><p><label>雷数：</label><input type="text" id="minesweeper-custom-mines" class="form-textbox"></p></div><div id="minesweeper-custom-buttons"><input type="button" value="确定" id="minesweeper-ok-btn" class="form-button" /><input type="button" value="取消" id="minesweeper-cancel-btn" class="form-button" /></div></div></div></div></div><div id="high-score-dialog" class="window-wrapper-outer"><div class="window-wrapper-inner"><div class="window-container"><div id="high-score-dialog-content"><h2>High score!</h2></p><p><label id="high-score-name-label">Name:</label><input type="text" id="high-score-name-textbox" class="form-textbox" maxlength="20" /></p><p id="submit-high-score-container"><input type="button" value="Submit High Score" id="submit-high-score" class="form-button" /></p></div></div></div></div><div id="window-wrapper-outer" class="window-wrapper-outer"><div class="window-wrapper-inner"><div class="window-container"><div id="minesweeper-title-bar" class="title-bar"></div><div id="menu-link-container"><a id="menu-link" href="#">游戏</a></div><div id="minesweeper-board-wrapper"><ul id="menu"><li id="menu-new">新游戏</li><li class="menu-divider"></li><li id="menu-beginner" class="game-level checked">初级</li><li id="menu-intermediate" class="game-level">中级</li><li id="menu-expert" class="game-level">专家</li><li id="menu-custom" class="game-level">自定义</li><li class="menu-divider"></li><li id="menu-marks" class="checked">标记 (?)</li></ul><div id="minesweeper-header-wrapper"><div id="minesweeper-header-container"><div id="minesweeper-header"><div id="mine-count" class="numbers"><div id="mine-count-hundreds" class="t0"></div><div id="mine-count-tens" class="t1"></div><div id="mine-count-ones" class="t0"></div></div><div id="minesweeper-reset-button" class="face-smile"></div><div id="timer" class="numbers"><div id="timer-hundreds" class="t0"></div><div id="timer-tens" class="t0"></div><div id="timer-ones" class="t0"></div></div></div></div></div><div id="minefield"></div></div></div></div></div></div>');

// capture special DOM elements that will be used
this.$windowWrapperOuter =  $('#window-wrapper-outer');
this.$resetButton =         $('#minesweeper-reset-button');
this.$mineCountOnes =       $('#mine-count-ones');
this.$mineCountTens =       $('#mine-count-tens');
this.$mineCountHundreds =   $('#mine-count-hundreds');
this.$timerOnes =           $('#timer-ones');
this.$timerTens =           $('#timer-tens');
this.$timerHundreds =       $('#timer-hundreds');
this.$minefield =           $('#minefield');

var $menu =             $('#menu'),
    $menuLink =         $('#menu-link'),
    $menuNewGame =      $('#menu-new'),
    $menuBeginner =     $('#menu-beginner'),
    $menuIntermediate = $('#menu-intermediate'),
    $menuExpert =       $('#menu-expert'),
    $menuCustom =       $('#menu-custom'),
    $menuMarks =        $('#menu-marks'),
    $customDialog =     $('#custom-level-dialog'),
    $customWidthTxt =   $('#minesweeper-custom-width'),
    $customHeightTxt =  $('#minesweeper-custom-height'),
    $customMinesTxt =   $('#minesweeper-custom-mines'),
    $customOKBtn =      $('#minesweeper-ok-btn'),
    $customCancelBtn =  $('#minesweeper-cancel-btn');

/* BEGIN menu events */        
$(document.body).click(function(e){
    if ( !self.customDialogOpen ) {
        $menu.hide();
        $menuLink.removeClass('active');
    }
});

// combine all elements that when clicked should not hide menu
var $menuRelated = $menu.add( $menuLink ).add( $customDialog );

// prevent clicks on menu related elements from hiding menu
$menuRelated.bind('click', function(e) {
    e.stopPropagation();
});

// "Game" link toggles menu
$menuLink.bind('click', function(e) {
    $(this).toggleClass('active');
    $menu.toggle();
});

$menuNewGame.bind('click', function() {
    self.reset();
    $menu.hide();
    $menuLink.removeClass('active');
});

$menuBeginner.bind('click', function() {
    $('.game-level').removeClass('checked');
    $(this).addClass('checked');        
    self.newGame( 'beginner' );
    $menu.hide();
    $menuLink.removeClass('active');
});

$menuIntermediate.bind('click', function() {
    $('.game-level').removeClass('checked');
    $(this).addClass('checked');
    self.newGame( 'intermediate' );
    $menu.hide();
    $menuLink.removeClass('active');
});