Personagem anda para onde clico com o mouse

[Jessicorrea]

Olá!

Sou iniciante e entendo pouco de javascript, mas tenho tentado através de tutoriais.

Como eu poderia fazer, em javascript, com que meu personagem ande até o local em que clico?

Já  vi como fazer um objeto parado aparecer onde clico, mas na prática ele apareceu longe do lugar clicado, não sei como corrigir e nem se esse seria o caminho para fazer um personagem andar...

Podem me ajudar?

Obrigada!

[kglad]

here's code to get the mouse position:

stage.addEventListener("mousedown", mouseF.bind(this));

var pt =  new createjs.Point();

function mouseF(e) {

pt.x = e.stageX/stage.scaleX

pt.y = e.stageY/stage.scaleY;

}

[Jessicorrea]

Obrigada pelo código. Ainda não consigo entender como usá-lo... sou iniciante. Como ligo isso ao meu personagem?

[kglad]

what's your character instance name?

[Jessicorrea]

Coloquei como Davi. É um movie clip com walk cycle, mas também não sei se é assim que faz, estou fazendo testes para descobrir.

[kglad]

David is the name in the property's panel?

[Jessicorrea]

Yes, Davi is the instance name.

[kglad]

interesting that forum translator used David, when it's Davi.

[kglad · Accepted solution]

stage.addEventListener("stagemousemove",mouseMoveF.bind(this))

var tickFF = tickF.bind(this);

var mouseDownFF = mouseDownF.bind(this);

// speed 

var v = 10;

// movement vector  

var dir = 0;

// mouse click point 

var clickPoint = new createjs.Point();

var angle, nextX, nextY, deltaY, prevPoint;

function mouseMoveF(e){

if(!stage.hasEventListener("stagemousedown")){

stage.addEventListener("stagemousedown", mouseDownFF);

}

}

function mouseDownF(e) {

stage.removeEventListener("stagemousedown", mouseDownFF);

clickPoint.x = e.stageX/stage.scaleX;

clickPoint.y = e.stageY/stage.scaleY;

angle = Math.atan2(clickPoint.y - this.Davi.y, clickPoint.x - this.Davi.x);

dir = angle >= 0 ? -1 : 1;

createjs.Ticker.addEventListener("tick", tickFF);

}

function tickF(e){

nextX = this.Davi.x + v * Math.cos(angle);

nextY = this.Davi.y + v * Math.sin(angle);

deltaY = clickPoint.y - nextY;

if (deltaY/Math.abs(deltaY) == dir) {

this.Davi.x = clickPoint.x;

this.Davi.y = clickPoint.y;

createjs.Ticker.removeEventListener("tick", tickFF);

} else {

this.Davi.x = nextX;

this.Davi.y = nextY;

}

prevPoint = clickPoint;

}

[Jessicorrea]

WOW! Magnífico! Muito obrigada!

Vou estudar seu código e aprender muito com ele!

Obrigada mesmo pela ajuda! Você é sensacional!

[kglad]

you're welcome.