вращение линии в классе холста javascript

Question

Я пытаюсь создать класс с функцией, которую можно использовать для изменения угла уже нарисованной линии.С тем, что я пишу, линия не движется.Когда я нажимаю правую или левую клавишу, у меня появляется эта ошибка:

TypeError: this.changeAngle не является функцией

Действительно, у меня нет "функции"ключевое слово в моем коде ... я не знаю, что использовать вместо этого.

Не могли бы вы помочь мне ?Большое спасибо.

window.onload = init;

let canvas, ctx;
let mousePos;
let angle = 0;


class Lanceur {
  constructor() {    
    this.changeAngle(this.angle);
  }

  update(ctx) {
    this.drawAiguille(ctx);
  }

  drawSocleLanceur(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(w/2, h, 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
}

  drawAiguille(ctx) {
    ctx.save();
    ctx.rotate(this.angle);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.lineWidth=3;
    ctx.beginPath();
    ctx.moveTo(w/2, h-h*0.12);
    ctx.lineTo(w/2, h-h*0.035);
    ctx.stroke();
    ctx.restore();
  }


  changeAngle(a) {
      this.angle =  a;
  }

  getAngle() {
      return this.angle;
  }

}

function init() {
  canvas = document.querySelector("#jeu");
  ctx = canvas.getContext("2d");

  w = canvas.width;
  h = canvas.height;

  a = new Lanceur();
      requestAnimationFrame(mainloop);
  }

function mainloop() {
  ctx.clearRect(0, 0, w, h);
  a.update(ctx);
  requestAnimationFrame(mainloop);
}

document.addEventListener('keypress',  function(event){
    gereTouches(event);
});


function gereTouches(event) {
  if(event.key == "ArrowRight") {
    this.changeAngle(this.getAngle - 1);
      console.log("ça bouge : " + this.angle);
  }else if(event.key == "ArrowLeft") {
    this.changeAngle(this.getAngle + 1);
}
}

Answer 1

Основные изменения:

• добавил this.angle в thr constructor ()
• , используя keydown событие
• функция gereTouches (событие) использует a вместо this и a.getAngle() вместо a.getAngle
• также 1 для угла слишком велик (это радианы).Вместо этого я использую 0,01.

Надеюсь, это поможет.

window.onload = init;

let canvas, ctx;
let mousePos;
let angle = 0;


class Lanceur {
  constructor() { 
    this.angle = 0;
    this.changeAngle(this.angle);
  }

  update(ctx) {
    this.drawAiguille(ctx);
  }

  drawSocleLanceur(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(w/2, h, 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
}

  drawAiguille(ctx) {
    ctx.save();
    ctx.rotate(this.angle);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.lineWidth=3;
    ctx.beginPath();
    ctx.moveTo(w/2, h-h*0.12);
    ctx.lineTo(w/2, h-h*0.035);
    ctx.stroke();
    ctx.restore();
  }


  changeAngle(a) {
      this.angle =  a;
  }

  getAngle() {
      return this.angle;
  }

}

function init() {
  canvas = document.querySelector("#jeu");
  ctx = canvas.getContext("2d");

  w = canvas.width = 500;
  h = canvas.height = 500;

  a = new Lanceur();
  requestAnimationFrame(mainloop);
  }

function mainloop() {
  ctx.clearRect(0, 0, w, h);
  a.update(ctx);
  requestAnimationFrame(mainloop);
}

document.addEventListener('keydown',  function(event){
  
    gereTouches(event);
});


function gereTouches(event) {
  if(event.key == "ArrowRight") {
    a.changeAngle(a.getAngle() - .01);
      console.log("ça bouge : " + a.angle);
  }else if(event.key == "ArrowLeft") {
    a.changeAngle(a.getAngle() + .01);
}
}

canvas{border:1px solid}

<canvas id="jeu"></canvas>