Javascript 如何在p5.js中实现多个图像围绕偏心点旋转
我正在使用JavaScript和p5.js库制作一个塔防游戏。我有两张照片，一个底座和一把枪。枪被画在底座的顶部，使其看起来像一个单独的单元。我需要我的枪指向一条小路上的敌人。我需要帮助使枪在点而不是中心旋转，记住可能有几个这样的塔。我尝试过平移以改变中心和旋转，但这对许多对象不起作用，而且显然无法跟踪许多对象 我也没有看到关于这个问题的任何其他问题，有没有更好的解决方案/替代方案来完成我正在努力完成的任务 所需代码 一些重要变量 预装货物 画框 鼠标点击事件 这张图片显示了我正在使用的两张图片：Base&gun。我需要能够把枪转向敌人Javascript 如何在p5.js中实现多个图像围绕偏心点旋转,javascript,animation,rotation,game-physics,p5.js,Javascript,Animation,Rotation,Game Physics,P5.js,我正在使用JavaScript和p5.js库制作一个塔防游戏。我有两张照片，一个底座和一把枪。枪被画在底座的顶部，使其看起来像一个单独的单元。我需要我的枪指向一条小路上的敌人。我需要帮助使枪在点而不是中心旋转，记住可能有几个这样的塔。我尝试过平移以改变中心和旋转，但这对许多对象不起作用，而且显然无法跟踪许多对象 我也没有看到关于这个问题的任何其他问题，有没有更好的解决方案/替代方案来完成我正在努力完成的任务 所需代码 一些重要变量 预装货物 画框 鼠标点击事件 这张图片显示了我正在使用的两张图片
非常感谢您的帮助，如果您还使用p5库中的和方法（允许您存储当前设置），请翻译和旋转多个对象 向给定点旋转函数是常用的方法 为了说明这一点，我编写了这个快速片段，其中只有当鼠标在枪的范围内时，枪才会朝着鼠标旋转 让枪精灵来吧 功能预加载{ gunSprite=loadImagehttps://i.imgur.com/ayvg9J2.jpg, =>{ 枪精灵。大小20，40 } } 让枪=[ {x:160，y:80，角度：0，范围：100}， {x:300，y:200，角度：0，范围：150}， {x:100，y:240，角度：0，范围：120} ] 功能设置{ CreateCanvas600400 无填料 } 函数图{ 背景200 枪中之枪 拉枪 } 多功能拉枪{ const isWithinRange=distmouseX，mouseY，gun.x，gun.y
var isFireTowerPressed = false; // checks if tower is placed
var FireTowerPos = []; // location of every tower => [] - 2d array
function preload() {
backgroundImg = loadImage("http://127.0.0.1:8080/img/extra/map1.png");
[...]
firetowerbaseImg = loadImage("http://127.0.0.1:8080/img/towers/firetowerbase.png");
firetowerturretImg = loadImage("http://127.0.0.1:8080/img/towers/firetowergun.png");
}
function draw()
{
background(60, 238, 161);
[...]
if (isFireTowerPressed == true) //checks if I have pressed the button to place the tower
{
image(firetowerbaseImg, mouseX - 28, mouseY - 28);
// show range circle
noFill();
stroke(0,0,0);
strokeWeight(1);
circle(mouseX, mouseY, 300);
}
for (var i = 0; i < FireTowerPos.length; i++)
{
image(firetowerbaseImg, FireTowerPos[i][0], FireTowerPos[i][1]);
image(firetowerturretImg, FireTowerPos[i][0], FireTowerPos[i][1]-20);
}
}
function mouseClicked()
{
if (isFireTowerPressed==true && mouseX+28 <= 750) // place-able area
{
FireTowerPos.push([mouseX-28, mouseY-28]);
isFireTowerPressed = false;
}
}