Enemy troubles follow a moving player
Ok so I want to make a javascript / html canvas game where the player is followed by some enemies and after a little "research" it is the most important part of my monster (enemies) class:
this.UpdateAngle = function() {
this.dx = this.x - player.x;
this.dy = this.y - player.y;
this.angle = Math.atan2(this.dy, this.dx) * 180 / Math.PI;
if (this.angle < 0) {
this.angle += 2 * Math.PI;
}
}
this.UpdateSpeed = function() {
this.speedX = this.speed * Math.cos(this.angle);
this.speedY = this.speed * Math.sin(this.angle);
}
this.Move = function() {
this.UpdateAngle();
this.UpdateSpeed();
this.x += this.speedX;
this.y += this.speedY;
}
So what I wanted to do here was to calculate the angle from the enemy to the player with atan2()
, and then calculate how much I should move along the x and y axis using cos()
and sin()
, the speed and angle that I calculated, and then just moved the calculated pixels.
This all seems to work well until I transfer the player, then the enemies start moving in strange directions. I have no idea what happened, it would be great if someone knew me how this should be done.: D
You can see it in action here . * I updated the code with a suggestion from PremierBromanov.
source to share
So it was actually Premier Brommanov, thanks, but I can't agree with the comment as it was, so I'll just do that to make it clearer if someone has to come and want an answer too. The math I did was a little bit wrong and this is how my code looked like:
this.UpdateAngle = function() {
this.dx = player.x - this.x;
this.dy = player.y - this.y;
this.distance = Math.sqrt((this.dx*this.dx) + (this.dy*this.dy));
this.angle = Math.atan2(this.dy,this.dx) * 180 / Math.PI;
}
this.UpdateSpeed = function() {
this.speedX = this.speed * (this.dx/this.distance);
this.speedY = this.speed * (this.dy/this.distance);
}
this.Move = function() {
this.UpdateAngle();
this.UpdateSpeed();
this.x += this.speedX;
this.y += this.speedY;
}
Thanks again to Prime Minister Bromanov, this is his answer, as well as everyone else, this was my first post, and I am glad how quickly I got the answer! (I was the slowest here): D
source to share
It may have something to do with this block
this.angle = Math.atan2(this.dy,this.dx) * 180 / Math.PI;
if (this.angle < 0) {
this.angle += 2 * Math.PI;
You use Math.atan2
which outputs the angle in radians, then you convert to degrees with * 180 / Math.PI;
. After that, you check to see if it is less than zero and add 2Pi to the angle to make sure it calculates correctly its actual full circle angle minus the angle. BUT, you are using radians here instead of degrees. So when your code is negative, you add 2Pi to the power, which is not very much, but sometimes leads to a positive result. This is why your dots rotate as you move. If you notice that the points will slow down as you are further away, then there is a negative angle greater than 2Pi and therefore does not spin right away.
try changing it to
if (this.angle < 0) {
this.angle += 360;
}
source to share