Текст для HTML-холста не отображается на экране

Question

Когда я пытаюсь сделать так, чтобы текст появлялся на холсте HTML для этой игры, которую я пытаюсь разработать, он не появляется. Это странно, потому что для другого подобного проекта это работало нормально. Любые предложения будут оценены.

Дело не в том, что ScoreText не существует, или текст "", это связано с рисованием на холсте.

var gamePiece;
var droplets = [];
var score = 0;
var scoreText;

function startGame() {
  gamePiece = new component(30, 30, "red", 10, 120);
  scoreText = new component("30px", "Consolas", "black", 280, 80, "text");
  myGameArea.start();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = window.screen.width;
    this.canvas.height = window.screen.height - 100;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function(e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    });
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function everyinterval(n) {
  if ((myGameArea.frameNo / n) % 1 == 0) {
    return true;
  }
  return false;
}

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.width / 2, 0, 2 * Math.PI);
      ctx.fill();
    }
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  this.crashWith = function(obj) {
    var myCenterX = this.x + (this.width / 2);
    var myCenterY = this.y + (this.height / 2);
    var oCenterX = obj.x + (obj.width / 2);
    var oCenterY = obj.y + (obj.height / 2);

    var crash = false;
    if (Math.sqrt(Math.pow(myCenterX - oCenterX, 2) + Math.pow(myCenterY - oCenterY, 2)) < this.width / 2 + obj.width / 2) {
      crash = true;
    }
    return crash;
  }
}

function updateGameArea() {
  var x, y;
  for (i = 0; i < droplets.length; i++) {
    if (gamePiece.crashWith(droplets[i])) {
      droplets.splice(i, 1);
      score++;
      console.log("crashed");
      break;
    }
  }

  myGameArea.clear();
  myGameArea.frameNo++;

  if (myGameArea.frameNo == 1 || everyinterval(20)) {
    wid = myGameArea.canvas.width;
    droplets.push(new component(25, 25, "blue", Math.random() * wid, -20));
  }

  for (i = 0; i < droplets.length; i++) {
    droplets[i].y += 5;
    droplets[i].update();
  }

  if (myGameArea.x && myGameArea.y) {
    gamePiece.x = myGameArea.x;
    gamePiece.y = myGameArea.y;
  }

  scoreText.text = "SCORE: " + score;
  console.clear();
  console.log(scoreText.text);
  scoreText.update();
  gamePiece.update();
}
startGame();

canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

Предполагается, что на холсте отображается ScoreText, но это не так.

Answer 1

Опечатка / brainfart: Вы никогда не устанавливали type вашего компонента.Шестой аргумент, который вы передаете при инициации scoreText, теряется, а if(this.type === 'text') никогда не верен.

var gamePiece;
var droplets = [];
var score = 0;
var scoreText;

function startGame() {
  gamePiece = new component(30, 30, "red", 10, 120);
  scoreText = new component("30px", "Consolas", "black", 280, 80, "text");
  myGameArea.start();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = window.screen.width;
    this.canvas.height = window.screen.height - 100;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function(e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    });
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function everyinterval(n) {
  if ((myGameArea.frameNo / n) % 1 == 0) {
    return true;
  }
  return false;
}
// here add the type argument
function component(width, height, color, x, y, type) {
  this.type = type; // here set it to your component instance
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.width / 2, 0, 2 * Math.PI);
      ctx.fill();
    }
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  this.crashWith = function(obj) {
    var myCenterX = this.x + (this.width / 2);
    var myCenterY = this.y + (this.height / 2);
    var oCenterX = obj.x + (obj.width / 2);
    var oCenterY = obj.y + (obj.height / 2);

    var crash = false;
    if (Math.sqrt(Math.pow(myCenterX - oCenterX, 2) + Math.pow(myCenterY - oCenterY, 2)) < this.width / 2 + obj.width / 2) {
      crash = true;
    }
    return crash;
  }
}

function updateGameArea() {
  var x, y;
  for (i = 0; i < droplets.length; i++) {
    if (gamePiece.crashWith(droplets[i])) {
      droplets.splice(i, 1);
      score++;
      console.log("crashed");
      break;
    }
  }

  myGameArea.clear();
  myGameArea.frameNo++;

  if (myGameArea.frameNo == 1 || everyinterval(20)) {
    wid = myGameArea.canvas.width;
    droplets.push(new component(25, 25, "blue", Math.random() * wid, -20));
  }

  for (i = 0; i < droplets.length; i++) {
    droplets[i].y += 5;
    droplets[i].update();
  }

  if (myGameArea.x && myGameArea.y) {
    gamePiece.x = myGameArea.x;
    gamePiece.y = myGameArea.y;
  }

  scoreText.text = "SCORE: " + score;
  console.clear();
  console.log(scoreText.text);
  scoreText.update();
  gamePiece.update();
}
startGame();

canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}