« anterior próximo »
Páginas: [1]   Ir Abajo

Autor Tema: [Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]  (Leído 679 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
[Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]
« en: 09 de Junio de 2012, 02:43:04 am »
Hola PHPeros.
En esta oportunidad les traigo una actualización de la versión 5.0 del Build de baldosas.
Las novedades son las siguientes:
  • Modo dinámico agregado al esquema tridimensional
  • Acercar / alejar cámara usando el eje Y del evento del ratón (arriba = acercar, abajo = alejar)

Código: [Seleccionar]
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
background-Color:#111;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#piso {
height: 640px;
width: 640px;
-webkit-transform-style: preserve-3d;
position: relative;
margin: 0 auto;
-webkit-transform: rotateX(60deg) rotateZ(45deg);
}
.baldosa {
width:64px;
height:64px;
background-color: rgba(50, 50, 50, .7);
position: absolute;
border:1px solid #555;
}
.baldosa:hover { background-color: rgba(100, 100, 100, .8) }
.grosor {
width:64px;
height:30px;
background-color: rgba(50, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position:absolute;
border:1px solid #555;
}
.uno { -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(48px) translateY(15px) }
.dos { -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(32px) translateY(15px) translateX(-16px)}
.tres { -webkit-transform: rotateX(-90deg) rotateY(180deg) translateZ(16px) translateY(15px) }
.cuatro { -webkit-transform: rotateX(-90deg) rotateY(270deg) translateZ(32px) translateY(15px) translateX(16px)}
</style>
<script>
/*!
 * Build de Baldosas 3D v5.1 - jQuery
 *
 * Autor: Joaquin A. (SoyJoaquin. o -Null-)
 * http://phperos.net
 *
 * Contacto:
 * Email: hgcproductions@hotmail.com
 * Skype: SoyJoaquin.
 *
*/

var emX;
var emY;
var balH;
var balW;
var mapa = [[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,0,0],
[1,1,1,1,1,1,0,0],
[1,1,1,1,0,0,0,0],
[1,1,1,1,0,0,0,0]];


$(document).ready(function (){
emX = 150;
emY = 0;
balH = 64;
balW = 64;
loadBaldosa();

var estaX = 45; var estaY = 1; var x; var y; var press; var pX; var pY; var escala;
$('body').mousedown(function(a){
press = true; pX = a.pageX; pY = a.pageY;
}).mouseup(function(a){
press = false; estaX = x; estaY = y;
}).mousemove(function(b){
if(press){
x = Math.round(-(b.pageX-pX)+estaX);
y = Math.round(-(b.pageY-pY)+estaY);
escala = y/50;
escala = (escala<1)? 1 : escala;
escala = (escala>3)? 3 : escala;
$('#piso').css('WebkitTransform', 'rotateX(60deg) rotateZ('+x+'deg) scale3d('+escala+','+escala+','+escala+')');
}
});
});

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+'" class="baldosa"><div class="grosor uno"></div><div class="grosor dos"></div><div class="grosor tres"></div><div class="grosor cuatro"></div></div>');
resultadoX = (x * (balW));
resultadoY = (y * (balH));
$('#'+id).css({
position: "absolute",
left: resultadoX,
top: resultadoY
});
}
}
}
}
</script>
</head>
<body>
<div id="piso"></div>
</body>
</html>

Espero que les sea de utilidad.
Saludos.
« Última modificación: 09 de Junio de 2012, 03:06:00 am por SoyJoaquin. »
En línea
Twitter: @JoakoM010

Comunidad PHPeros

[Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]
« en: 09 de Junio de 2012, 02:43:04 am »

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]
« Respuesta #1 en: 10 de Junio de 2012, 19:40:47 pm »
Está muy bonito Joako, mis respetos hacia ti. Creo que el código se podría mejorar, y hacer más orientado a objetos, por ejemplo crear un plugin de jQuery para que puedas llamar al mapa algo así:

Código: [Seleccionar]
$('#miMapa').mapa({cuadros:10,tamanio:5});
O se puede personalizar bastante, me gustaría también colaborar con el proyecto :)
Saludos.


Edito:

1- También, en cuando al sistema de movimiento, y zoom creo que vendrían mejor unos botones, para que si "por accidente" hacemos click en el documento, éste no se nos redimensione.

2- Otra cosa sería ponerle el punto de rotación en el centro al mapa, este movimiento marea un poco :-S
« Última modificación: 10 de Junio de 2012, 19:45:03 pm por Warlox »
En línea
- Moderador de PHP

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]
« Respuesta #2 en: 10 de Junio de 2012, 19:44:48 pm »
Cita de: Warlox en 10 de Junio de 2012, 19:40:47 pm
Está muy bonito Joako, mis respetos hacia ti. Creo que el código se podría mejorar, y hacer más orientado a objetos, por ejemplo crear un plugin de jQuery para que puedas llamar al mapa algo así:

Código: [Seleccionar]
$('#miMapa').mapa({cuadros:10,tamanio:5});
O se puede personalizar bastante, me gustaría también colaborar con el proyecto :)
Saludos.

Lo que pasa es que si lo hago de esa manera, no podría ser dinámico (El 0 representa un vacío, el 1 el suelo)
Saludos y toda ayuda es bienvenida.
En línea
Twitter: @JoakoM010

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Aporte] [jQuery] Build de Baldosas v5.1 [3D + Grosores] [Versión Dinámica]
« Respuesta #3 en: 10 de Junio de 2012, 19:46:28 pm »
Éso era solamente un ejemplo, se le puede pasar por los parámetros del plugin tantas opciones como creas necesarias, inclusive mapas y así.
En línea
- Moderador de PHP

Páginas: [1]   Ir Arriba
« anterior próximo »