Comunidad PHPeros
Lenguajes => JavaScript => Mensaje iniciado por: SoyJoaquin. en 27 de Agosto de 2011, 04:48:53 am
-
Buenas, como ya les dije, les prepare una nueva versión del build de baldosas que cree ya hace unos días.
La primera versión de dicho script tan solo se podían generar áreas "cuadradas", sin ningún tipo de dinamismo en baldosas. En esta versión he actualizado esa parte para poder colocar los tiles o baldosas en el lugar que desees bajo un array multidimensional para cargar el mapa del área.
Aquí les dejo el código:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
/*!
* Build de Baldosas en Espacios Isométricos - jQuery
*
* Copyright 2011, SoyJoaquin. (-Null-)
* Todos los derechos reservados.
* http://phperos.net
*
* Contacto:
* Email: hgcproductions@hotmail.com
* Skype: SoyJoaquin.
*
*/
var emX;
var emY;
var imagen;
var balH;
var balW;
var mapa = [[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,0,0,1,1,1],[1,1,1,0,0,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1]];
$(document).ready(function (){
emX = 150;
emY = 50;
imagen = "imagenes/baldosa.png";
balH = 32;
balW = 64;
$('#piso').css({
left: emX,
top: emY
});
loadBaldosa();
});
function loadBaldosa() {
var id = 0;
for(x=0;x<mapa.length;x++) {
for(y=0;y<mapa[x].length;y++) {
if(mapa[x][y] == 1){
id++;
$("#piso").append('<div id="'+id+'"><img src="'+imagen+'"></div>');
resultadoX = (x * (balW / 2)) - (y * (balW / 2)) + emX;
resultadoY = (x * (balH / 2)) + (y * (balH / 2)) + emY;
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
}
</script>
</head>
<body>
<div id="piso" style="position:absolute;"></div>
</body>
</html>
Saludos y espero que les sea de utilidad.
-
Bien pusiste un arreglo de baldosas(Mapa), yo creo que cuando tenga más tiempo y consiga terminar Trapator me pondré a hacer un Juego Multijugador Age of Empires.
Saludos, Javi
-
Esto no debería tener que decirlo pero bueno, que nadie haga caso a la gente que pretende molestar.
Oidos sordos, con que aviseis a la moderación es suficiente. Es la única solución.
-
Esto no debería tener que decirlo pero bueno, que nadie haga caso a la gente que pretende molestar.
Oidos sordos, con que aviseis a la moderación es suficiente. Es la única solución.
Gracias baby.
---
En la versión que me encuentro desarrollando actualmente tengo un pequeñísimo error con las baldosas al momento de que estas pasen el nivel de la pared, La esquina de la pared continua hasta llegar a la ultima baldosa pero como es un vacío no se coloca, Igual pasa con las paredes al momento de que una baldosa pase por debajo de otra.
Edito: Aquí la imagen:
http://img9.imageshack.us/img9/5778/vfjoakowest2.png
-
¿Está corriendo en servidor PHP y MySQL? ¡si sabes usar html5 sería la leche! yo se un poco :)
Saludos, Javi
-
¿Está corriendo en servidor PHP y MySQL? ¡si sabes usar html5 sería la leche! yo se un poco :)
Saludos, Javi
Yo pienso que el hará un servidor en VB6 y el cliente mandará los sockets por HTML5.
¡Cuentanos Joako!
-
Yo pienso que el hará un servidor en VB6 y el cliente mandará los sockets por HTML5.
¡Cuentanos Joako!
Si baby, de hecho por eso fue que hice la pregunta el otro día sobre html5
-
Si quieres un consejo, usa Comet.
Yo estoy dando mis pinitos con un servidor de Comet, APE. (http://www.ape-project.org/)
Te recomiendo que le eches un vistazo, verás que es muy interesante. Para el que quiera mas información, es la tecnología (aunque no exactamente APE, pero funciona de igual forma) que hay detrás de, por ejemplo, el chat de Facebook o el de Google.
Buen trabajo, parece interesante :)
Saludos!
-
Si quieres un consejo, usa Comet.
Yo estoy dando mis pinitos con un servidor de Comet, APE. (http://www.ape-project.org/)
Te recomiendo que le eches un vistazo, verás que es muy interesante. Para el que quiera mas información, es la tecnología (aunque no exactamente APE, pero funciona de igual forma) que hay detrás de, por ejemplo, el chat de Facebook o el de Google.
Buen trabajo, parece interesante :)
Saludos!
Muchísimas gracias, Le echare un vistazo para ver que tal me va.
---
Después de la ignorancia de un amigo hacia el nuevo sistema de build por medio del array bidimensional, me he decidido crear una pequeña aplicación que permite al usuario crear el mapa del área en un entorno programado en jQuery.
Aquí tienen una imagen.
http://img850.imageshack.us/img850/2447/editorjoako.png
Cuando lo termine les hago saber el link.
Saludos.
-
tlx, perdóname el doble post pero eso que me acabas de pasar esta totalmente excelente. ¿Todo es en javascript?
Lo veo absolutamente interesante pero es algo complicado es el modo de uso.
Me leeré mas sobre el tema.
Saludos.
-
tlx, perdóname el doble post pero eso que me acabas de pasar esta totalmente excelente. ¿Todo es en javascript?
Lo veo absolutamente interesante pero es algo complicado es el modo de uso.
Me leeré mas sobre el tema.
Saludos.
Tiene también un programa servidor... pero se maneja por JS, lo malo es que usa MooTools... si fuera jQuery :/
-
Tiene también un programa servidor... pero se maneja por JS, lo malo es que usa MooTools... si fuera jQuery :/
Si, vi lo de mootols xD
Según también esta en jQuery, pero lo estuve buscando por la pagina y en donde me metía estaba con mootols. :(
Por cierto, aquí unos avances del editor:
Perdonen los errores en css :x
(http://img822.imageshack.us/img822/212/isojoakocreador.png)
-
Perdonen doble post: Las 3 de la mañana y aun sin terminar xD
El editor de mapas estará disponible en los próximos días.
Algunas novedades que traerá seran:
- Entorno gráfico profesional
- Gestor de tamaño de mapas
- Distintas vistas del mapa (Por ahora Isométrico y 2D en Planta)
- Importación y exportación de mapas (Cargar y Guardar)
- Accesos directos del teclado
Es mas que nada para que aquellos que no entiendan el funcionamiento del nuevo build, puedan crear su mapa sin ningún problema.
Saludos.
-
Tiene también un programa servidor... pero se maneja por JS, lo malo es que usa MooTools... si fuera jQuery :/
MooTools se usa solo en el lado del servidor. En el lado del cliente puedes usar lo que quieras... lo que te sea mas conveniente.
Yo uso jQuery en client-side :)
De todas formas como MooTools solo tienes que usarlo en server-side tampoco es demasiado molesto. A veces ni siquiera tienes por qué tocar el server-side (en mi caso no fue así, pero depende del proyecto).
Es algo difícil llegar a comprender como funciona (estamos acostumbrados a como trabaja PHP, y es diferente) y a poder usarlo con fluidez, pero una vez lo aprendes es genial, la verdad, os recomiendo dedicarle un tiempo :)
Un saludo!
-
MooTools se usa solo en el lado del servidor. En el lado del cliente puedes usar lo que quieras... lo que te sea mas conveniente.
Yo uso jQuery en client-side :)
De todas formas como MooTools solo tienes que usarlo en server-side tampoco es demasiado molesto. A veces ni siquiera tienes por qué tocar el server-side (en mi caso no fue así, pero depende del proyecto).
Es algo difícil llegar a comprender como funciona (estamos acostumbrados a como trabaja PHP, y es diferente) y a poder usarlo con fluidez, pero una vez lo aprendes es genial, la verdad, os recomiendo dedicarle un tiempo :)
Un saludo!
MooTools es en el propio servidor? Mmm... tendré que informarme de como va eso, porque ando algo perdido, miraré la documentación. Gracias por pasarnos esto TLX :P
-
MooTools se usa solo en el lado del servidor. En el lado del cliente puedes usar lo que quieras... lo que te sea mas conveniente.
Yo uso jQuery en client-side :)
De todas formas como MooTools solo tienes que usarlo en server-side tampoco es demasiado molesto. A veces ni siquiera tienes por qué tocar el server-side (en mi caso no fue así, pero depende del proyecto).
Es algo difícil llegar a comprender como funciona (estamos acostumbrados a como trabaja PHP, y es diferente) y a poder usarlo con fluidez, pero una vez lo aprendes es genial, la verdad, os recomiendo dedicarle un tiempo :)
Un saludo!
Como todo, lo mejor es aprender los conceptos teóricos para luego no ir al agua sin saber nadar.
-
Como todo, lo mejor es aprender los conceptos teóricos para luego no ir al agua sin saber nadar.
Claro, Le ire dando duro a esto poco a poco ya que por lo que vi la sintaxis es muy distinta y sobretodo algo difícil de entender.
Aun no capte su funcionamiento pero espero hacerlo.
Como dice TLX, una vez que logres manejar esto, que no podrías hacer...
Saludos.
Edito:
(http://img845.imageshack.us/img845/6547/bmjoako.png)
-
Yo hay una cosa que no pillo... el vacío no sería lo mismo que el hueco?
-
Yo hay una cosa que no pillo... el vacío no sería lo mismo que el hueco?
Mmm, no.
Veras, El vacío es aquel que se encuentra fuera del espacio, El hueco es aquel vacío que haces dentro de espacio.
Saludos.
-
Mmm, no.
Veras, El vacío es aquel que se encuentra fuera del espacio, El hueco es aquel vacío que haces dentro de espacio.
Saludos.
Pero al fin y al cabo ambos carecen de nada. Creo que sería más lógico crear vacio y baldosa, y dinámicamente convertir los espacios exteriores en huecos, y los interiores en vacíos.
-
yo tambien pienso = pero tambien podria traer un personage de cobimiento automatico
-
Siento revirir, pero no entiendo estos dos cálculos:
resultadoX = (x * (balW / 2)) - (y * (balW / 2)) + emX;
resultadoY = (x * (balH / 2)) + (y * (balH / 2)) + emY;
-
Siento revirir, pero no entiendo estos dos cálculos:
resultadoX = (x * (balW / 2)) - (y * (balW / 2)) + emX;
resultadoY = (x * (balH / 2)) + (y * (balH / 2)) + emY;
Sacar el punto de inicio de cada baldosa.
balW balH serian las dimensiones de la baldosa (Width y Height), x y seria la coordenada de la baldosa actual (Según bucle for) y emX emY seria el margen de inicio (Me dio harta paja ponerme a calcular el medio de la pantalla, preferí hacerlo con un margen).
Saludos.
-
Muchas gracias por tu aclaración, pero sigo sin entender como hace que por ejemplo la primera baldosa, esté arriba sola, y luego dos abajo, osea el efecto éste que el div completo esté girado.
-
Muchas gracias por tu aclaración, pero sigo sin entender como hace que por ejemplo la primera baldosa, esté arriba sola, y luego dos abajo, osea el efecto éste que el div completo esté girado.
Son 2 bucles for que uso, uno para el eje X y otro para el eje Y. La baldosa como tal es esta:
(http://img171.imageshack.us/img171/1225/baldosa.png)
Lo que hago es sencillamente calcular el centro de la baldosa que es donde se colocará la otra, X,Y va aumentando segun la coordenada por la que se multiplique del for.
La esquina superior izquierda da con el centro de la baldosa.
Saludos.
-
Pero que sentido tiene para la posición X, tener la X y restarle Y. No entiende muy bien, mañana te hablaré pro skype si te viene bien, y gracias por las molestias, voy verde en matemáticas, las estudiaré pero ya..