14-15 Puzzle con angular,jquery y Javascript

Zheiwander #1 Ene '15

Tengo que hacer un puzzle de 9 piezas y he llegado al punto en el que deberia mezclar las piezas,pero soy incapaz de encontrar una solucion.Pego el codigo a continuacion para ver si surje alguna sugerencia.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="puzzleBuilder" xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Puzzle</title>
	<link rel="shortcut icon" HREF="images/logo.jpg"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
    <script src="js/frameWorks/angular/angular.min.js" type="text/javascript" xml:space="preserve"></script>
	<script src="js/frameWorks/jQuery/jQuery.js" type="text/javascript" xml:space="preserve"></script>
	<script src="js/control/index.js" type="text/javascript" xml:space="preserve"></script>
	<script src="js/control/generalFunctions.js" type="text/javascript" xml:space="preserve"></script>
  </head>
  <body class="container" ng-controller="puzzleController as puzzle" ng-init="puzzle.loadPuzzle()">
    <div class="imageDiv">
		<table-images>
		</table-images>	
    </div>
  </body>
</html>

JS/Angular/Jquery

(function (){
	var puzzleBuilder = angular.module("puzzleBuilder",[]);
	
puzzleBuilder.controller("puzzleController",function (){
	 
	var filesNumber=3;
	var colsNumber=3;
	var tileCount=9;
	var route="/images";
	var prefix="imagen";
	var extension=".jpeg";
	
	this.imagesArray=new Array();
	this.loadPuzzle=function(){	
		var id=$(this).attr('id');
		var arrayNumeros=new Array();
				
		for (var i=0;i<=8;i++){
			var numeroNuevo= aleatorio(0, 8,arrayNumeros);
			arrayNumeros.push(numeroNuevo);
		}
		
		var imagesArrayRow1=new Array('images/imagen00.jpeg','images/imagen01.jpeg','images/imagen02.jpeg');
		var imagesArrayRow2=new Array('images/imagen10.jpeg','images/imagen11.jpeg','images/imagen12.jpeg');
		var imagesArrayRow3=new Array('images/imagen20.jpeg','images/imagen21.jpeg','images/imagen22.jpeg');
		this.imagesArray=new Array(imagesArrayRow1,imagesArrayRow2,imagesArrayRow3);
	
	} 		
});

puzzleBuilder.directive("tableImages",function(){
	return {
	  restrict: 'E',
	  templateUrl:"templates/table-images.html"		  
	};
});
})();

Template Angular

	<table id='imagesTable' border=1px>
		<tr ng-repeat='imagesRow in puzzle.imagesArray'>
			<td id='{{$parent.$index}}{{$index}}' ng-repeat='imagesHeader in imagesRow'>
			<img src="{{imagesHeader}}"/>
			</td>
		</tr>
	</table>

Funciones Generales

function aleatorio(min,max,usados){
	var repe = true;
	 
while (repe){  
	var num= Math.floor(Math.random()*(max-min+1))+min; 
	repe= repetido(num,usados);	
}

return num; 
} 
function repetido(num,usados){ 
	var repe= false; 
	for (i=0; i<usados.length; i++){ 
		if (num == usados[i]){ 
			repe = true; 
		} 
	} 
	
return repe; 	
}

14-15 Puzzle con angular,jquery y Javascript

Usuarios habituales

Tags