Angular 如何将变量更改为未定义的角度

每当我调用moveAvatar时，this.vx和this.vy都是未定义的

怎么做

它在普通JS应用程序中的工作原理：

游戏开始：设置一个间隔，调用draw over和over，在画布上绘制。我不明白为什么用typescript做不到这一点

vx和vy都是定义的，并且都是赋值的。你甚至可以把它们打印出来

我从一个运行良好的纯JS应用程序移植了这段代码

我有一种感觉，这与如何处理时间间隔有关。请让我知道！！谢谢

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-avoid',
  templateUrl: './avoid.component.html',
  styleUrls: ['./avoid.component.css']
})
export class AvoidComponent implements OnInit {
  avatarImage;
  enemy;
  x = 30;
  y = 30;
  _x = 300;
  _y = 300;
  score = 0;
  vx: number = 0;
  vy: number = 0;
  scoreTracker;
  gameCanvas;
  frames;
  gameStatus = false;
  hud = {
    score: 0,
    left: 0,
    right: 0,
    up: 0,
    down: 0
  };
  backstage;
  time = 0;
  level = 1;
  enemySpeed = 0.5;
  levelTracker;

  constructor() {
  }

  ngOnInit() {
    let body = document.querySelector('body');
    body.addEventListener("keyup", this.moveAvatar);
    this.gameCanvas = document.getElementById("gameCanvas");
    this.scoreTracker = document.getElementById("score");
    this.levelTracker = document.getElementById('level');
    this.enemy = this.getEnemy();
    this.avatarImage = this.getAvatar();
  }

  levelUp() {
    this.level++;
    this.enemySpeed += 0.25;
    this.levelTracker.innerText = this.level.toString();
  }

  startCanvas() {
    this.backstage = document.createElement("canvas");
    this.backstage.width = this.gameCanvas.width;
    this.backstage.height = this.gameCanvas.height;
    if (this.frames != null) {
      this.gameOver();
    }
    this.backstage.getContext("2d", {
      alpha: false
    }).drawImage(this.avatarImage, this.x, this.y);
    this.backstage.getContext("2d", {
      alpha: false
    }).drawImage(this.enemy, this._x, this._y)
    this.gameCanvas.getContext("2d", {
      alpha: false
    }).drawImage(this.backstage, 0, 0);

    this.time = 0;

    const that = this;
    this.frames = setInterval(() => {
      that.Draw();
    }, 100);
  }

  getAvatar() {
    var avatarImage = new Image(30, 30);
    avatarImage.src = "../assets/images/avatar.png";
    return avatarImage;
  }

  getEnemy() {
    var enemy = new Image();
    enemy.src = "../assets/images/enemy.png"
    return enemy;
  }

  moveAvatar(key) {
    switch (key.keyCode) {
      case 37:
        this.vx--;
        break;
      case 38:
        this.vy--;
        break;
      case 39:
        this.vx++;
        break;
      case 40:
        this.vy++;
        break;
    }
  }

  Follow() {
    if (this.x > this._x) {
      this._x += this.enemySpeed;
    } else if (this.x < this._x) {
      this._x -= this.enemySpeed;
    }

    if (this.y > this._y) {
      this._y += this.enemySpeed;
    } else if (this.y < this._y) {
      this._y -= this.enemySpeed;
    }
  }

  Draw() {
    this.time++;

    this.Accelerate();
    this.Follow();

    if (this.x < 0 || this.y < 0 || this.y > 520 || this.x > 770) {
      this.gameOver();
      return;
    }

    this.score += 1;
    this.scoreTracker.value = this.score;
    this.backstage.width += 0;
    this.gameCanvas.width += 0;
    this.backstage.getContext("2d", {
      alpha: false
    }).drawImage(this.avatarImage, this.x, this.y);

    this.backstage.getContext("2d", {
      alpha: false
    }).drawImage(this.enemy, this._x, this._y);
    this.gameCanvas.getContext("2d", {
      alpha: false
    }).drawImage(this.backstage, 0, 0);
    if (this.x <= this._x + 20 && this.x >= this._x - 20) {
      if (this.y <= this._y + 20 && this.y >= this._y - 20) {
        this.gameOver();
      }
    }
    if (this.score % 500 === 0) {
      this.levelUp();
    }
  }

  Accelerate() {
    this.x += this.vx;
    this.y += this.vy;
  }

  gameOver() {
    clearInterval(this.frames);
    this.x = 30;
    this.y = 30;
    this._x = 300;
    this._y = 300;
    this.score = 0;
    this.scoreTracker.value = 0;
    this.level = 1;
    this.enemySpeed = 0.5;
    this.levelTracker.innerText = "1";
  }
}

这样说吧

body.addEventListener('keyup', (ev) => this.moveAvatar(ev));

或

这样说吧

body.addEventListener('keyup', (ev) => this.moveAvatar(ev));

或

---

---

除了上述正确答案之外，您还可以使用渲染器模块实现相同的功能。这个.renderer.listen'keyup'，target，callbackfn；您可以让angular创建和销毁侦听器，而不是手动添加侦听器。

除了上述正确答案之外，您还可以使用渲染器模块来实现相同的功能。这个.renderer.listen'keyup'，target，callbackfn；您可以让angular创建和销毁侦听器，而不是手动添加侦听器。

that.Draw；这是正确的吗？y正在使用箭头函数，您不必将其分配给该类型脚本与它无关，因为它无法工作。typescript是javascript的超集，因此，使用javascript的任何东西都将使用typescript。@SheikAlthaf，它可以工作，但这与我没有完全理解moveAvatar方法的内部有关，moveAvatar方法绑定到该方法而不是组件的类。这纯粹是为了实验。@Oram，没错，但是ES6语法与我为什么对这个关键字有问题有关。我应该澄清一下，我的代码绑定到了不正确的代码。哦，好吧，我重新学习了一些我认为是以牺牲2小时睡眠为代价的记忆。希望这有助于帮助别人；这是正确的吗？y正在使用箭头函数，您不必将其分配给该类型脚本与它无关，因为它无法工作。typescript是javascript的超集，因此，使用javascript的任何东西都将使用typescript。@SheikAlthaf，它可以工作，但这与我没有完全理解moveAvatar方法的内部有关，moveAvatar方法绑定到该方法而不是组件的类。这纯粹是为了实验。@Oram，没错，但是ES6语法与我为什么对这个关键字有问题有关。我应该澄清一下，我的代码绑定到了不正确的代码。哦，好吧，我重新学习了一些我认为是以牺牲2小时睡眠为代价的记忆。希望这能起到帮助别人的作用。是的，这很有效。我很快意识到，在我发布这篇文章后，它称这篇文章为错误的文章。为什么箭头语法会解决这个问题？我想这个问题会帮助你理解：@Oram Perfect。感谢是有道理的。没有意识到箭头函数没有自己的绑定。是的，这很有效。我很快意识到，在我发布这篇文章后，它称这篇文章为错误的文章。为什么箭头语法会解决这个问题？我想这个问题会帮助你理解：@Oram Perfect。感谢是有道理的。没有意识到箭头函数没有自己的绑定。很好，这是你在ngOnInit期间调用的吗？是的，你可以，基于用例。很好，这是你在ngOnInit期间调用的吗？是的，基于用例。