Ideas para mapa (trabajando con ajax)

Hiruma-Sama · #1 (**permalink**) 01/07/2010, 21:56

Buenas noches, que tal, vengo con la necesidad de que me abran la cabeza

El tema es asi, estoy armando una especie de juego por turnos, y usaria ajax para actualizar la pagina cada tantos segundos, ademas de que el juego seria por turnos, y los dos participantes (cada uno en su turno), moveria piezas como si fuese un ajedrez, ahora bien ...

EL MAPA, mi idea, es como dije, trabajar con ajax, no se nada de Flash, asique eso se descarta de antemano, por ejemplo, uso php, javascript, html, css, mysql, esas serian a priori mis herramientas, usando Json + ajax, me estaria manejando bien, para manejar los turnos y las actualizaciones.

Pero ... que uso para hacer mover una imagen de un 'casillero' a otro ??? armo una matriz, tipo tabla, con un fondo y voy moviendo imagenes ? como hacer para que se muevan y se vea fluido y no que desaparezca y aparezca en otro lado .... aaaah necesito ideas!!!

Desde ya, muchas gracias por su tiempo.

Tecna · #2 (**permalink**) 02/07/2010, 09:45

Buenas,

lo que quieres hacer es bastante complejo y laborioso, se puede hacer de varias formas, una podría ser arrastando y soltando la ficha con los eventos del raton onmouseup, onmousemove y onmousedown y necesitarías conocer al menos las coordenadas del ratón y de la ficha o la casilla con propiedades como offsetTop y clientX.

También podrías hacer una animación y controlarlo con el evento onclick en la casilla destino después de haber seleccionado la ficha que quieres mover, para esto tendrías que jugar con la posición inicial y final de la ficha y en función de cual sea mayor sumar o restar un pixel a las propiedades top y left, teniendo en cuenta todos los posibles movimientos y repetirlo hasta que ambas posiciones sean iguales. También es muy conveniente poner una pausa entre cada movimiento con setTimeout para que el movimiento sea mas natural y creible para el ojo. Lo más sencillo sería posicionar las fichas de forma absoluta respecto al tablero y guardar sus valores en un array, así puedes facilmente hacer los cálculos de los nuevos valores y tienes un punto de referencia fijo, el tablero, y lo aislas de posibles problemas que pudieran surgir si calculas las posiciones respecto a la ventana del navegador. Si entra en juego z-index la cosa se complica.

Hiruma-Sama · #3 (**permalink**) 02/07/2010, 19:23

el tema del mouse, es que yo en un principio, necesitaria moverme con el teclado, pero se pueden manejar los eventos de las teclas, pero veamos, por parte, la segunda idea, es la que me parece mas apta para lo que quiero hacer, pero no capte, como esquematisaria el mapa, que seria ? una matriz ??

Tecna · #4 (**permalink**) 05/07/2010, 10:08

Buenas,

como ya te dije lo mas sencillo sería hacer un array con las casillas. Suponiendo que tuvieras un tablero de 3 x 3 casillas, el array tendría 9 elementos (del 0 al 8), así podrías trabajar con ellos o también con un array de dos dimensiones donde la casilla[4] por ejemplo estaría en la en la posición [1,1]. En el css habría que posicionar las casillas y el tablero de forma absoluta pero si lo tienes en hojas de estilo externas además tendrás que redefinir los estilos en el javascript para poder acceder a ellos desde la propiedad style. También podrías calcular los valores en función de la posición que ocupe sabiendo el lado de la casilla, por ejemplo si cada casilla mide 50px de lado y la casilla[4] y hemos dicho que está en la fila 1 columna 1, el top seria 1*50 y el left 1*50.

Otra cosa muy a tener en cuenta es que debes guardar el valor devuelto por cada función que se ejecute con el evento onclick al pulsar en una casilla para poder compararlo con la siguiente y saber cuanto se tiene que mover la primera. Para ello mejor que variables globales es usar cierres.

Y luego ya sería el tema del movimiento, controlando las pausas entre movimientos y la propagación de eventos por ejemplo cuando se pulse de nuevo una primera casilla sin que haya terminado de moverse la anterior.

Te he hecho un pequeño ejemplo que funciona de como podrías empezar con un tablero de 3x3 y 50px de lado cada casilla.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
 
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Tablero para seleccionar casillas</title>
  <script type="text/javascript" src="script/fichero.js"></script>
  <link rel="stylesheet" href="css/fichero.css" type="text/css">
</head>
 
<body>
 
<div id="tablero">
  <div id="casilla-0"></div>
  <div id="casilla-1" class="c2"></div>
  <div id="casilla-2"></div>
  <div id="casilla-3"class="c2"></div>
  <div id="casilla-4"></div>
  <div id="casilla-5"class="c2"></div>
  <div id="casilla-6"></div>
  <div id="casilla-7"class="c2"></div>
  <div id="casilla-8"></div>
</div>
<p>pulsa en una casilla</p>
 
</body>
</html>

Código CSS:

Ver originaldiv {
  width: 50px;
  height: 50px;
  background: #ff0;
  position: absolute;
  top: 0;
  left: 0;
}
 
#tablero {
  width: 150px;
  height: 150px;
  top: 50px;
  left: 50px;
  border: 1px solid #00f;
}
 
.c2 { background: #00f; }

Código Javascript:

Ver original// ejemplo de persistencia de valores sin usar variables globales
// asociando los eventos por parejas
// bY Tecna 
 
// dado un tablero de nxn casillas seleccionamos dos haciendo click
// y guardamos sus posiciones para poder comparar 
 
var la = 50; // pixeles del lado de la casilla 
var n = 3; // numero de casillas en cada lado del tablero
 
function init()
{
  var tablero = document.getElementById('tablero');
  var casillas = tablero.getElementsByTagName('div');
 
   for (var i=0; i<n; ++i)
   {
       for (var j=0; j<n; ++j)
      {
        // asignamos los valores de las propiedades top y left 
        // para que esten disponibles con la propiedad style 
        var num = i*n + j;
        var top =  i*la + 'px';
        var left = j*la + 'px';
        casillas[num].style.top = top;
        casillas[num].style.left = left;
    
        // asignamos el evento inicial a cada casilla 
        asignaInit(casillas, casillas[num]);
      } 
   }
}
 
window.onload = init;
 
function asignaInit(casillas, casilla)
{
   casilla.onclick = function (e) {pulsarIni(casillas, casilla);};
}
 
function pulsarIni(casillas, casillaIni)
{
   // funcion que recoge los valores de la primera casilla y 
   // llama a la función genérica de asignar eventos 
    
   alert('Casilla Inicial: ' + casillaIni.id + '\npulse en otra casilla');
   var pulsarF = function (e) { pulsarFin(e, casillas, this, casillaIni); };
    
   asignar(pulsarF, casillas);
}
 
function asignar(cual, casillas)
{
   // función genérica para asignar eventos 
  for (var i=0; i<n; ++i)
  {
      for (var j=0; j<n; ++j)
     {
        var num = i*n + j;
        casillas[num].onclick = cual;
      }
   }
}
 
function pulsarFin(e, casillas, casillaFin, casillaIni)
{
   // función que recibe los valores de la primera casilla y obtiene 
   // los de la segunda, además reasigna los eventos para la primera casilla 
   var topI = casillaIni.style.top;
   var leftI = casillaIni.style.left;
   var topF = casillaFin.style.top;
   var leftF = casillaFin.style.left;
 
   var ini = 'Casilla Inicial: ' + casillaIni.id + ' | top: ' + topI + ', left: ' + leftI;
   var fin = 'Casilla Final: ' + casillaFin.id + ' | top: ' + topF + ', left: ' + leftF;
   alert(ini + '\n' + fin);
    
   var pulsarI = function (e) { pulsarIni(casillas, this); };
   asignar(pulsarI, casillas);
    
   // con los datos obtenidos de ambas casillas comparariamos las posiciones 
   //y llamariamos a la función encargada de mover la ficha de la 
   //casilla primera a la segunda. 
}