Pegar os eventos do mouse pra fazer um MMO.
O exemplo do que eu tenho está aqui funcionando: http://dan.nea.me/tile-based-games-demo/
É esse código-fonte que passei.
O que estou tentando fazer é trabalhar com o mouse. Só isso. Pois nesse demo tem um script que funciona somente o teclado.
O principal é pegar as posições x e y do mouse e quando e onde o usuário clica em algum local do mapa pra mim trabalhar emcima desses dados.
Meu objetivo é fazer um sistema de batalha pra um MMO(jogo web browser) estilo Travian, OGame etc…mas o sistema de batalha vai ser dinâmico com Javascript/HTML5.
Estou aprendendo HTML5 e Javascript e pra ser sincero nunca apanhei tanto quanto estou apanhando com o Javascript…rs
Eu tenho sprites de guerreiros, arqueiros,cavaleiros etc. Meu objetivo é criar um sistema de batalha dinamico e com IA. A idéia é o defensor posicionar as tropas nesse mapa(que sera diferente para cada cidade) com obstaculos diferentes e a o atacante posiciona as tropas dele tbm no mapa. Então a batalha ocorre com IA entre as unidades. E alguém ganha.
Minha intenção é trabalhar com o mouse pra posicionar as unidades. Ainda não sei como fazer isso mas estou aprendendo.
Esse código do javascript não está funcionando. a biblioteca “track.js” está aqui o código:
(function (global) {
function Track(context) {
context || (context = document);
var isDocument = context == document,
track = this,
contextPos = { x: 0, y: 0 };
function addEvent(type, fn) {
// context is scoped in Track object
context.addEventListener(type, fn, false);
return addEvent;
}
function updateContextXY() {
var ctx = context;
if (isDocument) ctx = context.body;
var left = 0, top = 0;
if (ctx.offsetParent) {
do {
left += ctx.offsetLeft;
top += ctx.offsetTop;
} while (ctx = ctx.offsetParent);
}
contextPos = {
x : left,
y : top
};
};
function getXY(event) {
event = event.pageX ? event : event.touches.length ? event.touches[0] : { pageX: 0, pageY: 0 };
return {
x: event.pageX - document.body.scrollLeft - contextPos.x,
y: event.pageY - document.body.scrollTop - contextPos.y,
}
}
function down(event) {
track.down = true;
// reset the momentum until they release
track.momentumX = track.momentumY = 0;
updateContextXY();
var coords = getXY(event);
track.x = track.downX = coords.x;
track.y = track.downY = coords.y;
track.startTime = +new Date;
}
function up(event) {
track.down = false;
track.duration = +new Date - track.startTime;
track.upX = track.x;
track.upY = track.y;
// work out the momentum
var left = track.weight * (track.downX - track.x),
adjustX = Math.round(left / (track.duration * 10)),
top = track.weight * (track.downY - track.y),
adjustY = Math.round(top / (track.duration * 10));
track.momentumX = adjustX;
track.momentumY = adjustY;
}
function move(event) {
var coords = getXY(event);
track.x = coords.x;
track.y = coords.y;
}
updateContextXY();
// hook up event listeners
addEvent(track.events.down, down)(track.events.up, up)(track.events.move, move)('keydown', function (event) {
track.key[event.which] = true;
})('keyup', function () {
track.key[event.which] = false;
});
}
var touch = 'createTouch' in document;
Track.prototype = {
key: {}, // note that key tracking isn't perfect yet - probably won't be :(
x: 0,
y: 0,
startTime: 0,
duration: 0,
downX: 0,
downY: 0,
upX: 0,
upY: 0,
momentumX: 0,
momentumY: 0,
down: false,
touch: touch,
events: {
up: touch ? 'touchend' : 'mouseup',
down: touch ? 'touchstart' : 'mousedown',
move: touch ? 'touchmove' : 'mousemove',
},
weight: 120, // this is arbitrary, but simple to change
toString: function () {
return JSON.stringify(this);
}
}
global.Track = Track;
})(this);
Mas achei um código que está funcionando. Segue o código:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('html').mousemove(function(event){
console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
});
$('html').click(function(event){
console.log("mouse click X:"+event.pageX+" Y:"+event.pageY);
});
$('html').keyup(function(event){
console.log("keyboard event: key pressed "+event.keyCode);
});
});
</script>
As unidades serão basicamente usadas de um game opensource:
https://units.wesnoth.org/1.14/mainline/en_US/Swordsman.html
A batalha ocorrerá nesse mapa.
Preciso aprender agora como selecionar as unidades que o usuário clicar pra posicionar estrategicamente no mapa.
Obrigado pela ajuda.