HTML Canvas的文本未显示在屏幕上

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;
}