Puntuación de juego

Presiona el botón para mover el cuadrado rojo:

Puntuación

Hay muchos métodos para registrar puntuaciones en el juego, mostraremos cómo escribir la puntuación en el lienzo.

Primero, crea un componente de puntuación:

var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 160);
  myScore = new component("30px", "Consolas", "black", 280, 40, "text");
  myGameArea.start();
}

La sintaxis para escribir texto en el elemento de lienzo es diferente de la de dibujar un rectángulo. Por lo tanto, debemos usar un parámetro adicional para llamar al constructor del componente, informando al constructor que el tipo de este componente es "text".

En el constructor del componente, comprobamos si el componente es "text" Tipo, y usa fillText Método en lugar de fillRect Método:

function component(width, height, color, x, y, type) {
  this.type = type;
  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.fillRect(this.x, this.y, this.width, this.height);
    }
  }
...
}

Finalmente, en la función updateGameArea, agregamos código para escribir el puntaje en el lienzo. Usamos frameNo usamos propiedades para calcular el puntaje:

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    minHeight = 20;
    maxHeight = 200;
    height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
    minGap = 50;
    maxGap = 200;
    gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
    myObstacles.push(new component(10, height, "verde", x, 0));
    myObstacles.push(new component(10, x - height - gap, "verde", x, height + gap));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].speedX = -1;
    myObstacles[i].newPos();
    myObstacles[i].update();
  }
  myScore.text = "PUNTAJE: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Prueba personalmente