ctx.поворот() на холсте javascript

#javascript #html #canvas #html5-canvas

Вопрос:

поэтому я пытаюсь создать игру астероидов, но у меня возникла проблема с ctx.rotate(),

Я вращаю плеер(треугольник) в зависимости от положения мыши, но когда я хочу определить, действительно ли игрок столкнулся с астероидом, то это делает некоторые странные вещи , если я перепишу приведенный ниже код без ctx.rotate и ctx.translate и ctx.restore , чем это работает просто отлично, но без учета вращения игрока. Если я сделаю это с ctx.rotate помощью и ctx.translate и ctx.restore и поставлю ctx.восстановите последнюю строку кода, которую вы видите ниже, он делает что-то странное с вычислением, потому что он тоже вращает астероид, если я оставлю его как есть, он работает так же, как и в первом случае. Кто-нибудь знает решение, и если да, то не могли бы вы мне помочь, пожалуйста? Я также должен сказать, что я рисую три точки в треугольнике, и если астероид касается одной из них, то это считается концом игры.

 ctx.save()
ctx.translate(player.position.x, player.position.y)
ctx.rotate(player.angle   1.57)
ctx.translate(-player.position.x, -player.position.y)
let dX = asteroids[i].position.x - player.position.x
let dY = asteroids[i].position.y - player.position.y
let d = Math.sqrt((dX * dX)   (dY * dY));
let dX2 = asteroids[i].position.x - (player.position.x   20)
let dY2 = asteroids[i].position.y - (player.position.y   40)
let d2 = Math.sqrt((dX2 * dX2)   (dY2 * dY2));
let dX3 = asteroids[i].position.x - (player.position.x - 20)
let dY3 = asteroids[i].position.y - (player.position.y   40)
let d3 = Math.sqrt((dX3 * dX3)   (dY3 * dY3));
ctx.restore()
ctx.strokeStyle = "white"
if (d <= asteroids[i].size || d2 <= asteroids[i].size || d3 <= asteroids[i].size) {
endgame = true
        }