¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Este apartado publico un ejemplo mas avanzado del que aparece en el manual de Movimientos de Personajes en MMOCC.
Lo he desarrollado usando la librería jQuery de Javascript. En diferencia con el anterior, traemos el hecho de poder rotar el personaje según coordenadas del puntero.
Imágenes:
Código:
Espero que les sea de utilidad.
Saludos.
Lo he desarrollado usando la librería jQuery de Javascript. En diferencia con el anterior, traemos el hecho de poder rotar el personaje según coordenadas del puntero.
Imágenes:
personaje.png
Código:
<html>
<head>
<meta name="author" content="Joaquin A." />
<meta name="twitter" content="JoakoM010" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
div{
position: absolute;
}
</style>
<script>
/*!
* Ejemplo - Movimiento de Personajes en Planta [Click] - jQuery
* Creado por Joaquin A. (SoyJoaquin. | -Null-)
*
* Contacto:
* Twitter: @JoakoM010
* Skype: SoyJoaquin.
*/
var elemento;
$(document).ready(function (){
elemento = $('div');
});
function calcularPos(x,y){
var pos = new Array();
pos['x'] = x - (elemento.width()/2);
pos['y'] = y - (elemento.height()/2);
return pos;
}
$(document).mousemove(function(e){
var angulogiro;
var posicion = $('div').position();
var xgiro = e.pageX - (posicion.left + (elemento.width()/2));
var ygiro = e.pageY - (posicion.top + (elemento.height()/2));
angulogiro = Math.atan2(ygiro, xgiro);
angulogiro = angulogiro * 180 / Math.PI;
var angulop = angulogiro;
elemento.css('transform','rotate('+angulop+'deg)');
}).click(function(e){
var finalPos = calcularPos(e.pageX, e.pageY);
elemento.animate({ left:finalPos['x'], top:finalPos['y'] }, 'slow');
});
</script>
</head>
<body>
<div><img src="personaje.png" /></div>
</body>
</html>
Espero que les sea de utilidad.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21