jquery实现数独小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现数独小游戏代码，一个难题是9X9格的细胞，每一个可能包含从1-9的数字。我们的目标是，以填补空白，从1到9的数字，使每行，列和所有的3x3细胞地区目前所有的数字1到9
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
H1 { 
    background:black;
    color:white;
    margin:0px 0px 2px 0px;
    font-size:20px;
    padding:2px 1px 5px 1px;
    text-align:center;    
}

body {
    font-family:verdana,helvetica,arial,sans-serif;
    border:0px; margin:0px; padding:0px;
        
    background:url(
        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIUlEQVQYV2N89urtfwYiACNIoZSYMCMhtaMK8YYQ0cEDAG5yJ8eLRhTfAAAAAElFTkSuQmCC
    ) repeat;
}

/* board */
.sudoku_board {
    margin:6px auto;
  
    overflow: hidden;
    
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    
    box-shadow: 0px 0px 5px 5px #bdc3c7;
}

.sudoku_board .cell {    
    width:11.11%;    
    display: inline-block;    
    float:left;
    cursor:pointer;    
    text-align: center;
    overflow: hidden;  
    
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;
    
    box-shadow: 0px 0px 0px 1px #bdc3c7;
  
    background:white;
}

.sudoku_board .cell.border_h {
    box-shadow: 0px 0px 0px 1px #bdc3c7, inset 0px -2px 0 0 #34495e;    
}

.sudoku_board .cell.border_v {
    box-shadow: 0px 0px 0px 1px #bdc3c7, inset -2px 0 0 #34495e;
}

.sudoku_board .cell.border_h.border_v {
    box-shadow: 0px 0px 0px 1px #bdc3c7, inset -2px 0 0 black, inset 0px -2px 0 black;
}

.sudoku_board .cell span {
    color:#2c3e50;
    font-size:14px;
    text-align:middle;    
}

.sudoku_board .cell.selected, .sudoku_board .cell.selected.fix {
    background:#FFE;    
}

.sudoku_board .cell.selected.current {
    position:relative;
    background: #3498db;
    font-weight:bold;
    box-shadow: 0px 0px 3px 3px #bdc3c7;
}

.sudoku_board .cell.selected.current span {
    color:white;
}

.sudoku_board .cell.selected.group {
    color:blue;    
}

.sudoku_board .cell span.samevalue, .sudoku_board .cell.fix span.samevalue {
    font-weight:bold;  
    color:#3498db;
}

.sudoku_board .cell.notvalid, .sudoku_board .cell.selected.notvalid{
    font-weight:bold;
    color:white;;
    background:#e74c3c;
}

.sudoku_board .cell.fix {
    background:#ecf0f1;
    cursor:not-allowed;
}

.sudoku_board .cell.fix span {
  color:#7f8c8d;
}

.sudoku_board .cell .solution {
  font-size:10px;
  color:#d35400;
}

.sudoku_board .cell .note {
    color:#bdc3c7;    
    width:50%;    
    height:50%;
    display: inline-block;    
    float:left;
    text-align:center;
    font-size:14px;
  
    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
}

.gameover_container .gameover {
    color:white;
    font-weight:bold;
	    text-align:center; 
    
    display:block;
    position:absolute;       
    width:90%;    
    padding:10px;
    
    box-shadow: 0px 0px 5px 5px #bdc3c7;
}


.restart {
  background:#7F8C8D;
  color:#ecf0f1;
}

/* console */
.board_console_container, .gameover_container {
    background-color: rgba(127, 140, 141, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
     -webkit-user-select: none;  
     -moz-user-select: none;    
     -ms-user-select: none;      
     user-select: none;
}

.board_console {
    display:block;
    position:absolute;        
    width:50%;        
    color:white;
    background-color: rgba(127, 140, 141, 0.7);
    box-shadow: 0px 0px 5px 5px #bdc3c7;
}

.board_console .num {
    width:33.33%;    
    color:#2c3e50;    
    padding: 1px;
    display: inline-block;    
    font-weight:bold;
    font-size:24px;
    text-align: center;    
    cursor:pointer;
    
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	    box-sizing: border-box;
    
    box-shadow: 0px 0px 0px 1px #bdc3c7;
}


.board_console .num:hover {
    color:white;
    background:#f1c40f;
}

.board_console .num.remove {
    width:66.66%;    
}

.board_console .num.note {
    background:#95a5a6;
    color:#ecf0f1;
}

.board_console .num.note:hover {
    background:#95a5a6;
    color:#f1c40f;
}

.board_console .num.selected {
    background:#f1c40f;
    box-shadow: 0px 0px 3px 3px #bdc3c7;
}

.board_console .num.note.selected {
    background:#f1c40f;  
    box-shadow: 0px 0px 3px 3px #bdc3c7;
}

.board_console .num.note.selected:hover {
  color:white;
}

.board_console .num.no:hover {
    color:white;
    cursor:not-allowed;
}

.board_console .num.remove:hover {
    color:white;
    background:#c0392b;
}

.statistics {
    text-align:center;    
}

#sudoku_menu {
    background-color: black;
    position: absolute;
    z-index:2;
    width: 100%;
    height: 100%;
    left: -100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#sudoku_menu ul {
   margin: 0;
   padding: 100px 0px 0px 0px;
   list-style: none;
}

#sudoku_menu ul li{
  margin: 0px 50px;
}

#sudoku_menu ul li a {
  text-align:center;
  padding: 15px 20px;
  font-size: 28px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #2c3e50;
}

#sudoku_menu.open-sidebar {
  left:0px;
}

#sidebar-toggle {
    z-index:3;
    background: #bdc3c7;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 22px 18px;
    float: left;
}

#sidebar-toggle .bar{
    display: block;
    width: 28px;
    margin-bottom: 4px;
    height: 4px;
    background-color: #f0f0f0;
    border-radius: 1px;   
}

#sidebar-toggle .bar:last-child{
     margin-bottom: 0;   
}

/*Responsive Stuff*/

@media all and (orientation:portrait) and (min-width: 640px){
    h1 { font-size:50px; }
    .statistics { font-size:30px; }    
    .sudoku_board .cell span { font-size:60px; }    
    .board_console .num { font-size:60px; }
}

@media all and (orientation:landscape) and (min-height: 640px){
    h1 { font-size:50px; }
    .statistics { font-size:30px; }
    .sudoku_board .cell span { font-size:50px; }
    .board_console .num { font-size:50px; }
}

@media all and (orientation:portrait) and (max-width: 1000px){
    .sudoku_board .cell span { font-size:30px; }   
}

@media all and (orientation:portrait) and (max-width: 640px){
	.sudoku_board .cell span { font-size:24px; }
  .sudoku_board .cell .note { font-size:10px; }
}

@media all and (orientation:portrait) and (max-width: 470px){
	.sudoku_board .cell span { font-size:16px; }
.sudoku_board .cell .note { font-size:8px; }
}

@media all and (orientation:portrait) and (max-width: 320px){
	.sudoku_board .cell span { font-size:12px; }
.sudoku_board .cell .note { font-size:8px; }
}

@media all and (orientation:portrait) and  (max-width: 240px){
	.sudoku_board .cell span { font-size:10px; }   
}
</style>



</head>

<body >
  <a href="#" id="sidebar-toggle">
   <span class="bar"></span>
   <span class="bar"></span>
   <span class="bar"></span>
</a>

<h1 id="sudoku_title">SUDOKU</h1>

<div id="sudoku_menu">
  <ul>
    <li><a class="restart" href="#">New Game</a></li>
    <li></li>
  </ul>
</div>

<div id="sudoku_container"></div>
<div>
    一个难题是9X9格的细胞，每一个可能包含从1-9的数字。我们的目标是，以填补空白，从1到9的数字，使每行，列和所有的3x3细胞地区目前所有的数字1到9。

试着每天解决一些难题，让您的大脑在良好的状态！
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script  >
/* Work in progress */

/**
Sudoku game
*/
function Sudoku(params) {
  var t = this;

  this.INIT = 0;
  this.RUNNING = 1;
  this.END = 2;

  this.id = params.id || 'sudoku_container';
  this.displaySolution = params.displaySolution || 0;
  this.displaySolutionOnly = params.displaySolutionOnly || 0;
  this.displayTitle = params.displayTitle || 0;
  this.highlight = params.highlight || 0;
  this.fixCellsNr = params.fixCellsNr || 32;
  this.n = 3;
  this.nn = this.n * this.n;
  this.cellsNr = this.nn * this.nn;

  if (this.fixCellsNr < 10) this.fixCellsNr = 10;
  if (this.fixCellsNr > 70) this.fixCellsNr = 70;

  this.init();

  //counter    
  setInterval(function () {
    t.timer();
  }, 1000);

  return this;
}

Sudoku.prototype.init = function () {
  this.status = this.INIT;
  this.cellsComplete = 0;
  this.board = [];
  this.boardSolution = [];
  this.cell = null;
  this.markNotes = 0;
  this.secondsElapsed = 0;

  if (this.displayTitle == 0) {
    $('#sudoku_title').hide();
  }

  this.board = this.boardGenerator(this.n, this.fixCellsNr);

  return this;
};

Sudoku.prototype.timer = function () {
  if (this.status === this.RUNNING) {
    this.secondsElapsed++;
    $('.time').text('' + this.secondsElapsed);
  }
};

/**
Shuffle array
*/
Sudoku.prototype.shuffle = function (array) {
  var currentIndex = array.length,
  temporaryValue = 0,
  randomIndex = 0;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
};

/**
Generate the sudoku board
*/
Sudoku.prototype.boardGenerator = function (n, fixCellsNr) {
  var matrix_fields = [],
  index = 0,
  i = 0,
  j = 0,
  j_start = 0,
  j_stop = 0;

  //generate solution
  this.boardSolution = [];

  //shuffle matrix indexes
  for (i = 0; i < this.nn; i++) {
    matrix_fields[i] = i + 1;
  }

  //shuffle sudoku 'collors'
  matrix_fields = this.shuffle(matrix_fields);
  for (i = 0; i < n * n; i++) {
    for (j = 0; j < n * n; j++) {
      var value = Math.floor((i * n + i / n + j) % (n * n) + 1);
      this.boardSolution[index] = value;
      index++;
    }
  }

  //shuffle sudokus indexes of bands on horizontal and vertical
  var blank_indexes = [];
  for (i = 0; i < this.n; i++) {
    blank_indexes[i] = i + 1;
  }


  //shuffle sudokus bands horizontal
  var bands_horizontal_indexes = this.shuffle(blank_indexes);
  var board_solution_tmp = [];
  index = 0;
  for (i = 0; i < bands_horizontal_indexes.length; i++) {
    j_start = (bands_horizontal_indexes[i] - 1) * this.n * this.nn;
    j_stop = bands_horizontal_indexes[i] * this.n * this.nn;

    for (j = j_start; j < j_stop; j++) {
      board_solution_tmp[index] = this.boardSolution[j];
      index++;
    }
  }
  this.boardSolution = board_solution_tmp;


  //shuffle sudokus bands vertical
  var bands_vertical_indexes = this.shuffle(blank_indexes);
  board_solution_tmp = [];
  index = 0;
  for (k = 0; k < this.nn; k++) {
    for (i = 0; i < this.n; i++) {
      j_start = (bands_vertical_indexes[i] - 1) * this.n;
      j_stop = bands_vertical_indexes[i] * this.n;

      for (j = j_start; j < j_stop; j++) {
        board_solution_tmp[index] = this.boardSolution[j + k * this.nn];
        index++;
      }
    }
  }
  this.boardSolution = board_solution_tmp;

  //shuffle sudokus lines on each bands horizontal
  //TO DO

  //shuffle sudokus columns on each bands vertical
  //TO DO

  //board init
  var board_indexes = [],
  board_init = [];

  //shuffle board indexes and cut empty cells    
  for (i = 0; i < this.boardSolution.length; i++) {
    board_indexes[i] = i;
    board_init[i] = 0;
  }

  board_indexes = this.shuffle(board_indexes);
  board_indexes = board_indexes.slice(0, this.fixCellsNr);

  //build the init board    
  for (i = 0; i < board_indexes.length; i++) {
    board_init[board_indexes[i]] = this.boardSolution[board_indexes[i]];
    if (parseInt(board_init[board_indexes[i]]) > 0) {
      this.cellsComplete++;
    }
  }

  return this.displaySolutionOnly ? this.boardSolution : board_init;
};

/**
Draw sudoku board in the specified container
*/
Sudoku.prototype.drawBoard = function () {
  var index = 0,
  position = { x: 0, y: 0 },
  group_position = { x: 0, y: 0 };

  var sudoku_board = $('<div></div>').addClass('sudoku_board');
  var sudoku_statistics = $('<div></div>').
  addClass('statistics').
  html('<b>Cells:</b> <span class="cells_complete">' + this.cellsComplete + '/' + this.cellsNr + '</span> <b>Time:</b> <span class="time">' + this.secondsElapsed + '</span>');

  $('#' + this.id).empty();

  //draw board 
  for (i = 0; i < this.nn; i++) {
    for (j = 0; j < this.nn; j++) {
      position = { x: i + 1, y: j + 1 };
      group_position = { x: Math.floor((position.x - 1) / this.n), y: Math.floor((position.y - 1) / this.n) };

      var value = this.board[index] > 0 ? this.board[index] : '',
      value_solution = this.boardSolution[index] > 0 ? this.boardSolution[index] : '',
      cell = $('<div></div>').
      addClass('cell').
      attr('x', position.x).
      attr('y', position.y).
      attr('gr', group_position.x + '' + group_position.y).
      html('<span>' + value + '</span>');

      if (this.displaySolution) {
        $('<span class="solution">(' + value_solution + ')</span>').appendTo(cell);
      }

      if (value > 0) {
        cell.addClass('fix');
      }

      if (position.x % this.n .........完整代码请登录后点击上方下载按钮下载查看