Drücken Sie die Tasten auf das rote Quadrat zu bewegen:
Count The Score
Es gibt viele Möglichkeiten, um die Punktzahl in einem Spiel zu halten, werden wir Ihnen zeigen, wie eine Partitur auf die Leinwand zu schreiben.
Zuerst eine Punktzahl Komponente machen:
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 für Text auf einem Canvas-Element Schreiben unterscheidet sich von einem Rechteck zeichnen. Deshalb müssen wir die Komponente Konstruktor aufrufen ein zusätzliches Argument, den Konstruktor zu sagen , dass diese Komponente vom Typ "text" .
In der Komponente Konstruktor testen wir , ob die Komponente vom Typ "text" und die Verwendung fillText Methode anstelle der fillRect Methode:
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);
}
}
...
}
Endlich fügen wir einige Code in der updateGameArea Funktion, die die Punktzahl auf die Leinwand schreibt. Wir verwenden die frameNo Eigenschaft , die Partitur 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();
}
Versuch es selber "