Spielstand
Drücke die Knöpfe, um das rote Quadrat zu bewegen:
Zählen Sie die Partitur
Es gibt viele Möglichkeiten, den Punktestand in einem Spiel festzuhalten. Wir zeigen Ihnen, wie Sie einen Punktestand auf die Leinwand schreiben.
Erstellen Sie zuerst eine Partiturkomponente:
Beispiel
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();
}
Die Syntax zum Schreiben von Text auf einem Canvas-Element unterscheidet sich vom Zeichnen eines Rechtecks. Daher müssen wir den Komponentenkonstruktor mit einem zusätzlichen Argument aufrufen, das dem Konstruktor mitteilt, dass diese Komponente vom Typ "Text" ist.
Im Komponentenkonstruktor testen wir, ob die Komponente vom Typ "Text" ist, und verwenden die
fillTextMethode anstelle der fillRectMethode:
Beispiel
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);
}
}
...
}
Zuletzt fügen wir der updateGameArea-Funktion etwas Code hinzu, der die Punktzahl auf die Zeichenfläche schreibt. Wir verwenden die frameNoEigenschaft, um die Punktzahl zu zählen:
Beispiel
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 = "SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}