在圆形路径上移动画布图像
问题描述:
我目前正在研究2D JavaScript游戏,现在正在做移动机制。我希望球员能够前后移动,朝向或远离老鼠,同时还能够挥杆。在圆形路径上移动画布图像
我得到了鼠标下面相当不错,但我坚持如何实施strafing。我需要我的播放器沿着动态的圆形路径移动,该路径根据播放器与鼠标的距离而改变大小。例如:如果鼠标是红色的X,我想沿着绿色的圆形路径移动玩家。 这条路当然会根据玩家距离鼠标的距离而改变大小。
我感到每当移动键被按下,所以我真的很想找一个公式来移动玩家可在“位置更新一次实现正确的循环路径移动更新球员位置第二“的方式。
我知道,对于一个圆形轨迹,坐标可以通过发现:
x = centerX * radius * Math.cos(theta); y = centerY * radius * Math.sin(theta);
,但我有麻烦实施。下面是我的一些框架,但恐怕我已经尝试了所有的解决方案都没有得到,甚至我关闭,所以我将不会发布碎数学我已经删除
Player.prototype.update = function(delta){
this.playerCenter = [this.x+this.width/2, this.y+this.height/2];
let dX = (GAME.mouse.position.x - this.playerCenter[0]),
dY = (GAME.mouse.position.y - this.playerCenter[1]);
radius = Math.sqrt(dX * dX + dY * dY);
// Movement Forward
if(GAME.keyDown[87] && radius >= 50){
this.x += (dX/radius) * this.movementSpeed * delta;
this.y += (dY/radius) * this.movementSpeed * delta;
}
// Movement Backward
if(GAME.keyDown[83]){
this.x -= (dX/radius) * this.movementSpeed * delta;
this.y -= (dY/radius) * this.movementSpeed * delta;
}
// Strafe left
if(GAME.keyDown[65]){
}
// Strafe right
if(GAME.keyDown[68]){
}
}
答
你几乎有解决方案。
你需要在90度去向前的向量。要旋转矢量90cw,请交换x和y并取消新的x。
EG
dx = ?; // forward direction
dy = ?;
// rotate 90 clockwise
dx1 = -dy;
dy1 = dx;
因此,你可以如下
var dX = (GAME.mouse.position.x - this.playerCenter[0]);
var dY = (GAME.mouse.position.y - this.playerCenter[1]);
var radius = Math.sqrt(dX * dX + dY * dY);
//normalise
if(radius > 0){
dX = (dX/radius) * this.movementSpeed * delta;
dY = (dY/radius) * this.movementSpeed * delta;;
}else{
dX = dY = 0; // too close need to set this or you will get NaN propagating through your position variables.
}
if(GAME.keyDown[87] && radius >= 50){ // Movement Forward
this.x += dX;
this.y += dY;
}
if(GAME.keyDown[83]){ // Movement Backward
this.x -= dX;
this.y -= dY;
}
if(GAME.keyDown[65]){ // Strafe left
this.x += -dY; // swap x and y negate new x to rotate vector 90
this.y += dX;
}
if(GAME.keyDown[68]){ // Strafe right
this.x -= -dY; // swap x and y negate new x to rotate vector 90
this.y -= dX;
}
+0
这是一个完美的解决方案,谢谢你的知识,先生 - 我已经凝固了载体的概念更多在我的大脑中! –
你不只是需要增加圆/减少'radius'更新您的代码? –