Puzzle con Mouse en vez de Teclado

• 0
  Jojo Lines
  25/06/2017 00:54
  Hola, mediante un curso realicé un juego de puzzle en javascript para el navegador, pero me gustaría poder jugarlo con el mouse en vez de teclado.
  
  Se trata de un puzzle de 8 imágenes (y 1 adicional vacía donde se mueven las otras) que para ganarlo hay que formar la imagen completa. Funciona todo correctamente, salvo que me gustaría clickear en una pieza y que se mueva de ser posible, en vez de utilizar el teclado.
  
  Desde ya, muchas gracias.
  
  Dejo el código JavaScript aquí:
  
  var grilla = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
  ];
  var posicionVacia = {
  fila:2,
  columna:2
  };
  function chequearSiGano(){
  return grillaOrdenada();
  }
  function grillaOrdenada(){
  var cantidadFilas = grilla.length;
  var cantidadColumnas = grilla[0].length;
  var ultimoValorVisto = 0;
  var valorActual = 0;
  for(var fila=0; fila < cantidadFilas; fila++){
  for(var columna=0; columna < cantidadColumnas; columna++){
        valorActual = grilla[fila][columna]
        if(valorActual < ultimoValorVisto) return false;
        ultimoValorVisto = valorActual;
  }
  }
  return true;
  }
  function intercambiarPosiciones(fila1, columna1, fila2, columna2){
  var pieza1 = grilla[fila1][columna1];
  var pieza2 = grilla[fila2][columna2];
  grilla[fila1][columna1] = pieza2;
  grilla[fila2][columna2] = pieza1;
  var elementoPieza1 = document.getElementById('pieza'+pieza1);
  var elementoPieza2 = document.getElementById('pieza'+pieza2);
  var padre = elementoPieza1.parentNode;
  var clonElemento1 = elementoPieza1.cloneNode(true);
  var clonElemento2 = elementoPieza2.cloneNode(true);
  padre.replaceChild(clonElemento1, elementoPieza2);
  padre.replaceChild(clonElemento2, elementoPieza1);
  }
  function actualizarposicionVacia(nuevaFila,nuevaColumna){
  posicionVacia.fila = nuevaFila;
  posicionVacia.columna = nuevaColumna;
  }
  function posicionValida(fila, columna){
  return (fila >= 0 && fila <= 2) && (columna >= 0 && columna <= 2);
  }
  function moverEnDireccion(direccion){
  var nuevaFilaPiezaBlanca;
  var nuevaColumnaPiezaBlanca;
  if(direccion == 40){
  nuevaFilaPiezaBlanca = posicionVacia.fila-1;
  nuevaColumnaPiezaBlanca = posicionVacia.columna;
  }
  else if (direccion == 38) {
  nuevaFilaPiezaBlanca = posicionVacia.fila+1;
  nuevaColumnaPiezaBlanca = posicionVacia.columna;
  }
  else if (direccion == 39) {
  nuevaFilaPiezaBlanca = posicionVacia.fila;
  nuevaColumnaPiezaBlanca = posicionVacia.columna-1;
  }
  else if (direccion == 37) {
  nuevaFilaPiezaBlanca = posicionVacia.fila;
  nuevaColumnaPiezaBlanca = posicionVacia.columna+1;
  }
  if (posicionValida(nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca)){
  intercambiarPosiciones(posicionVacia.fila, posicionVacia.columna,
  nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca);
  actualizarposicionVacia(nuevaFilaPiezaBlanca, nuevaColumnaPiezaBlanca);
  }
  }
  function mezclarPiezas(veces){
  if(veces<=0){return;}
  var direcciones = [40, 38, 39, 37];
  var direccion = direcciones[Math.floor(Math.random()*direcciones.length)];
  moverEnDireccion(direccion);
  setTimeout(function(){
  mezclarPiezas(veces-1);
  },100);
  }
  function capturarTeclas(){
  document.body.onkeydown = (function(evento) {
  moverEnDireccion(evento.which);
  var gano = chequearSiGano();
  if(gano) alert('¡Ganaste!');
  evento.preventDefault();
  })
  }
  function iniciar(){
  mezclarPiezas(60);
  capturarTeclas();
  }
  iniciar();

  Responder

  Responder

  Para comentar tienes que estar registrado. Registrate

  Publicar comentario