根据主元素的位置和旋转角度添加新元素

Question

我正在用原版 javascript 构建一个游戏，您可以在其中用雷达发现鱼。我要实现的目标如下：

我希望物体（鱼）在旋转时随机出现在刻度盘的位置（随机出现在width/height）。我能够得到表盘的角度和位置，但我不知道如何计算新对象的位置。

我目前丑陋的解决方案涉及在div表盘内创建一个临时的，获取位置，并将其用于新对象，但实际上并没有好好工作。

请参阅 this fiddle 了解我目前拥有的内容

function createNewFish() {

// Create new fishies

/*
const pos = document.getElementById('dial').getBoundingClientRect();
const degrees = getDialDegrees();

console.log(pos)
console.log(degrees)

// Calculate position for fish?
*/

Answer 1

对于任何试图这样做的人，我已经设法使用以下解决方案解决了它：

当你有一个旋转的表盘时，你可以用一些相等的 divs（我用的是 9）填充表盘，如下所示：

function DialGenerator() {
  for(let i=0;i<9;i++) {
    const insideDial = document.createElement('div');
    insideDial.classList.add('dial-inside')
    insideDial.setAttribute('id', 'dial-inside-'+i)
    document.getElementById('dial').appendChild(insideDial)
  }
}

然后如果你想在表盘上的随机位置显示元素（就像我的雷达需要的那样），你可以在表盘内使用随机div Math.random() 得到这个 div:

的位置

function getPosition() {
    const n = getRandomNumber(1, 6);
    // Get a random position on the dial for the fish to appear on
    const dialPosition = document.getElementById('dial-inside-'+n).getBoundingClientRect();
    return {'top':dialPosition.top, 'left':dialPosition.left}
 }

这个 returns 表盘上 div 的位置，您可以用它来将元素放在雷达上。

希望这对某人有所帮助！

根据主元素的位置和旋转角度添加新元素

Add new elements based on position and rotation angle of main element

javascript

rotation