"TypeError: Невозможно прочитать свойство 'cvs' undefined" оператора `this` в классе, когда оно инициализируется - PullRequest
Новая
       8

"TypeError: Невозможно прочитать свойство 'cvs' undefined" оператора `this` в классе, когда оно инициализируется

0 голосов
/ 09 апреля 2020

Итак, у меня есть класс "genGameObject", который, как говорится, используется для генерации игрового объекта, а затем для рисования контента внутри этого gameObject.

Я думал, что это будет орфографическая ошибка или что-то в этом роде. маленький, но я ничего не могу найти (Если кто-то что-то видит, ПОЖАЛУЙСТА, скажите мне, я в основном слепой, поэтому я мог пропустить это.)

Это говорит о том, что this.cvs at строка 11 (this.cvs.width = 400;) не определена, и я не могу ее прочитать. (еще больше похоже на высказывание «this» не определено, и я не могу вызвать свойство неопределенного объекта. Это класс, как «this» не определено?)

Итак, у меня есть текущий код:

(я попытался создать пример минимальной воспроизводимости, но он вызвал другую ошибку, похожую на эту, которая просто не имела смысла) 

class genGameObject {
  // Constructor, obviously
  constructor(sel) {
    this.cvs = document.querySelector(sel) || canvas;
    this.ctx = this.cvs.getContext("2d");
    this.gameState = "unStarted";
  }

  // Main Game Initialization
  gameLoop() {
    this.cvs.width = 400;
    this.cvs.height = 400;

    this.ctx.fillStyle = "#64004C";
    this.ctx.fillRect(0, 0, this.cvs.width, this.cvs.height);

    this.drawMap();
    this.drawPlayer();

    window.requestAnimationFrame(this.gameLoop);
  }

  // Draw Map
  loadMapData(arr) {
    this.mapLoaded = JSON.parse(arr);
  }

  drawMap() {

  }

  // Draw Coins / Entities / Powerups

  // Draw Physics Simulations

  // Draw Player
  drawPlayer() {
    if (this.gameState == "unStarted") {
      this.playerX = this.mapLoaded.player.x;
      this.playerY = this.mapLoaded.player.y;
    } else {
      this.ctx.beginPath();
      this.ctx.fillStyle = "#D41E3C";
      this.ctx.arc(this.playerX, this.playerY, 20, 0, 2 * Math.PI);
      this.ctx.fill();
    }
  }
}

const gCont = new genGameObject(".gameObject");

const mapArray = {
  player: {
    x: "10",
    y: "10"
  },
  coins: [

  ]
};

gCont.loadMapData(JSON.stringify(mapArray));

gCont.gameLoop();
.gameObject {
  box-sizing: border-box;
  border: 1px solid black;
}
<link rel="stylesheet" href="rsc/index.css">

<canvas class="gameObject"></canvas>

<script src="rsc/index.js"></script>

1 Ответ

0 голосов
/ 09 апреля 2020

Не Javascript специалист, но я не вижу, как window.requestAnimationFrame (this.gameL oop); передаст «this» в gameL oop

Также получил некоторую информацию от: Как использовать requestAnimationFrame внутри объекта Class

После этого комментария от Mat , Я выяснил, что область действия оператора this моего requestAnimationFrame была неправильной.

Я определял его с помощью this.gameLoop, чтобы вызвать сам l oop, полностью игнорируя, что я не связывал this обратно в себя.

итак. 

window.requestAnimationFrame(this.gameLoop.bind(this));

Должен go в класс

...