Я пытаюсь добавить вектор направления в свою игру с разбивкой кирпичей в начале каждого уровня, чтобы игрок мог стрелять в определенном направлении c.
Я создал новый файл для нарисовать и обновить вектор, но я не могу найти способ обновить его, чтобы он двигался с курсором.
В настоящее время моя игра будет рисовать вектор в вертикальном положении. То, что я хочу сделать, это создать прослушиватель событий, который сохраняет положение мыши по x и y при каждом обновлении, а затем поворачивать вектор на основе разницы углов между вертикальным вектором и вектором, который должен быть сделан, используя позиции x и y: мышь.
Вот простая стрелка, которую я рисую в векторном файле.
draw(ctx) {
ctx.save();
ctx.translate(this.paddleCenter.x, this.paddleCenter.y);
ctx.rotate(this.angle * Math.PI/ 180 );
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'red';
ctx.lineWidth = 2;
ctx.moveTo( 0, 0 );
ctx.lineTo( this.pointer.x , this.pointer.y );
ctx.lineTo( this.pointer.x - 10, this.pointer.y + 10);
ctx.arcTo( this.pointer.x, this.pointer.y, this.pointer.x + 10, this.pointer.y + 10, 20);
ctx.lineTo( this.pointer.x, this.pointer.y);
ctx.stroke();
ctx.fill();
ctx.restore();
}
В отдельном файле у меня есть все мои прослушиватели событий. Я знаю, что это должно выглядеть примерно так:
document.addEventListener('pointerover', (event) => {
vector.moveVector(event.clientX, event.clientY);
})
, где
moveVector(x, y) {
this.pointer.x = x;
this.pointer.y = y
}
, но это не обновляет игру. Я предполагаю, что это потому, что моя функция обновления игры не перерисовывает объекты в игре, пока не будет достигнут следующий уровень.
Что мне нужно включить в функцию обновления вектора (deltaTime), чтобы вектор перемещался с мышью? Я на правильном пути или есть лучший способ заставить его работать?
ОБНОВЛЕНИЕ
Мне удалось заставить его работать.
На входе. js
document.addEventListener('pointerdown', (event) => {
game.vector.mousePointer.x = event.clientX;
game.vector.mousePointer.y = event.clientY;
});
На векторе. js
update(deltaTime) {
this.angle = this.moveVector();
}
moveVector() {
//Calculate angle to rotate vector
// 0 angle denotes arrow pointing left
let gameY = this.paddleCenter.y;
let gameX = this.paddleCenter.x;
let mouseY = this.mousePointer.y;
let mouseX = this.mousePointer.x;
let theta = 0;
if (this.mousePointer.x < this.paddleCenter.x && this.mousePointer.y < this.paddleCenter.y){
theta = Math.atan((gameY - mouseY) / (gameX - mouseX)) * 180 / Math.PI; };
else if (this.mousePointer.x > this.paddleCenter.x && this.mousePointer.y < this.paddleCenter.y){
theta = 180 - Math.atan((gameY - mouseY) / (mouseX - gameX)) * 180 / Math.PI; };
else if (this.mousePointer.x < this.paddleCenter.x && this.mousePointer.y > this.paddleCenter.y ) {
theta = 0 };
else if (this.mousePointer.x > this.paddleCenter.x && this.mousePointer.y > this.paddleCenter.y) {
theta = 180 };
return theta
};
Однако у меня есть больше проблем, над которыми я сейчас работаю.
Я не могу заставить вектор указывать, просто используя указатель на прослушиватель событий. когда я использую указатель, вектор указывает направление, в котором моя мышь вернулась на экран. Если я наведу курсор мыши на экран самой игры, он не обновится автоматически.
Кроме того, стрелка моего нарисованного вектора не вращается. Поэтому, когда я размышляю на экране, часть вектора будет повернута в правильное положение, но часть стрелки останется не повернутой.
Если у вас есть предложения по устранению этих проблем, я был бы признателен.