dev.enekoalonso.com » eight http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 Solving the 8 Queen Puzzle in Javascript http://dev.enekoalonso.com/2009/01/02/solving-the-8-queen-puzzle-in-javascript/ http://dev.enekoalonso.com/2009/01/02/solving-the-8-queen-puzzle-in-javascript/#comments Fri, 02 Jan 2009 21:41:16 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=225 Eight Queens is a classic problem which consist on being able to place 8 queens on a chess board without leaving them in position of eating each other. More info on Wikipedia.

8 Queens
See the 8 Queens demo in action.

On this demo I have created 3 different Mootools classes: ChessBoard, Piece and EightQueen. ChessBoard and Piece are generic classes which I plan to reuse in other demos. EightQueen is the brain of the demo and it inherits from Thread, the class I use for javascript animations. Check the source code at the end of the post.

Solving the problem

The easiest way to solve this problem is using backtracking. Once we find we have 2 queens on eating position, we can cancel that path. Since there can be only one Queen per column, we create an array and store the row on each position. Once the array has 8 items (columns) the problem will be solved.

If we can’t find a valid position for the current column, we need to remove the previous column Queen and add it again in the next row. If there are no more rows, we remove the previous column Queen and so on.

Testing if a position is valid: my solution

So the process to resolve the 8 Queen puzzle is easy after all. But we still need to figure out how to check if a position for a Queen is valid or not. I didn’t want to copy this logic from any other demo or site (I bet there are hundreds of ways to do this). I wanted to think my own way, and this is what I came up:

  1. validPosition: function(position) {
  2.   if (this.queens.indexOf(position.y) != -1) return false;
  3.   for (var index=1, length=this.queens.length; index<=length; index++) {
  4.     var queenY = this.queens[index-1];
  5.     if (position.y + (position.x-index) == queenY) return false;
  6.     if (position.y – (position.x-index) == queenY) return false;
  7.   };
  8.   return true;
  9. }

First, we know only one Queen can sit on a column, but also only one Queen can sit on a row. So we check if there is already a Queen in the same row (position.y). If there is one, the position is not valid.

Then, we need to check the diagonals. Queens can move on 45° diagonals. This is, the number of squares the Queen moves is the same in both horizontal and vertical directions. So a position will be invalid if there is a Queen one column away and one row away, or two columns away and two rows away, etc. With a simple equation we can check this. We need to do it twice, since it can be one row before or after. We don’t need to check the columns on the right because we know there are no Queens placed on that side yet (on this demo I am placing Queens from left to right).

Source code

  1. var ChessBoard = new Class({
  2.   pieces: [],
  3.  
  4.   initialize: function(container) {
  5.     this.container = container;
  6.     this.element = new Element('div', {'class': 'board'});
  7.     for (var row=8; row>0; row–) {
  8.       for (var col=1; col<9; col++) {
  9.         var square = new Element('div', {'class': 'square'});
  10.         square.id = "square" + String.fromCharCode(96+col) + row;
  11.         square.addClass(this.isDarkSquare(row,col)?'dark':'light');
  12.         this.element.grab(square);
  13.       }
  14.     }
  15.     this.container.grab(this.element);
  16.   },
  17.  
  18.   isDarkSquare: function(row,col) {
  19.     return ((row%2==0 && col%2==0) || (row%2==1 && col%2==1));
  20.   },
  21.  
  22.   addPiece: function(options) {
  23.     var piece = new Piece(options);
  24.     this.pieces.push(piece);
  25.     this.element.grab(piece.element);
  26.   },
  27.  
  28.   removePiece: function(position) {
  29.     var piece;
  30.     $A(this.pieces).each(function(item) {
  31.       if (item.square.x == position.x && item.square.y == position.y)
  32.         piece = item;
  33.     });
  34.     $A(this.pieces).erase(piece);
  35.     piece.destroy();
  36.   },
  37.  
  38.   removeAll: function() {
  39.     while (this.pieces.length > 0) {
  40.       var piece = this.pieces[this.pieces.length-1];
  41.       piece.destroy();
  42.       this.pieces.length–;
  43.     }
  44.   }
  45. });
  46.  
  47.  
  48. var Piece = new Class({
  49.   Extends: Sprite,
  50.   square: {col:1, row:1},
  51.  
  52.   initialize: function(options) {
  53.     this.options.size = {x:32,y:32};
  54.     this.parent(options);
  55.     this.setFigurine();
  56.     this.moveTo(this.options.square);
  57.   },
  58.  
  59.   setFigurine: function() {
  60.     this.setImage('media/images/icons/chess/'+
  61.             this.options.color + '_' +
  62.             this.options.kind + '_32.png');
  63.   },
  64.  
  65.   moveTo: function(position) {
  66.     if (typeof position == 'string') {
  67.       var parts = position.split("");
  68.       parts[0] = parts[0].charCodeAt(0) – 96;
  69.       this.square.x = parts[1];
  70.       this.square.y = parts[0];
  71.     }
  72.     else if (position instanceof Object) {
  73.       this.square = position;
  74.     }
  75.  
  76.     this.options.position.x = ((this.square.x-1) * 38) + 3;
  77.     this.options.position.y = ((8-this.square.y) * 38) + 3;
  78.     this.animate(this);
  79.   }
  80. });
  81.  
  82.  
  83. var EightQueens = new Class({
  84.   Extends: Thread,
  85.   queens: [],
  86.  
  87.   initialize: function(options) {
  88.     this.parent(options);
  89.     this.board = new ChessBoard($('content'));
  90.     this.currentRow = Random.get(1,8);
  91.     this.logbox = new Element('div', {'class':'log'}).inject($('content'));
  92.  
  93.     this.chkLog = $('chk-log');
  94.  
  95.     $('btn-restart').addEvent('click', function(){
  96.       this.restart();
  97.     }.bind(this));
  98.   },
  99.  
  100.   execute: function() {
  101.     this.addQueen();
  102.     if (this.queens.length == 8) {
  103.       this.stop();
  104.       this.log('Done.');
  105.     }
  106.   },
  107.  
  108.   addQueen: function() {
  109.     var queenAdded = false;
  110.    
  111.     for (var row=this.currentRow; row<=8; row++) {
  112.       var position = {x:this.queens.length+1, y:row};
  113.  
  114.       if (this.validPosition(position)) {
  115.         this.addToBoard(position);
  116.         queenAdded = true;
  117.         this.currentRow = 1;
  118.         break;
  119.       }
  120.     }
  121.    
  122.     if (!queenAdded) {
  123.       this.currentRow = this.queens[this.queens.length-1] + 1;
  124.       this.board.removePiece({x:this.queens.length,y:this.queens[this.queens.length-1]});
  125.       this.queens.length -= 1;
  126.       if (this.queens.length == 0) this.currentRow = Random.get(1,8);
  127.     }
  128.   },
  129.  
  130.   validPosition: function(position) {
  131.     this.log('Testing position: ' + position.x + ',' + position.y);
  132.     if (this.queens.indexOf(position.y) != -1) return false;
  133.     for (var index=1, l=this.queens.length; index<=l; index++) {
  134.       var queenY = this.queens[index-1];
  135.       if (position.y + (position.x-index) == queenY) return false;
  136.       if (position.y – (position.x-index) == queenY) return false;
  137.     };
  138.     return true;
  139.   },
  140.  
  141.   addToBoard: function(position) {
  142.     this.log('Queen added: ' + position.x + ',' + position.y +' – '+ this.queens.toString());
  143.     this.queens.push(position.y);
  144.     this.board.addPiece({kind:'Q', square:position, color:'Yellow'});
  145.   },
  146.  
  147.   log: function(text) {
  148.     if (!this.chkLog.get('checked')) return;
  149.     var p = new Element('p', {'text': text});
  150.     this.logbox.grab(p);
  151.     this.logbox.scrollTop = p.getPosition(this.logbox).y – 296;
  152.   },
  153.  
  154.   restart: function() {
  155.     this.stop();
  156.     this.queens.length = 0;
  157.     this.board.removeAll();
  158.     this.currentRow = Random.get(1,8);
  159.     this.options.interval = $('field-interval').get('value');
  160.     this.logbox.empty();
  161.     this.start();
  162.   }
  163.  
  164. });
  165.  
  166. window.addEvent('domready', function() {
  167.   new EightQueens({interval: $('field-interval').get('value'), autostart: true});
  168. });

Enjoy!

Related Posts:

]]> http://dev.enekoalonso.com/2009/01/02/solving-the-8-queen-puzzle-in-javascript/feed/ 1