Spiel-Punkte

Drücken Sie die Schaltfläche, um den roten Block zu bewegen:

Punktzahl

Es gibt viele Methoden, um Punkte in Spielen zu verfolgen. Wir zeigen Ihnen, wie Sie Punkte auf dem Canvas schreiben.

Erstellen Sie zunächst eine Punktzahlskomponente:

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

Der Syntax zum Schreiben von Text auf dem Canvas-Element ist anders als der zur Zeichnung von Rechtecken. Daher müssen wir einen zusätzlichen Parameter an den Konstruktor des Komponentenobjekts übergeben, um dem Konstruktor mitzuteilen, dass der Typ der Komponente "text" ist.

Im Konstruktor des Komponentenobjekts testen wir, ob das Komponentenobjekt "text" Typ, und verwenden fillText Methode anstatt fillRect Methode:

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

Schließlich fügen wir im updateGameArea-Funktion einige Codezeilen hinzu, um die Punkte auf dem Canvas zu schreiben. Wir verwenden frameNo Um die Punkte zu berechnen, verwenden wir die folgende Eigenschaft:

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, "green", x, 0));
    myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].speedX = -1;
    myObstacles[i].newPos();
    myObstacles[i].update();
  }
  myScore.text = "SCORING: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Selbst ausprobieren